Schedule Appointments In A Week View - Scheduler

A robust weekly scheduler plugin that makes it easier to schedule appointments (meetings, bookings, reservations, etc) in an HTML table based week view.

Features:

• Select a single or multiple appointment times with click/tap or mouse drag.
• Clicking the scheduler header will select the entire column.
• Supports multipe lanuages.
• Event handlers.

How to use it:

1. To use the scheduler, include the following JavaScript and CSS files on the page.

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

2. Create an empty table for the scheduler.

<table id="example"></table>

3. Call the plugin scheduler on the table element to generate a basic scheduler.

$('#example').scheduler();

4. Define an array of preselected appointment times.

$('#example').scheduler({
  data: {
    2: [0,1,2,3,4,5],
    3: [10,11,12,13],
    4: [10,11,12,13]
  }
});

5. Determine how many cells to generate per hour. Default: 1.

$('#example').scheduler({
  accuracy: 1
});

6. Determine whether to display the table footer. Default: true.

$('#example').scheduler({
  footer: true
});

7. Determine whether to clear the previous selection when a new appointment time is selected. Default: true.

$('#example').scheduler({
  multiple: false
});

8. Enable the read-only mode. Default: false.

$('#example').scheduler({
  disabled: true
});

9. Callback functions used to handle the selected appointments.

$('#example').scheduler({
  // parameter: selected
  onDragStart: $.noop,
  onDragMove: $.noop,
  onDragEnd: $.noop,
  onSelect: $.noop,
  onRender: $.noop
});

10. Set and get the scheduled appointments.

// set
$('#example').scheduler('val', {1: [1,2,3]});

// get
$('#example').scheduler('val');

11. Localize the plugin as follows:

$.fn.scheduler.locales['lanuage'] = {
  AM: 'Your String',
  PM: 'Your String',
  TIME_TITLE: 'Your String',
  WEEK_TITLE: 'Your String',
  WEEK_DAYS: ['Your String', 'Your String', 'Your String', 'Your String', 'Your String', 'Your String', 'Your String']
};

$('#example').scheduler({
  locale: 'language'
});

12. Parse & serialize your data.

// => '011100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000'
var data = {1: [1,2,3]};
var str = $.fn.scheduler.util.serialize(data);

// => {1: [1,2,3]}
$.fn.scheduler.util.parse(str);

---

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