Schedule Appointments In A Week View - Scheduler

File Size: 13.2 KB
Views Total: 10562
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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.


4. Define an array of preselected appointment times.

  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.

  accuracy: 1

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

  footer: true

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

  multiple: false

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

  disabled: true

9. Callback functions used to handle the selected appointments.

  // 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

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']

  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]}

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