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	计划开始时间(HH:ii)
结束时间	21:00	计划结束时间(HH:ii)
宽度时间	600	单元格时间戳示例 10 分钟
时间线Y	60	高度（像素）
垂直滚动条	20	滚动条（像素）
时间线边框	2	边框（顶部和底部）
束移动宽度	6	将所有计划移动到单击的时间线单元格右侧的宽度
行	{目的}	时间表数据
可拖动的	{布尔值}	启用可拖动（默认 true）
可调整大小	{布尔值}	启用可调整大小（默认 true）
可调整大小左	{布尔值}	启用左手柄可调整大小（默认 false）

时间表数据

钥匙	类型	描述
标题	细绳	明细表行标题
字幕	细绳	计划行描述
日程	目的[]	安排数组的行

安排对象中的数据

钥匙	类型	描述
开始	细绳	HH:ii
结尾	细绳	HH:ii
文本	细绳	栏标题
数据	目的	绑定数据

回调方法

onChange(节点：元素，数据：对象)

更改时间表栏回调

onInitRow（节点：元素，数据：对象）

初始化数据

onClick（节点：元素，数据：对象）

点击栏回调

onAppendRow（节点：元素，数据：对象）

添加计划行回调

onSpendSchedule（节点：元素，数据：对象）

添加日程栏回调

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