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