week planner

by W F

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:30px;
    border:0 none;
    background:transparent;
    margin:0; 
    padding:0 0 0 0;
    font-size:14px !important;
    clear: right
}
label.inline{
    font-weight: bold;
    width:90px;
    padding-bottom: 5px;
    line-height: 3rem !important;
}
.ui-slider{
    margin:8px 0 20px;
    width:240px;
    clear: both
}
.addNewInterval{
    float:right;
    height:26px;
    width:26px !important;
    margin-bottom: 40px;
    clear: both
}

JavaScript

(function($) {
    var options = {
            animate: false,
            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]),
                    endTime = formatTime(ui.values[1]),
                    day = $(this).data('day'),
                    i =  $(this).data('i');
                $("#" + day + "-start-" + i).val(formatTime(ui.values[0]));
                $("#" + day + "-end-" + i).val(formatTime(ui.values[1]));
            },
            step: 5,
            value: 0,
            values: [0, 0]               
        },
        newSliderHtml = function(day, index){
            return '<input type="text" name="task" class="task" style="display:block; float:left; width:80px; font-size:9px; height: 1rem;"><span style="clear:both;"></span><input type="text" name="'+day+'-start-'+ index +'" id="'+day+'-start-'+ index +'" value="0:00" class="blended" disabled="disabled"> - '+
            '<input type="text" name="'+day+'-end-'+ index +'" id="'+day+'-end-'+ index +'" value="0:00" class="blended" disabled="disabled">&nbsp; '+                        
            '<div id="'+day+'-slider-'+ index +'" data-i="'+ index +'" data-day="'+ day+'" class="slider"></div>';
        }
    
        
    $.widget("ui.timeslider", {
        options: $.extend(options, {
            days: ["monday","tuesday","wednesday","thursday","friday","saturday","sunday"],
        }),
        
        _create: function(){

            var self =...