jQuery Plugin To Create Responsive Schedules with Time Pickers - schedulerjs

schedulerjs is a jQuery plugin used to display names, appointments, scheduled events in a responsive schedule with time pickers.

How to use it:

1. Load jQuery library and the jQuery scheduler.js in the html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="path/to/scheduler.js"></script>
<link rel="stylesheet" href="src/scheduler.css">

2. Load the required Hogan.js templating engine in the page.

<script src="hogan.min.js"></script>

3. Create a container for the schedule.

<div id="scheduler"></div>

4. Add your events in the JavaScript as follow.

var list = [
{
    'name': 'Otto',
    'appointments': [
        {'start': '08:05', 'end': '09:00', 'title': 'Event 1'},
        {'start': '08:50', 'end': '10:10', 'title': 'Event 2'}
    ]
},
{
    'name': 'Thornton',
    'appointments': [
        {'start': '12:00', 'end': '13:30', 'title': 'Event 3'},
        {'start': '14:30', 'end': '15:30', 'title': 'Event 4'},
        {'start': '14:00', 'end': '14:30', 'title': 'Event 5'}
    ]
},
{
    'name': 'The Bird',
    'appointments': [
        {'start': '15:00', 'end': '18:30', 'title': 'Event 6'},
        {'start': '06:00', 'end': '14:30', 'title': 'Event 7'}
    ]
}
];

5. Render a schedule inside the container you just created.

var steps = [
  '08:05',
  '09:00',
  '10:00',
  '11:30',
  '12:05',
  '13:00',
  '14:00',
  '15:00',
  '16:00',
  '17:00'
];

$("#scheduler").schedulerjs({
  'list': list,
  'steps': steps
});

6. Default options.

'pixelsPerHour': 200,
'snapTo': 5,
'steps': ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
'headName': 'Names',
'onClickAppointment': function(){},
'list': []

Change logs:

2015-08-31

• Added ability to toggle time selector

2015-08-23

• Added ability to update list
• Switch back to minutes based time selector since pixel based broke when scrolling

2015-08-16

• Added functionality for setting the time selectors programmatically

---

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