3.1.7 • Published 3 years ago

jq.schedule v3.1.7

Weekly downloads
17
License
MIT
Repository
github
Last release
3 years ago

jq.Schedule

npm version Build Status License: MIT

npm.io

jquery and html schedule calendar

  • Drag and Drop Support
  • Resize Schedule
  • Ajax Get Data

install

package

npm i jq.schedule --save

Demo

Try Demo

How to use

append head css

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

insert body

<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>

Options

Paramaters

KeyValueDescription
classNamejq-scheduleadd elemnt class(default jq.schedule)
startTime07:00schedule start time(HH:ii)
endTime21:00schedule end time(HH:ii)
widthTime600cell timestamp example 10 minutes
timeLineY60height(px)
verticalScrollbar20scrollbar (px)
timeLineBorder2border(top and bottom)
bundleMoveWidth6width to move all schedules to the right of the clicked time line cell
rows{object}schedule data
draggable{boolean}enable draggable(default true)
resizable{boolean}enable resizable(default true)
resizableLeft{boolean}enable left handle resizable(default false)

Schedule Data

KeyTypeDescription
titlestringSchedule Row Title
subtitlestringSchedule Row Description
scheduleobject[]schedule row of array

Schedule Data in Object

KeyTypeDescription
startstringHH:ii
endstringHH:ii
textstringBar Title
dataobjectbind data

Callback Methods

onChange(node: Element, data: Object)

on change schedule bar callback

onInitRow(node: Element, data: Object)

initialize data

onClick(node: Element, data: Object)

on click bar callback

onAppendRow(node: Element, data: Object)

on add schedule row callback

onSppendSchedule(node: Element, data: Object)

on add schedule bar callback

onScheduleClick(node: Element, time: string, data: Object)

on click schedule row callback

Methods

get row data

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

get schedule data

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

clear all data

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

clear all data and row

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

add row

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

add data

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

switch setting

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

For Development

run server browser-sync

npm run serve
3.1.7

3 years ago

3.1.6

3 years ago

3.1.5

4 years ago

3.1.3

4 years ago

3.1.2

4 years ago

3.1.4

4 years ago

3.1.1

4 years ago

3.1.0

4 years ago

3.0.2

4 years ago

3.0.1

4 years ago

3.0.0

4 years ago

2.4.0

4 years ago

2.3.1

4 years ago

2.3.0

4 years ago

2.2.2

4 years ago

2.2.1

4 years ago

2.2.0

4 years ago

2.1.1

4 years ago

2.1.0

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.0

4 years ago

1.0.1

4 years ago