<style type='text/css'>
    #cal_contain {
        display:block;
        width:100%;
    }
    #cal_dates,#cal_grid,#cal_inst {
        float:left;
        margin-left:4px;
        margin-right:6px;
        /*border:1px solid black;*/
    }
    #cal_grid{
    }
    #cal_dates,#cal_inst{
        margin-top:50px;
        width:25%;
    }
    #cal_inst p {
        margin:0;
    }
    #cal_table{
        text-align:center;
    }
    .c_row td div.clickable {
        cursor:pointer;
        display:block;
        width:100%;
        height:100%;
    }
    .cal_link{
        cursor:pointer;
    }
    .selected{
        background-color:#000;
        color:#eee;
    }
</style>

<script language="javascript">
    function getcurrentdates(){
        var s = document.getElementById('s_date');
        var e = document.getElementById('e_date');
        var s_d = s.value.split("/");
        var e_d = e.value.split("/");
        var d = new Array();
        d['s_mon'] = s_d[0] - 1;
        d['s_day'] = s_d[1];
        d['s_year'] = s_d[2];
        d['e_mon'] = e_d[0] - 1;
        d['e_day'] = e_d[1];
        d['e_year'] = e_d[2];
        return d;
    }
    var init = 1;
    function changedates(month,day,year){
        var d = getcurrentdates();
        var clicked_date = new Date();
        var s_date = new Date();
        var e_date = new Date();
        var s = document.getElementById('s_date');
        var e = document.getElementById('e_date');
        clicked_date.setFullYear(year,month,day);
        s_date.setFullYear(d['s_year'],d['s_mon'],d['s_day']);
        e_date.setFullYear(d['e_year'],d['e_mon'],d['e_day']);
        
        var newmonth = clicked_date.getMonth() + 1;
        var newyear = clicked_date.getFullYear();
        var newday = clicked_date.getDate();
        
        if (init % 2 == 1){
            s.value = newmonth + '/' + newday + '/' + newyear;
            e.value = newmonth + '/' + newday + '/' + newyear;
            createcal(newmonth-1,newyear);
        }
        else{
            //check if dates are the same. if they are, compare to the clicked date. if not, change the start/end date depending on where the click was
            //click before changes start date, click after changes end date. if they are already different, clicked_date is set to both s and e
            if(s_date > clicked_date){
                s.value = newmonth + '/' + newday + '/' + newyear;
                createcal(newmonth-1,newyear);
            }
            else if(e_date < clicked_date){
                e.value = newmonth + '/' + newday + '/' + newyear;
                createcal(newmonth-1,newyear);
            }
            else{//it equals both
                return;
            }
        }
        init++;
    }
    function updatecal(dir,m,y){
        var year = y;
        var newmonth = m;
        switch(dir){
            case 1:
                if(m == 11){
                    newmonth = 0;
                    year++;
                }
                else{
                    newmonth++;
                }
                break;

            default:
                if(m == 0){
                    newmonth = 11;
                    year--;
                }
                else{
                    newmonth--;
                }
                break;
        }
        createcal(newmonth,year);
    }
    function createcal(month,year,today){
        //get current set dates
        var d = getcurrentdates();
        var s_date = new Date();
        var e_date = new Date();
        s_date.setTime(0);
        e_date.setTime(0);
        s_date.setFullYear(d['s_year'],d['s_mon'],d['s_day']);
        e_date.setFullYear(d['e_year'],d['e_mon'],d['e_day']);
        //clear cal
        for(i=1;i<42;i++){
            var box = document.getElementById('c'+i);
            box.innerHTML = '';
            box.onclick = '';
            box.className = '';
        }
        var firstday = getfirst(month,year);
        var numdays = getnumdays(month,year);
        var months = new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
        document.getElementById('cal_month').innerHTML = "<span title='previous month' class='cal_link' onclick='updatecal(-1,"+month+","+year+");'>&lt;</span> " + months[month] + " " + year + " <span title='next month' class='cal_link' onclick='updatecal(1,"+month+","+year+");'>&gt;</span>";
        var f = 0;
        var date_test = new Date();
        date_test.setTime(0);
        for (i=firstday;i<42;i++){
            if(f<=numdays){
                f++;
                box = document.getElementById('c'+i);
                box.innerHTML = "<div class='clickable' onclick='changedates("+month+","+f+","+year+");'>"+f+"</div>";
                /*box.onclick = function() {
                    changedates(month,f,year);
                }*/
                date_test.setFullYear(year,month,f);
                if(e_date >= date_test && date_test >= s_date){
                    box.className = 'selected';
                }
            }
        }
    }
    function getfirst(month,year){
        var firstday = new Date();
        firstday.setFullYear(year);
        firstday.setMonth(month);
        firstday.setDate(1);
        return firstday.getDay() + 1; //returns 1 for sun - 7 for sat (after the plus 1
    }
    function getnumdays(month,year){
        var day = new Date();
        day.setFullYear(year);
        day.setMonth(month+1);
        day.setDate(-1);
        return day.getDate();
    }
    function c(){
        var today = new Date();
        var month = today.getMonth(); //remember months are 0-11
        var year = today.getFullYear();
        var date = today.getDate();
        createcal(month,year,date);
    }
