jquery.schedule

jq.Расписание

Календарь расписания jquery и html

• Поддержка перетаскивания
• График изменения размера
• Ajax получает данные

установить

упаковка

 npm i jq.schedule --save

Демо

Попробуйте демо

Как использовать

добавить заголовок CSS

 <link rel="stylesheet" type="text/css" href="./jquery.schedule/dist/css/style.min.css" />

вставить тело

 <div id="schedule"></div>
<script type="text/javascript" src="./jquery.schedule/dist/js/jq.schedule.min.js"></script>
<script type="text/javascript">
    $(function(){
        var $sc = $("#schedule").timeSchedule({
            startTime: "07:00", // schedule start time(HH:ii)
            endTime: "21:00",   // schedule end time(HH:ii)
            widthTime:60 * 10,  // cell timestamp example 10 minutes
            timeLineY:60,       // height(px)
            verticalScrollbar:20,   // scrollbar (px)
            timeLineBorder:2,   // border(top and bottom)
            bundleMoveWidth:6,  // width to move all schedules to the right of the clicked time line cell
            rows : {
                '0' : {
                    title : 'Title Area',
                    subtitle : 'Description',
                    schedule:[
                        {
                            start:'09:00',
                            end:'12:00',
                            text:'Text Area',
                            data:{
                            }
                        },
                        {
                            start:'11:00',
                            end:'14:00',
                            text:'Text Area',
                            data:{
                            }
                        }
                    ]
                },
                '1' : {
                    title : 'Title Area',
                    schedule:[
                        {
                            start:'16:00',
                            end:'17:00',
                            text:'Text Area',
                            data:{
                            }
                        }
                    ]
                }
            },
            onChange: function(node, data){
                addLog('onChange', data);
            },
            onInitRow: function(node, data){
                addLog('onInitRow', data);
            },
            onClick: function(node, data){
                addLog('onClick', data);
            },
            onAppendRow: function(node, data){
                addLog('onAppendRow', data);
            },
            onAppendSchedule: function(node, data){
                addLog('onAppendSchedule', data);
            },
            onScheduleClick: function(node, time, timeline){
                addLog('onScheduleClick', time + ' ' + timeline);
            }
        });
    });
</script>

Параметры

Параметры

Ключ	Ценить	Описание
имя класса	jq-расписание	добавить класс элемента (по умолчанию jq.schedule)
время начала	07:00	время начала расписания (ЧЧ:ii)
время окончания	21:00	время окончания расписания (ЧЧ:ii)
ширинаTime	600	Пример временной метки ячейки 10 минут
временная линияY	60	высота (пикселей)
вертикальная полоса прокрутки	20	полоса прокрутки (пикселей)
времяЛинияГраница	2	граница (сверху и снизу)
BundleMoveWidth	6	ширина, чтобы переместить все расписания вправо от выбранной ячейки временной шкалы.
ряды	{объект}	данные расписания
перетаскиваемый	{логическое значение}	включить перетаскивание (по умолчанию true)
изменяемый размер	{логическое значение}	включить изменение размера (по умолчанию true)
изменяемый размерслева	{логическое значение}	включить изменение размера левой ручки (по умолчанию false)

Данные расписания

Ключ	Тип	Описание
заголовок	нить	Название строки расписания
субтитры	нить	Описание строки расписания
расписание	объект[]	запланировать строку массива

Данные расписания в объекте

Ключ	Тип	Описание
начинать	нить	ХЧ:ii
конец	нить	ХЧ:ii
текст	нить	Название бара
данные	объект	привязать данные

Методы обратного вызова

onChange (узел: элемент, данные: объект)

обратный вызов при изменении расписания

onInitRow (узел: элемент, данные: объект)

инициализировать данные

onClick (узел: элемент, данные: объект)

обратный вызов при нажатии панели

onAppendRow (узел: элемент, данные: объект)

при добавлении обратного вызова строки расписания

onSppendSchedule (узел: элемент, данные: объект)

при добавлении обратного вызова в панель расписания

onScheduleClick (узел: элемент, время: строка, данные: объект)

обратный вызов строки расписания по клику

Методы

получить данные строки

 var data = $("#schedule").timeSchedule('timelineData');

получить данные расписания

 var data = $("#schedule").timeSchedule('scheduleData');

очистить все данные

 $("#schedule").timeSchedule('resetData');

очистить все данные и строку

 $("#schedule").timeSchedule('resetRowData');

добавить строку

 $("#schedule").timeSchedule('addRow', timeline, {
    title : 'Title Area',
    schedule:[
        {
            start:'09:00',
            end:'12:00',
            text:'Text Area',
            data:{
            }
        }
    ]
});

добавить данные

 $("#schedule").timeSchedule('addSchedule', timeline, {
    start: start,
    end: end,
    text:'Insert Schedule',
    data:{}
});

настройка переключателя

 $("#schedule").timeSchedule('setDraggable', true or false);

 $("#schedule").timeSchedule('setResizable', true or false);

Для развития

запустить синхронизацию браузера с сервером

 npm run serve