Create A Basic Weekly Schedule with Hour Selector Using jQuery
File Size: | 96.7 KB |
---|---|
Views Total: | 47062 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
This is a jQuery plugin which provides a simple way to generate a weekly schedule with 7 columns for each day of the week and various rows for each hour of the day. It comes with a custom event that is triggered when a hour selection is made.
Basic usage:
1. Download and include the jQuery Day Schedule Selector plugin after jQuery library.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="src/index.js"></script>
2. Create an Html element that will be served as the container for your weekly schedule.
<div id="weekly-schedule"></div>
3. The JavaScript to generate a basic weekly schedule into the container you just created.
$("#weekly-schedule").dayScheduleSelector({ /* OPTIONS HERE */ });
4. Override the default CSS styles to fit your needs.
.schedule-rows td { width: 80px; height: 30px; margin: 3px; padding: 5px; background-color: #3498DB; cursor: pointer; } .schedule-rows td:first-child { background-color: transparent; text-align: right; position: relative; top: -12px; } .schedule-rows td[data-selected], .schedule-rows td[data-selecting] { background-color: #E74C3C; } .schedule-rows td[data-disabled] { opacity: 0.55; }
5. Default options.
// Sun - Sat days : [0, 1, 2, 3, 4, 5, 6], // HH:mm format startTime : '08:00', // HH:mm format endTime : '20:00', // minutes interval : 30, stringDays : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], // Custom template template : '<div class="day-schedule-selector">' + '<table class="schedule-table">' + '<thead class="schedule-header"></thead>' + '<tbody class="schedule-rows"></tbody>' + '</table>' + '<div>'
6. Serialize data.
$("#weekly-schedule").data('artsy.dayScheduleSelector').deserialize({ '0': [['09:30', '11:00'], ['13:00', '16:30']] });
Change log:
2015-09-12
- Add specs for stringDays option
This awesome jQuery plugin is developed by artsy. For more Advanced Usages, please check the demo page or visit the official website.