Schedule Appointments In A Week View - Scheduler
File Size: | 13.2 KB |
---|---|
Views Total: | 12119 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.