node package manager

daily-time-scheduler

Daily-Time-Scheduler

How to use it:

  1. Include the needed jQuery and jQuery UI on the html page.
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet"href="jquery-ui.css">
  1. Include the jQuery schedule plugin's stylesheet and JavaScript after jQuery library.
<script src="jq.scheduler.js"></script>
<link rel="stylesheet" href="style.css">
  1. Render a basic time schedule with custom events.
jQuery("#schedule").timeSchedule({
  rows : {
    '1' : {
      title : 'Title Area',
      schedule:[{
        start:'09:00',
        end:'12:00',
        text:'Text Area',
        data:{}
      },{
        start:'11:00',
        end:'14:00',
        text:'Text Area',
        data:{}
      }]
    },},
});
  1. Customization options.
// scheduled events 
rows: {},
 
// schedule start time(HH:ii) 
startTime: "07:00",
 
// schedule end time(HH:ii) 
endTime: "21:00", 
 
// width(px) 
widthTimeX: 25,
 
// cell timestamp example 30 minutes 
widthTime: 60 * 30, 
 
// height(px) 
timeLineY: 60,   
 
// options for time slots 
timeLineBorder: 1,
timeBorder: 1,   // border width 
timeLinePaddingTop: 0,
timeLinePaddingBottom: 0,
headTimeBorder: 1, // time border width  
 
// data width 
dataWidth: 160, 
  1. Events
init_data: null,
change: null,
click: null,
append: null,
time_click: null,
debug: ""      // debug selecter 

Stuff used to make this: