week planner

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/sunny/jquery-ui.css">
<div id="container">
    <div id="scheduler"></div>
</div>

CSS

#container{margin:20px;}
.blended{width:50px; border:0 none; background:transparent; margin:0; padding:0 0 0 15px; font-size:14px !important;}
label.inline{width:90px; display:block; float:left; padding-top:2px;}
.ui-slider{margin:15px 0 20px; width:540px; float:left;}
.addNewInterval{float:right; height:26px; width:26px !important; margin-top:8px;}

JavaScript

(function($) {  
    $.widget("ui.timeslider", {
        options: {
            animate: false,
            days: ["monday","tuesday","wednesday","thursday","friday","saturday","sunday"],
            distance: 0,
            max: 1440,
            min: 0,
            orientation: "horizontal",
            range: true,
            slide: function(event,ui){
                function formatTime(time){
                    var hours = parseInt(time / 60 % 24);
                    var minutes = parseInt(time % 60);
                    minutes = minutes + "";
                    if (minutes.length == 1) {
                        minutes = "0" + minutes;
                    }
                    return hours + ":" + minutes;
                }
                var startTime = formatTime(ui.values[0]);
                var endTime = formatTime(ui.values[1]);

                var selector = "#"+this.id;
                $(selector + "-time1").val(formatTime(ui.values[0]));
                $(selector + "-time2").val(formatTime(ui.values[1]));
            },
            step: 5,
            value: 0,
            values: [0, 0]
        },
        
        _create: function(){

            var self = this,
                o = this.options,
                dayslength = o.days.length;
            o.timeslider = this;

            function getTime(time){
                var times = time.split(':');
                time = (times[0] * 60) + parseInt(times[1]);
                return time;
            }

            for(var i=0; i < dayslength; i++){
                self.element.append(self._sliderhtml(o.days[i]));
                $( "#" + o.days[i] ).slider(o);
                $( "#" + o.days[i] + "-time1" ).bind("change",function(){
                    var slider = "#" + this.id.substr(0,this.id.length - 6);
                    var newval = getTime($("#"+this.id).val());
                    if(!isNaN(newval)) $(slider).slider("values" , 0 , newval);
                });
               ...