Календарь, плагин студенческого расписания

внешний интерфейс JavaScript CSS

Timetables

Адрес GitHub

Плагин календаря, предварительный просмотр онлайнdemo1,demo2

Timetables1
Timetables1
Timetables
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]
    ],
});

Параметры и методы

параметр или метод Типы иллюстрировать
el Строка (обязательно) Привязать идентификатор узла dom ('#id')
timetables Массив (обязательно) Содержимое расписания, отформатированное как двумерный массив
week Массив (обязательно) Заголовок календаря недели, формат двумерный массив
timetableType Массив (обязательно) Категории в левой части графика, формат двумерный массив
highlightWeek Number Передайте индекс текущего дня в заголовке и добавьте класс (настраиваемый стиль) для заголовка календаря, чтобы выделить определенную неделю
styles Object Расписание стиля содержимого, см. ниже для конкретного использования
merge Boolean Следует ли объединять одно и то же расписание, которое приближается в течение дня (по умолчанию верно)
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Элемент в параметре, после передачи индекса, класс будет добавлен в соответствующий узел заголовка таблицы
  • stylesПараметр представляет собой стиль таблицы таблицы:
    GheightЕдиницей является «px» для высоты (числа) каждой ячейки в таблице.
    leftHandWidthДля стиля классификации расписания в левой части таблицы единицей ширины (числа) является «пикс».
    paletteЧтобы объединить цветовую палитру одних и тех же ячеек курса, по умолчанию имеется 15 цветов, которые можно настроить, передав массив цветов (входящий цвет будет объединен с цветом по умолчанию, а пользовательский цвет будет использоваться первым ), установлен вfalseНе создавать образцы цветов для ячеек курса, когда
  • setOptionможет использоваться на созданных объектахsetOptionМетод, рендеринг таблицы. Параметр использует то же самое, не нужно передавать привязку параметра EL SOM, узел DOM, когда инсультирование используется по умолчанию
  • Расписание не имеет слишком много стилевого оформления и может быть украшено в соответствии с существующими классами css. Узлы с содержанием курса будут привязаны к имениcourse-hasContentclass, модуль строки курса создаст класс **stage_*** в соответствии с классификацией timetableType,

автор

See летучий голландец.

Категории