jQuery GraspSchedule.js

Download

jquery.graspSchedule.js-master.zip

How to use

Load jQuery JavaScript library and the jQuery graspSchedule.js script on your web page/application.

<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.
        }
    ];
var events = [ //"events" is list for events which have only one time.
        {
            date: "2014/05/10 16:00",
            title: "tweeted at this time."
        },
        {
            date: "2014/05/10 17:00",
            title: "You can use media. <br><img src='http://wepia.biz/wlogo.png'/>",
            css:{height:"302px"}
            //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']
        }
    }