Calendar, student schedule plug-in

Timetables

Making the address

Schedule plugin, online preview demo1, Demo2

The installation

npm install timetables
Copy the code

Directly introducing

Or simply import timetables.min.js at this address

use

import Timetables from 'timetablestim';

let Timetable;

// Instantiate the cycle when the actual DOM node is available
var courseList = [
        ['Chinese'.'Chinese'.'English'.'physical'.'Chinese'.'mathematics'.'English'.'physical'.'physical'.'mathematics'.'English'.'physical'],
        ['mathematics'.'Chinese'.'physical'.'physical'.'Chinese'.'Chinese'.'Chinese'.'physical'.'mathematics'.'Chinese'.'Chinese'.'sports'],
        ['Chinese'.'mathematics'.'English'.'physical'.'Chinese'.'mathematics'.'English'.'physical'.'Chinese'.'mathematics'.'English'.'physical'],
        ['mathematics'.'Chinese'.'physical'.'physical'.'Chinese'.'Chinese'.'Chinese'.'English'.'mathematics'.'Chinese'.'Chinese'.'sports'],
        ['Chinese'.'mathematics'.'English'.'physical'.'Chinese'.'mathematics'.'English'.'physical'.'Chinese'.'mathematics'.'English'.'physical']]; Timetable =new Timetables({
    el: '#coursesTable'.timetables: courseList,
    week: ['一'.'二'.'三'.'four'.'five'].timetableType: [['morning'.4],
        ['afternoon'.4],
        ['the night'.4]],});Copy the code

Parameters and Methods

Parameters of the sample

var timetables = [
        ['College English (ⅳ)@10203'.'College English (ⅳ)@10203'.' '.' '.' '.' '.'wool @ 14208'.'wool @ 14208'.' '.' '.' '.'take'],
        [' '.' '.'Signals and Systems @11302'.'Signals and Systems @11302'.'Fundamentals of Analog Electronics @16204'.'Fundamentals of Analog Electronics @16204'.' '.' '.' '.' '.' '.' '],
        ['College Physical Education (ⅳ)'.'College Physical Education (ⅳ)'.'Situation and Policy (ⅳ)@15208'.'Situation and Policy (ⅳ)@15208'.' '.' '.'Circuit, Signal and System Experiments'.'Circuit, Signal and System Experiments'.' '.' '.' '.' '],
        [' '.' '.' '.' '.'Denso Practice @11301'.'Denso Practice @11301'.' '.' '.' '.'College Sports'.'College Sports'.' '],
        [' '.' '.'Data Structure and Algorithm Analysis'.'Data Structure and Algorithm Analysis'.' '.' '.' '.' '.'Signals and Systems'.'Signals and Systems'.' '.' ']];var timetableType = [
        [{index: '1'.name: 'at 8:30'}, 1],
        [{index: '2'.name: '9:30'}, 1],
        [{index: '3'.name: 'at 10:30'}, 1],
        [{index: '4'.name: 'at'}, 1],
        [{index: '5'.name: '12:30'}, 1],
        [{index: '6'.name: 'passion'}, 1],
        [{index: '7'.name: 'soon'}, 1],
        [{index: '8'.name: 'ticket'}, 1],
        [{index: '9'.name: 'the same'}, 1],
        [{index: '10'.name: 'him'}, 1],
        [{index: '11'.name: '7:30 p.m.}, 1],
        [{index: '12'.name: 'selves'}, 1]].var week =  ['Monday'.'on Tuesday'.'on Wednesday'.'on Thursday.'on Friday'];
var highlightWeek = new Date().getDay();
var styles = {
    Gheight: 50.leftHandWidth: 50.palette: ['#ff6633'.'#eeeeee']};// instantiate (initialize class table)
var Timetable = new Timetables({
    el: '#coursesTable'.timetables: timetables,
    week: week,
    timetableType: timetableType,
    highlightWeek: highlightWeek,
    gridOnClick: function (e) {
      alert(e.name + ' ' + e.week +'and the' + e.index + 'Class, section chief' + e.length +'section')
      console.log(e)
    },
    styles: styles
});

// Reset the parameters render
function onChange() {
  Timetable.setOption({
    timetables: courseListOther,
    week: ['一'.'二'.'三'.'four'.'five'.'六'.'day'].styles: {palette: ['#dedcda'.'#ff4081']},timetableType:courseType,
    gridOnClick: function (e) {
      console.log(e)
    }})
};
Copy the code

• timetablesParameters are table items in the format of a two-dimensional array. The length of each item in the second two-dimensional of the array must be andtimetableTypeThe cumulative sum of the length of each item is the same. If the length is insufficient, it will be automatically appended and completed with empty string.
  
  The same day in the adjacent calendar will automatically merge into a panel display (SettingsmergeFalse does not automatically merge).
• timetableTypeParameter categorizes the table contents. Each item in the array is a row label, used to separate rows.
  
  The first item of each item can be a string or an object, which automatically generates multiple DOM nodes.
  
  The second term is the length to be classified, and the cumulative sum of all lengths should betimetablesThe retention length of each parameter is the same.
• weekThe parameter is the column name of the table, which separates the contents into corresponding column numbers
• highlightWeekThe parameter is a numeric index (starting from 1) that corresponds to the index above youweekIf the index is passed to the item, a class will be appended to the corresponding node in the table header
• stylesParameters are table table style:
  
  Gheight= height of each cell in the table (number: ‘px’)
  
  leftHandWidthIs the schedule classification style on the left side of the table.
  
  paletteFor the color palette after merging the same course cells, there are 15 colors by default, and you can pass in the color array for customization (the colors passed will be merged with the default colors and the custom colors will be preferred), set tofalseDoes not generate palette colors for course cells
• setOptionAvailable on instantiated objectssetOptionMethod to re-render the table. You do not need to pass the EL parameter to bind the DOM. By default, the DOM node is used at the time of instantiation
• The calendar doesn’t have much style decoration and can be customized based on existing CSS classes. A class named course-hasContent will be bound to nodes with course content. The class line unit will generate **stage_*** class according to the class of timetableType.

The author

See flying Dutchman.