@ateliee/jquery.schedule v1.0.0

jq.Schedule

jquery and html schedule calendar

javascript base time schedule plugin.

install

package

npm i @ateliee/jquery.schedule --save

Demo

Try Demo

How to use

append head css

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

insert body

<div id="schedule"></div>
<script type="text/javascript" src="./jquery.schedule/js/jq.schedule.js"></script>
<script type="text/javascript">
    $(function(){
        var $sc = jQuery("#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
            debug:"#debug",     // debug string output elements
            rows : {
                '0' : {
                    title : 'Title Area',
                    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:{
                            }
                        }
                    ]
                }
            },
            change: function(node,data){
                $("#logs").append($("<div>").text("change event:" + JSON.stringify(data)));
            },
            init_data: function(node,data){
                $("#logs").append($("<div>").text("init event:" + JSON.stringify(data)));
            },
            click: function(node,data){
                $("#logs").append($("<div>").text("click event:" + JSON.stringify(data)));
            },
            append: function(node,data){
                $("#logs").append($("<div>").text("append event:" + JSON.stringify(data)));
            },
            time_click: function(time,data){
                $("#logs").append($("<div>").text("time click event:" + JSON.stringify(data)));
            },
        });
    });
</script>

Options

Paramaters

Schedule Data

Methods

change(node: Element, data: Object)

on change schedule bar callback

init_data(node: Element, data: Object)

initialize data

click(node: Element, data: Object)

on click bar callback

append(node: Element, data: Object)

on add schedule bar callback

time_click(node: Element, data: Object)

on click schedule row callback