Create A Basic Weekly Schedule with Hour Selector Using jQuery

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.