mzaila / jquery.graspschedule.js Goto Github PK

View Code? Open in Web Editor NEW

jQuery graspSchedule.js is a simple jQuery calendar plugin used to visualize complex schedules & events, a little similar to the timeline or event calendar.

License: MIT License

HTML 30.50% JavaScript 58.76% CSS 10.74%

jquery.graspschedule.js's Introduction

jquery.graspSchedule.js

jQuery graspSchedule.js is a simple jQuery calendar plugin used to visualize complex schedules & events loading from JSON data, a little similar to the timeline or event calendar. You can use it for Life-log application or webpage for time schedule.

Demo

See http://tak0002.github.io/jquery.graspSchedule.js/

How to use

Load jQuery and this plugin.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.graspSchedule.js"></script>

Create your custom schedules & events. The data structure should be like this:

var schedules = [ //"schedules" is list for events which have start and end.
    {
        end: "2014/05/10 3:00",
        start: "2014/05/10 1:40",
        title: "Meeting A"
    },
    {
        end: "2014/05/10 2:41",
        start: "2014/05/10 2:30",
        title: "Conference B <br>", //You can use html tags
        css:{backgroundColor:"#f39c12",height:"100px"}
        //You can use most of CSS properties.But only pixel is allow for height.
    }
];

Create an empty container element for the plugin.

<div id="schedule"></div>

Initialize the plugin.

$('#schedule').graspSchedule({
    schedules:schedules,
    events:events
});

Add custom CSS to style the schedules & events.

.schedule{
    position: absolute; 
    width: 400px;
    background-color: #c0392b;
    border: #ecf0f1 solid 1px;
    padding: 3px;
}
.event{
    position: absolute;
    margin-left: 40px;
    width: 350px;
    background-color: #2980b9;
    padding: 3px;
}

Available Options.

$('#schedule').graspSchedule({
    schedules:schedules,
    events:events,
    options:{ // You can change default setting. Not require.
        classnames: { //If you use this plugin many time in a page, you have to change these.
            schedule: "schedule",
            event: "event",
            time: "time"
        },
        css:{
            event:{
                height:"50px"
            },
            schedule:{
                height:"70px"
            },
            zIndexStart:0,
            marginTop:"0px",
            marginLeft:"0px",
        },
        time:true,//show time on left side
        insideTime:true,//show time inside
        timeFormat:'yyyy/MM/dd(ddd)HH:mm',
        daysFormat:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    }
}