Time interval scheduler is a javascript plugin to select and unselect the hours for entire week.
We have developed a kid mobile app which has a functionality to setup Do not Disturb (DnD) hours for kid. Kid keep playing games, texting messages and talking to friends on their mobile at time of study. Parent want to make phone to be smart to stop all these activity in study time. We want a small good looking ui for parents to define the DnD hours for kid mobile phone and mobile app will take these input from server and apply on phone.
It was one use case but you can use this plugin as per your need to collect the user input for hours.
How to use?
User can click each hour individually or drag the mouse to select/unselect the hours. User can select all days hour in one go by selecting the all days hours.
How it work?
It create the whole ui dynamically in the given widget container element (as first parameter).
var hs = new HourSelector( '#widget-container-element', {}, {});
It takes three parameters:
First parameter : {String|Object} Widget container id or object
Second parameter : {Hash object} (optional) Previous hour selection settings
Third parameter : {Hash object} (optional) Plugin options. { paramName : "hour_setting" }
It create a hidden input element for each hour button. By default hidden element name is “hour_setting”, if you want you can customize the the name of input hidden element by passing a value for “paramName”. All these hidden values get submitted on form submit.
Initialize the widget:
var hs = new HourSelector( '#widget-container-element');
Provide previous selected hours values
It is a json object of each day has all hours with value of 1(True) or 0 (False).
var selectedHours = {
all : { 0 : 1, 1 : 1, 2 : 1, 3 : 1, 4 : 0, 5 : 0, 6 : 0, 7 : 0, 8 : 0, 9 : 0, 10 : 0, 11 : 0, 12 : 0, 13 : 0, 14 : 0, 15 : 0, 16 : 0, 17 : 0, 18 : 0, 19 : 0, 20 : 0, 21 : 0, 22 : 0, 23 : 0 },
monday : { 0 : 0, 1 : 0, 2 : 0, 3 : 0, 4 : 0, 5 : 0, 6 : 0, 7 : 0, 8 : 0, 9 : 0, 10 : 0, 11 : 0, 12 : 0, 13 : 0, 14 : 0, 15 : 0, 16 : 0, 17 : 0, 18 : 0, 19 : 0, 20 : 0, 21 : 0, 22 : 0, 23 : 0 },
tuesday : { 0 : 0, 1 : 0, 2 : 0, 3 : 0, 4 : 0, 5 : 0, 6 : 0, 7 : 0, 8 : 0, 9 : 0, 10 : 0, 11 : 0, 12 : 0, 13 : 0, 14 : 0, 15 : 0, 16 : 0, 17 : 0, 18 : 0, 19 : 0, 20 : 0, 21 : 0, 22 : 0, 23 : 0 },
wednesday : { 0 : 0, 1 : 0, 2 : 0, 3 : 0, 4 : 0, 5 : 0, 6 : 0, 7 : 0, 8 : 0, 9 : 0, 10 : 0, 11 : 0, 12 : 0, 13 : 0, 14 : 0, 15 : 0, 16 : 0, 17 : 0, 18 : 0, 19 : 0, 20 : 0, 21 : 0, 22 : 0, 23 : 0 },
thursday : { 0 : 0, 1 : 0, 2 : 0, 3 : 0, 4 : 0, 5 : 0, 6 : 0, 7 : 0, 8 : 0, 9 : 0, 10 : 0, 11 : 0, 12 : 0, 13 : 0, 14 : 0, 15 : 0, 16 : 0, 17 : 0, 18 : 0, 19 : 0, 20 : 0, 21 : 0, 22 : 0, 23 : 0 },
friday : { 0 : 0, 1 : 0, 2 : 0, 3 : 0, 4 : 0, 5 : 0, 6 : 0, 7 : 0, 8 : 0, 9 : 0, 10 : 0, 11 : 0, 12 : 0, 13 : 0, 14 : 0, 15 : 0, 16 : 0, 17 : 0, 18 : 0, 19 : 0, 20 : 0, 21 : 0, 22 : 0, 23 : 0 },
saturday : { 0 : 0, 1 : 0, 2 : 0, 3 : 0, 4 : 0, 5 : 0, 6 : 0, 7 : 0, 8 : 0, 9 : 0, 10 : 0, 11 : 0, 12 : 0, 13 : 0, 14 : 0, 15 : 0, 16 : 0, 17 : 0, 18 : 0, 19 : 0, 20 : 0, 21 : 0, 22 : 0, 23 : 0 },
sunday : { 0 : 0, 1 : 0, 2 : 0, 3 : 0, 4 : 0, 5 : 0, 6 : 0, 7 : 0, 8 : 0, 9 : 0, 10 : 0, 11 : 0, 12 : 0, 13 : 0, 14 : 0, 15 : 0, 16 : 0, 17 : 0, 18 : 0, 19 : 0, 20 : 0, 21 : 0, 22 : 0, 23 : 0 }
}
var hs = new HourSelector( this, selectedHours, {} );
Provide custom parameter name for hidden input element
var hs = new HourSelector( this, {}, { paramName : "hour_setting"} );
See it in action:
You can get the plugin from gtihub :
https://github.com/Amitesh/Time-interval-scheduler
I love to hear your feedback and feature request to improve it. Let me know, if you want some custom changes. I will try to help you.