Simple jQuery Schedules & Events Plugin - graspSchedule.js

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.

How to use it:

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

2. Create your custom schedules & events in a JSON file. The data structure should be like this:

{
  "schedules": [
    {
      "end": "2014/05/10 3:00",
      "start": "2014/05/10 1:40",
      "title": "Schedule 1"
    },
    {
      "end": "2014/05/10 2:41",
      "start": "2014/05/10 2:30",
      "title": "Schedule 2",
      "css":{"background-color":"#f39c12"}
    },
    {
      "end": "2014/05/10 17:41",
      "start": "2014/05/10 10:30",
      "title": "Schedule 3"
    },
    {
      "end": "2014/05/10 20:41",
      "start": "2014/05/10 15:30",
      "title": "Schedule 4"
    },
    {
      "end": "2014/05/10 22:41",
      "start": "2014/05/10 21:30",
      "title": "Schedule 5"
    },
    {
      "end": "2014/05/10 16:30",
      "start": "2014/05/10 15:55",
      "title": "Schedule 6"
    },
    {
      "end": "2014/05/10 19:55",
      "start": "2014/05/10 18:30",
      "title": "Schedule 7"
    }

  ],
  "events": [
    {
      "date": "2014/05/10 16:00",
      "title": "Event 1"
    },
    {
      "date": "2014/05/10 17:00",
      "title": "Event 2",
      "css":{"height":"302px"}
    },
    {
      "date": "2014/05/10 10:00",
      "title": "Event 3"
    },
    {
      "date": "2014/05/10 2:40",
      "title": "Event 4"
    },
    {
      "date": "2014/05/10 14:30",
      "title": "Event 5"
    },
    {
      "date": "2014/05/10 20:30",
      "title": "Event 6"
    },
    {
      "date": "2014/05/10 2:50",
      "title": "Event 7"
    },
    {
      "date": "2014/05/10 15:40",
      "title": "Event 8"
    },
    {
      "date": "2014/05/10 2:35",
      "title": "Event 9"
    }

  ],
  "options":{
    "time":true,
    "timeFormat":"HH:mm"
  }
}

3. Create an empty container element for the plugin.

<div id="demo"></div>

4. Get data from a JSON file and initialize the plugin with default options.

$.getJSON("date.json", function(data2){
  $('#demo').graspSchedule(data2);
});

5. Available settings.

schedules:schedules,
events:events,
options:{
  classnames: { //If you use this plugin many time in a page, you have to change these.
    schedule: "schedule",
    event: "event"
  },
  css:{ 
    event:{
      height:"50px"
    },
    schedule:{
      height:"70px"
    },
    zIndexStart:0,
    marginTop:"0px",
    marginLeft:"0px",
  },
  time:true,
  timeFormat:'yyyy/MM/dd(ddd)HH:mm',
  daysFormat:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  }
}

6. Add custom CSS to style the schedules & events.

.schedule,
.schedule2 {
  width: 400px;
  background-color: #c0392b;
  border: #ecf0f1 solid 1px;
  padding: 3px;
}

.schedule:hover,
.schedule2:hover { background-color: #e74c3c; }

.event,
.event2 {
  width: 350px;
  background-color: #2980b9;
  padding: 3px;
}

.event:hover,
.event2:hover { background-color: #3498db; }

Changelog:

2019-02-03

• changed the static "height" value from 10 to 5.

v0.0.2 (2014-11-28)

• bug fix.

---

This awesome jQuery plugin is developed by Tak0002. For more Advanced Usages, please check the demo page or visit the official website.