Basic Schedule / Calendar Plugin With jQuery - Weekly Scheduler
File Size: | 8.73 KB |
---|---|
Views Total: | 21120 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Weekly Scheduler is a tiny and easy-to-use jQuery plugin that helps you render a customizable weekly schedule / calendar with event handlers called after selection and removal.
How to use it:
1. Create a placeholder element for the weekly schedule.
<div id="mySchedule"> </div>
2. Load jQuery library and the Weekly Scheduler plugin's script at the end of your html document.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.weekly-schedule-plugin.min.js"></script>
3. The JavaScript to render a default weekly schedule inside the DIV container you just created.
$('#mySchedule').weekly_schedule();
4. Config the weekly schedule by pass the following options to the weekly_schedule()
function:
$('#mySchedule').weekly_schedule({ // Days displayed days: ["sun", "mon", "tue", "wed", "thu", "fri", "sat"], // Hours displyed hours: "7:00AM-10:00PM", // Font used in the component fontFamily: "Montserrat", // Font colot used in the component fontColor: "black", // Font weight used in the component fontWeight: "100", // Font size used in the component fontSize: "0.8em", // Background color when hovered hoverColor: "#727bad", // Background color when selected selectionColor: "#9aa7ee", // Background color of headers headerBackgroundColor: "transparent" });
5. Callback functions.
$('#mySchedule').weekly_schedule({ // handler called after selection onSelected: function(){}, // handler called after removal onRemoved: function(){} });
6. Events.
$('.schedule').on('selectionmade', function() { console.log("Selection Made"); }).on('selectionremoved', function() { console.log("Selection Removed"); });
7. Get the selected hours.
$('#mySchedule').weekly_schedule("getSelectedHour");
This awesome jQuery plugin is developed by shonihei. For more Advanced Usages, please check the demo page or visit the official website.