Scheduler Js is a jQuery plugin that lets you display a schedule, moving the time picker within the schedule to find a time when everyone is free.

jquery time picker, jquery time picker 12/24 hour format, simple jquery timepicker, jquery timepicker options, javascript time picker

Dependencies

• jQuery
• Hogan.js (from twitter)

How to make use of it:

1. Load the jQuery library and jQuery Scheduler.js on 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 template engine on the page.

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

3. Create a container for the schedule.

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

4. Add your events in JavaScript as follows.

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. Display a table 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': []

create responsive schedules with time picker, Schedulerjs Plugin/Github

See Demo And Download

Official Website(magnusjt): Click Here

This superior jQuery/javascript plugin is developed by magnusjt. For extra advanced usage, please go to the official website.