</script>

<div id="cal_contain">
    <div id='cal_dates'>
        From: <input disabled size='10' type='text' name='s_date' id='s_date' value='{% if object %}{{ object.start_date|date:"n/j/Y" }}{% else %}{% now "n/j/Y" %}{% endif %}' /><br />
        To: &nbsp; &nbsp; <input disabled size='10' type='text' name='e_date' id='e_date' value='{% if object %}{{ object.end_date|date:"n/j/Y" }}{% else %}{% now "n/j/Y" %}{% endif %}' />
    </div>
    <div id='cal_grid'>
        <table id='cal_table'>
            <tr id='cal_nav'>
               <td colspan='7' id='cal_month'>&lt; {% now "M Y" %} &gt;</td>
            </tr>
            <tr id='cal_head'>
                <td>Sun</td>
                <td>Mon</td>
                <td>Tue</td>
                <td>Wed</td>
                <td>Thu</td>
                <td>Fri</td>
                <td>Sat</td>
            </tr>
            <tr id='cal_row1' class='c_row'>
                <td id='c1'></td>
                <td id='c2'></td>
                <td id='c3'></td>
                <td id='c4'></td>
                <td id='c5'></td>
                <td id='c6'></td>
                <td id='c7'></td>
            </tr>
            <tr id='cal_row2' class='c_row'>
                <td id='c8'></td>
                <td id='c9'></td>
                <td id='c10'></td>
                <td id='c11'></td>
                <td id='c12'></td>
                <td id='c13'></td>
                <td id='c14'></td>
            </tr>
            <tr id='cal_row3' class='c_row'>
                <td id='c15'></td>
                <td id='c16'></td>
                <td id='c17'></td>
                <td id='c18'></td>
                <td id='c19'></td>
                <td id='c20'></td>
                <td id='c21'></td>
            </tr>
            <tr id='cal_row4' class='c_row'>
                <td id='c22'></td>
                <td id='c23'></td>
                <td id='c24'></td>
                <td id='c25'></td>
                <td id='c26'></td>
                <td id='c27'></td>
                <td id='c28'></td>
            </tr>
            <tr id='cal_row5' class='c_row'>
                <td id='c29'></td>
                <td id='c30'></td>
                <td id='c31'></td>
                <td id='c32'></td>
                <td id='c33'></td>
                <td id='c34'></td>
                <td id='c35'></td>
            </tr>
            <tr id='cal_row6' class='c_row'>
                <td id='c36'></td>
                <td id='c37'></td>
                <td id='c38'></td>
                <td id='c39'></td>
                <td id='c40'></td>
                <td id='c41'></td>
                <td id='c42'></td>
            </tr>
        </table>
    </div>
    <div id='cal_inst'>
        <p>Click a date to choose a single date.
        Click a second date to choose a range.
        A third click will act as a first click.</p>
    </div>
</div>