Rewrote web calendar UI to have bootstrap interface. Also has go-to-date function - issue #109

RIGS/templates/RIGS/calendar.html

@@ -37,17 +37,8 @@
                         // options apply to basicDay and agendaDay views
                     }
                 },
-                buttonText:{
+                header:false,
-                    today:    'Today',
+
-                    month:    'Month',
-                    week:     'Week',
-                    day:      'Day'
-                },
-                header:{
-                    left:   'title',
-                    center: '',
-                    right:  'today prev,next month,agendaWeek,agendaDay'
-                },
                 events: function(start_moment, end_moment, timezone, callback) {
                     
                     $.ajax({
@@ -62,10 +53,11 @@
                             var colours = 
                             $(doc).each(function() {
                                 thisEvent = [];
-                                colours = {'Provisional': 'orange',
+                                colours = {'Provisional': '#f0ad4e',
-                                    'Confirmed': 'green' ,
+                                    'Confirmed': '#5cb85c' ,
-                                    'Booked': 'green' ,
+                                    'Booked': '#5cb85c' ,
-                                    'Cancelled': 'grey' 
+                                    'Cancelled': 'grey' ,
+                                    'non-rig': '#5bc0de'
                                 };
 
                                 thisEvent['start'] = $(this).attr('start_date');
@@ -84,7 +76,11 @@
 
                                 thisEvent['title'] = $(this).attr('title');
                                 
-                                thisEvent['color'] = colours[$(this).attr('status')];
+                                if($(this).attr('is_rig')==true || $(this).attr('status') == "Cancelled"){
+                                    thisEvent['color'] = colours[$(this).attr('status')];
+                                }else{
+                                    thisEvent['color'] = colours['non-rig'];
+                                }
 
                                 thisEvent['url'] = $(this).attr('url');
                                 
@@ -93,6 +89,69 @@
                             callback(events);
                         }
                     });
+                },
+
+                viewRender: function(view, element){
+                    // Set the title of the view
+                    $('#calendar-header').text(view.title);
+
+                    // Enable/Disable "Today" button as required
+                    if(moment().isBetween(view.intervalStart, view.intervalEnd)){
+                        //Today is within the current view
+                        $('#today-button').prop('disabled', true);
+                    }else{
+                        $('#today-button').prop('disabled', false);
+                    }
+
+                    // Set active view select button
+                    switch(view.name){
+                        case 'month':
+                            $('#month-button').addClass('active');
+                            $('#week-button').removeClass('active');
+                            $('#day-button').removeClass('active');
+                            break;
+
+                        case 'agendaWeek':
+                            $('#month-button').removeClass('active');
+                            $('#week-button').addClass('active');
+                            $('#day-button').removeClass('active');
+                            break;
+
+                        case 'agendaDay':
+                            $('#month-button').removeClass('active');
+                            $('#week-button').removeClass('active');
+                            $('#day-button').addClass('active');
+                            break;
+                    }
+
+                }
+            });
+          
+            // set some button listeners
+
+            $('#next-button').click(function(){ $('#calendar').fullCalendar('next') });
+            $('#prev-button').click(function(){ $('#calendar').fullCalendar('prev') });
+            $('#today-button').click(function(){ $('#calendar').fullCalendar('today') });
+
+            $('#month-button').click(function(){ $('#calendar').fullCalendar('changeView','month') });
+            $('#week-button').click(function(){ $('#calendar').fullCalendar('changeView','agendaWeek') });
+            $('#day-button').click(function(){ $('#calendar').fullCalendar('changeView','agendaDay') });
+
+            $('#go-to-date-input').change(function(){
+                if( moment($('#go-to-date-input').val()).isValid() ){
+                    $('#go-to-date-button').prop('disabled', false);
+                }else{
+                    $('#go-to-date-button').prop('disabled', true);
+                }
+
+            });
+
+            $('#go-to-date-button').click(function(){
+                day = moment($('#go-to-date-input').val()) ;
+                if(day.isValid()){
+                    $('#calendar').fullCalendar( 'gotoDate', day);
+                }else{
+                    alert('Invalid Date');
                 }
             });
 
@@ -102,10 +161,43 @@
 {% endblock %}
 
 {% block content %}
+
     <div class="row">
-        <div style="col-sm-12">
+        
-            <div id='calendar'>
+        <div class="col-sm-12">
+            <div class="pull-left">
+                <span id="calendar-header" class="h2"></span>
+            </div>
+
+            <div class="form-inline pull-right btn-page">
+                <div class="input-group">
+                  <input type="date" class="form-control" id="go-to-date-input" placeholder="Go to date...">
+                  <span class="input-group-btn">
+                    <button class="btn btn-default" id="go-to-date-button" type="button" disabled>Go!</button>
+                  </span>
+                </div>
+
+                <div class="btn-group">
+                  <button type="button" class="btn btn-primary" id="today-button">Today</button>
+                </div>
+
+                <div class="btn-group">
+                  <button type="button" class="btn btn-default" id="prev-button"><span class="glyphicon glyphicon-chevron-left"></span></button>
+                  <button type="button" class="btn btn-default" id="next-button"><span class="glyphicon glyphicon-chevron-right"></span></button>
+                </div>
+
+                <div class="btn-group">
+                  <button type="button" class="btn btn-default" id="month-button">Month</button>
+                  <button type="button" class="btn btn-default" id="week-button">Week</button>
+                  <button type="button" class="btn btn-default" id="day-button">Day</button>
+                </div>
+              
             </div>
         </div>
     </div>
+    <div class="row">
+        <div class="col-sm-12">
+            <div id='calendar'>
+            </div>
+        </div>
 {% endblock %}