Business Hours plugin for jQuery – Demos and Documentation

Plugin jquery.businessHours

This plugin can be useful to show and manage business working days & hours.

By default


                var businessHoursManager = $("#businessHoursContainer").businessHours();

                $("#btnSerialize").click(function() {
                    // use: businessHoursManager.serialize() to get serialized business hours in JSON
                    $("textarea#businessHoursOutput").val(JSON.stringify(businessHoursManager.serialize()));
                });

Init widget from JSON object


                $("#businessHoursWidget").businessHours({
                    operationTime: /* array of JSON objects */
                });

Template customization


            $("#businessHoursContainer2").businessHours({
                checkedColorClass: 'workingBusinssDay',
                uncheckedColorClass: 'dayOff',
                dayTmpl: '' +
                         '' +
                         ''
            });

Using bootstrap, font-awesome and timepicker

Ok, let's try to do more attractive widget by using font-awesome icons, bootstrap stylesheets and jquery timepicker plugin.


                // don't forget to include required libs & styles
                // http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js
                // http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
                // http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css

                // //cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.2.17/jquery.timepicker.min.js
                // //cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.2.17/jquery.timepicker.min.css

                $("#businessHoursContainer3").businessHours({
                    postInit:function(){
                        $('.operationTimeFrom, .operationTimeTill').timepicker({
                            'timeFormat': 'H:i',
                            'step': 15
                            });
                    },
                    dayTmpl:'' +
                        '' +
                        '' +
                        '' +
                        '' +
                        '' +
                        ''
                });