PyRIGS/RIGS/templates/calendar.html

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

{% block js %}
<script src="{% static 'js/moment.js' %}"></script>
<script>
    $(document).ready(function() {
            // set some button listeners
            $('#today-button').click(function(){ calendar.today(); });
            $('#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.gotoDate(day.format("YYYY-MM-DD"));
                } else{
                    alert('Invalid Date');
                }
            });
        });
</script>
{% endblock %}

{% block css %}
<style>
.calendar tr, .calendar td {
  border: 1px solid grey;
}
.date {
    float: right;
}
.days {
    height: 20vh;
}
td {
    width: calc(100% / 7);
}
th {
    margin: 0.5em;
    border-bottom: 3px solid grey;
}
</style>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <a class="btn btn-info col-2" href="{% url 'web_calendar' %}?{{ prev_month }}"><span class="fas fa-chevron-left"></span> Previous Month</a>
    <div class="input-group col-4">
        <input type="date" 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>
    <button type="button" class="btn btn-primary col-2" id="today-button">Today</button>
    <a class="btn btn-info mx-2 col-2" href="{% url 'web_calendar' %}?{{ next_month }}"><span class="fas fa-chevron-right"></span> Next Month</a>
</div>

<div class="table-responsive-md pt-2">
{{ calendar }}
</div>
{% endblock %}