TimeTable.js

About

JavaScript (ES2015) library for creating time table.
Requires jQuery 1.9.1+, CreateJS 1.0.0.

Supporting Browser

• Chrome

Demo

Introdoction
Demo

How to Use

1. Load TimeTable.js, TimeTable.css, and jQuery in html.

   <link rel="stylesheet" href="./TimeTable.css"/>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
   <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
   <script src="./TimeTable.js"></script>

2. Add division and class where you want to create Time Table.

   <div id="timetable"></div>

3. Create object to draw in TimeTable.js

   var Object = new TimeTable({
       // Beginning Time[Necessary]
       startTime: "10:00",
       // Ending Time[Necessary]
       endTime: "15:00",
       // Time to divide(minute)[Necessary]
       divTime: "15",
       // Time Table Data[Necessary]
       shift: {
           "1" : {
             "Sir Isaac Newton": {
                 "1" : "10:00-12:00",
                 "2" : "13:00-14:00"
             }
           },
           "2" : {
               "Galileo Galilei": {
                   "3" : "11:00-12:45"
               }
           }
       },
       // Other options
       option: {
           // Default value: "NAME"
           firstColumnCaption: "Scholar"
           // Display Total Time
           worktime: true,
           // Bar Color
           // Able to apply till 10 colors
           bgcolor: ["#00ffff","#ff0000"],
           // Selectbox for Name Column[Necessary]
           // selectBox index and shift index should be same
           //{index :  name, : index: name,,..}
           // Give random if shift index was not in selectBox index
           selectBox: {
               "1": "Sir Isaac Newton",
               "2": "Galileo Galilei",
               "3": "Mr.Smith"
           },
           // Set false if you want the rows to be static i.e. as defined in your shift object
           deleteRows: true,
           // Set true when using TimeTable inside of BootStrap class row
           useBootstrap: false,
       }
   });

4. Create Instance

   // Set Object as class parameter
   var instance = new TimeTable(Object);

5. Start create TimeTable

   // Parameter is the selector where Time Table append
   instance.init("#timetable");

6. Please refer sample of index.html

Author

yn1323

License

TimeTable.js is licensed under MIT