日程表、學生課表插件

Timetables

GitHub地址

日程表插件，在線預覽 demo1 、demo2

Timetables1

Timetables

安裝

npm install timetables
複製代碼

直接引入

或者直接引入該地址下Timetables.min.js

使用

import Timetables from 'timetablestim';

let Timetable;

// 在能夠獲取到真實dom節點到週期裏進行實例化
var courseList = [
        ['語文','語文','英語','物理','語文','數學','英語','物理','物理','數學','英語','物理'],
        ['數學','語文','物理','物理','語文','語文','語文','物理','數學','語文','語文','體育'],
        ['語文','數學','英語','物理','語文','數學','英語','物理','語文','數學','英語','物理'],
        ['數學','語文','物理','物理','語文','語文','語文','英語','數學','語文','語文','體育'],
        ['語文','數學','英語','物理','語文','數學','英語','物理','語文','數學','英語','物理'],
 ];
Timetable = new Timetables({
    el: '#coursesTable',
    timetables: courseList,
    week: ['一', '二', '三', '四', '五'],
    timetableType: [
        ['上午', 4],
        ['下午', 4],
        ['晚上', 4]
    ],
});
複製代碼

參數及方法

參數or方法	類型	說明
el	String(必傳)	綁定dom節點的id('#id')
timetables	Array(必傳)	日程表內容,格式爲二維數組
week	Array(必傳)	日程表頭部周,格式爲二維數組
timetableType	Array(必傳)	日程表左側分類,格式爲二維數組
highlightWeek	Number	傳入表頭當天的索引,爲日程表頭部高亮某周增長一個class(可自定義樣式)
styles	Object	日程表內容樣式，具體使用見下文
merge	Boolean	是否合併一天內臨近的相同日程(默認爲true)
gridOnClick	Function	單元格點擊觸發事件,方法參數中可獲取到該格的信息
setOption	Function	實例化上的方法, 從新設置參數渲染表格,參數同上(沒有el參數)

參數示例

var timetables = [
        ['大學英語(Ⅳ)@10203','大學英語(Ⅳ)@10203','','','','','毛概@14208','毛概@14208','','','','選修'],
        ['','','信號與系統@11302','信號與系統@11302','模擬電子技術基礎@16204','模擬電子技術基礎@16204','','','','','',''],
        ['大學體育(Ⅳ)','大學體育(Ⅳ)','形勢與政策(Ⅳ)@15208','形勢與政策(Ⅳ)@15208','','','電路、信號與系統實驗','電路、信號與系統實驗','','','',''],
        ['','','','','電裝實習@11301','電裝實習@11301','','','','大學體育','大學體育',''],
        ['','','數據結構與算法分析','數據結構與算法分析','','','','','信號與系統','信號與系統','',''],
];
var timetableType = [
        [{index: '1',name: '8:30'}, 1],
        [{index: '2',name: '9:30'}, 1],
        [{index: '3',name: '10:30'}, 1],
        [{index: '4',name: '11:30'}, 1],
        [{index: '5',name: '12:30'}, 1],
        [{index: '6',name: '14:30'}, 1],
        [{index: '7',name: '15:30'}, 1],
        [{index: '8',name: '16:30'}, 1],
        [{index: '9',name: '17:30'}, 1],
        [{index: '10',name: '18:30'}, 1],
        [{index: '11',name: '19:30'}, 1],
        [{index: '12',name: '20:30'}, 1]
];
var week =  ['週一', '週二', '週三', '週四', '週五'];
var highlightWeek = new Date().getDay();
var styles = {
    Gheight: 50,
    leftHandWidth: 50,
    palette: ['#ff6633', '#eeeeee']
};

// 實例化(初始化課表)
var Timetable = new Timetables({
    el: '#coursesTable',
    timetables: timetables,
    week: week,
    timetableType: timetableType,
    highlightWeek: highlightWeek,
    gridOnClick: function (e) {
      alert(e.name + ' ' + e.week +', 第' + e.index + '節課, 課長' + e.length +'節')
      console.log(e)
    },
    styles: styles
});

//從新設置參數 渲染
function onChange() {
  Timetable.setOption({
    timetables: courseListOther,
    week: ['一', '二', '三', '四', '五', '六', '日'],
    styles:{
      palette: ['#dedcda', '#ff4081']
    },
    timetableType:courseType,
    gridOnClick: function (e) {
      console.log(e)
    }})
};
複製代碼

• timetables 參數爲表格內容項,格式爲二維數組,數組第二維中每項長度須要和timetableType中每一項的長度的累計總和一致, 長度不足時會自動以空字符串追加補全。
  同一天內臨近的日程相同時會自動合併爲一格展現(設置merge參數爲false時不自動合併)。
• timetableType 參數能夠將表格內容分類,數組內的每一項爲該行標籤,用於分隔行。
  每項中第一項能夠是字符串或者一個對象,當爲對象時會自動生成多項dom節點。
  第二項爲要分類的長度，全部長度累計總和應該與timetables參數中每一項的保持長度一致。
• week 參數爲表格列名,將內容依次分隔爲相應列數
• highlightWeek 參數爲數字索引(從1開始),索引對應你上面week參數裏的項,傳入索引後會在表格頭對應節點加上一個class
• styles 參數爲表格表格樣式:
  Gheight 爲表格內每個單元格高度(number)單位爲'px'
  leftHandWidth 爲表格左側日程分類樣式寬帶度(number)單位爲'px'
  palette 爲合併相同課程單元格後顏色調色盤,默認有15種顏色,能夠傳入顏色數組自定義(傳入的顏色會與默認顏色合併,並優先使用自定義顏色)，設爲false時不爲課程單元格生成色盤顏色
• setOption 在實例化對象上能夠使用setOption方法從新渲染表格。參數使用同上,不須要再傳入el參數綁定dom,默認使用實例化時候的dom節點
• 日程表沒有過多進行樣式裝飾,能夠根據已有的css類自行美化。有課程內容的節點會綁定名爲course-hasContent的class，課程行單元會根據timetableType的分類對應生成**stage_***的class，

做者

See 飛翔的荷蘭人.