Basic Schedule / Calendar Plugin With jQuery - Weekly Scheduler

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

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

2. Load jQuery library and the Weekly Scheduler plugin's script at the end of your html document.

<script src="//"></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.


4. Config the weekly schedule by pass the following options to the weekly_schedule() function:


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


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


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