JSON & Canvas Based Time Table Generator - jQuery TimeTable.js

A jQuery plugin helps you create a dynamic time table (time sheet) containing canvas based bars and click-triggered tooltips to visualize scheduled tasks and opening/working times.

The plugin also allows you to draw custom time bars via drag and drop.

How to use it:

1. Load the necessary jQuery and createjs libraries in your html document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>

2. Load the timetable.js script in the document.

<script src="js/TimeTable.js"></script>

3. Create a container in which you want to render the time table.

<div id="example"></div>

4. Prepare your JSON data as these.

let shiftObj = {
    "1" : {
        "Maria Anders": [
            {"1" : "10:00-12:00"},
            {"2" : "13:00-14:00"},
            {"9" : "17:00-20:00"},
        ]
    },
    "2" : {
        "Jason Paige": [
            {"3" : "11:00-12:45"},
            {"5" : "14:00-19:30"},
        ]
    },
    "500" : {
        "Roland Mendel": [
            {"8" : "13:00-19:00"}
        ]
    },
    "3" : {
        "Helen Bennett": [
            {"1" : "10:00-12:00"},
            {"2" : "13:00-14:00"},
            {"9" : "17:00-20:00"},
        ]
    },
    "4" : {
        "Mrs.Smith": [
            {"8" : "10:00-13:30"},
            {"7" : "14:00-17:30"},
        ]
    },
    "5" : {
        "Francisco Chang": [
            {"1" : "12:00-15:30"}
        ]
    },
    "6" : {
        "Yoshi Tannamuri": [
            {"0" : "15:00-22:30"}
        ]
    },
    "7" : {
        "Giovanni Rovelli": [
            {"9" : "15:00-18:30"}
        ]
    },
    "8" : {
        "John Doe": [
            {"1" : "10:00-12:00"},
            {"2" : "13:00-14:00"},
            {"3" : "17:00-20:30"},
        ]
    },
    "9" : {
        "MR.JSON": [
            {"2" : "09:00-12:59"},
            {"4" : "15:00-15:20"},
            {"7" : "17:00-17:30"},
        ]
    },
};

5. Initialize the time table with several options.

var instance = new TimeTable({

    // Beginning Time
    startTime: "09:00",

    // Ending Time
    endTime: "20:00",

    // Time to divide(minute)
    divTime: "30",

    // Time Table
    shift: shiftObj,

    // Other options
    option: {

      // workTime include time not displaying
      workTime: true,

      // bg color
      bgcolor: ["#00FFFF"],

      // {index :  name, : index: name,,..}
      // selectBox index and shift index should be same
      // Give randome if shift index was not in selectBox index
      selectBox: {
        "2" : "Jason Paige",
        "3" : "Mr.Jason",
        "25" : "Mrs.Jason"
      }
    }
    
});

6. Generate a time table inside the DIV container you just created.

instance.init("#example");

Changelog:

2018-11-16

• Convert Returning Value to JSON

2018-11-13

• Added Bootstrap option

2018-07-29

• Fixed issue of changing color & get data

2018-06-20

• Enable to refresh canvas during resize

---

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