PyRIGS/RIGS/templates/calendar.html

{% extends 'base_rigs.html' %}
{% load static %}

{% block title %}Calendar{% endblock %}

{% block css %}
<link href="{% static "css/fullcalendar.css" %}" rel='stylesheet' />
<link href="{% static "css/fullcalendar.print.css" %}" rel='stylesheet' media='print' />
{% endblock %}

{% block js %}
    <script src="{% static 'js/moment.js' %}"></script>
    <script src="{% static 'js/fullcalendar.js' %}"></script>
    <script>
        function getUrlVars() {
            var vars = {};
            var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
            vars[key] = value;
            });
            return vars;
        }

        $(document).ready(function() {

            viewToUrl = {
                'agendaWeek':'week',
                'agendaDay':'day',
                'month':'month'
            }
            viewFromUrl = {
                'week':'agendaWeek',
                'day':'agendaDay',
                'month':'month'
            }

            $('#calendar').fullCalendar({
                editable: false,
                eventLimit: true, // allow "more" link when too many events
                firstDay: 1,
                aspectRatio: 1.5,
                timeFormat: 'HH:mm',
                views: {
                    basic: {
                        // options apply to basicWeek and basicDay views
                    },
                    agenda: {
                        // options apply to agendaWeek and agendaDay views
                    },
                    week: {
                        columnFormat:'ddd D/M'
                    },
                    day: {
                        // options apply to basicDay and agendaDay views
                    }
                },
                header:false,

                events: function(start_moment, end_moment, timezone, callback) {

                    $.ajax({
                        url: '/api/event',
                        dataType: 'json',
                        data: {
                            start: moment(start_moment).format("YYYY-MM-DD[T]HH:mm:ss"),
                            end: moment(end_moment).format("YYYY-MM-DD[T]HH:mm:ss")
                        },
                        success: function(doc) {
                            var events = [];
                            colours = {'Provisional': '#f0ad4e',
                                'Confirmed': '#5cb85c' ,
                                'Booked': '#5cb85c' ,
                                'Cancelled': 'grey' ,
                                'non-rig': '#5bc0de'
                            };
                            $(doc).each(function() {
                                end = $(this).attr('latest')
                                if(end.indexOf("T") < 0){ //If latest does not contain a time
                                   end = moment(end).add(1, 'days') //End date is non-inclusive, so add a day
                                }

                                thisEvent = {
                                    'start': $(this).attr('earliest'),
                                    'end': end,
                                    'className': 'modal-href',
                                    'title': $(this).attr('title'),
                                    'url': $(this).attr('url')
                                }

                                if($(this).attr('is_rig')==true || $(this).attr('status') == "Cancelled"){
                                    thisEvent['color'] = colours[$(this).attr('status')];
                                }else{
                                    thisEvent['color'] = colours['non-rig'];
                                }

                                events.push(thisEvent);
                            });
                            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;
                    }
                    history.replaceState(null,null,'{% url 'web_calendar' %}'+viewToUrl[view.name]+'/'+view.intervalStart.format('YYYY-MM-DD')+'/');
                }



            });

            // 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');
                }
            });


            // Go to the initial settings, if they're valid
            view = viewFromUrl['{{view}}'];
            $('#calendar').fullCalendar( 'changeView', view);

            day = moment('{{date}}');
            if(day.isValid()){
                $('#calendar').fullCalendar( 'gotoDate', day);
            }else{
                console.log('Supplied date is invalid - using default')
            }

        });

    </script>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-sm-12">
            <div class="pull-left">
                <span id="calendar-header" class="h2"></span>
            </div>
            <div class="form-inline float-right btn-page my-3">
                <div class="input-group mx-2">
                  <input type="date" class="form-control" id="go-to-date-input" placeholder="Go to date...">
                  <span class="input-group-append">
                    <button class="btn btn-success" id="go-to-date-button" type="button" disabled>Go!</button>
                  </span>
                </div>
                <div class="btn-group mx-2">
                  <button type="button" class="btn btn-primary" id="today-button">Today</button>
                </div>
                <div class="btn-group mx-2">
                  <button type="button" class="btn btn-secondary" id="prev-button"><span class="fas fa-chevron-left"></span></button>
                  <button type="button" class="btn btn-secondary" id="next-button"><span class="fas fa-chevron-right"></span></button>
                </div>
                <div class="btn-group ml-2">
                  <button type="button" class="btn btn-light" id="month-button">Month</button>
                  <button type="button" class="btn btn-light" id="week-button">Week</button>
                  <button type="button" class="btn btn-light" id="day-button">Day</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div id='calendar'></div>
        </div>
    </div>
{% endblock %}