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()){
                    document.getElementById('go-to-date-button').classList.remove('disabled');
                    document.getElementById('go-to-date-button').href = "?month=" + moment($('#go-to-date-input').val()).format("YYYY-MM");
                } else{
                    document.getElementById('go-to-date-button').classList.add('disabled');
                }
            });
        });
</script>
{% endblock %}

{% block css %}
<style>
.week {
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-flow: dense;
  grid-gap: 2px 10px;
  border: 1px solid black;
  height: 8em;
  align-content: start;
}

.day {
  display:contents;
}
.day-label {
  grid-row-start: 1;
  text-align: right;
  margin:0;
  font-size: 1em !important;
  height: 1em;
}

.week-day, .day-label, .event {
  padding: 4px 10px;
}

.event {
  background-color: #CCC;
  font-size: 0.8em !important;
  white-space: nowrap;
}

.event-end {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.event-start {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}


[data-span="1"] { grid-column-end: span 1; }
[data-span="2"] { grid-column-end: span 2; }
[data-span="3"] { grid-column-end: span 3; }
[data-span="4"] { grid-column-end: span 4; }
[data-span="5"] { grid-column-end: span 5; }
[data-span="6"] { grid-column-end: span 6; }
[data-span="7"] { grid-column-end: span 7; }

.day > a {
  color: inherit !important;
  text-decoration: inherit !important;
}

</style>
{% endblock %}

{% block content %}
<div class="row justify-content-center mb-1">
    <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="form-inline col-4">
        <div class="input-group">
            <input type="date" id="go-to-date-input" placeholder="Go to date..." class="form-control">
            <span class="input-group-append">
            <a class="btn btn-success" id="go-to-date-button">Go!</a>
            </span>
        </div>
    </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="week" style="height: 2em;">
  <div class="week-day">Monday</div>
  <div class="week-day">Tuesday</div>
  <div class="week-day">Wednesday</div>
  <div class="week-day">Thursday</div>
  <div class="week-day">Friday</div>
  <div class="week-day">Saturday</div>
  <div class="week-day">Sunday</div>
</div>
{% for week in weeks %}
<div class="week">
    {% for day in week %}
    {% if day.0 != 0 %}
        <div class="day" id="{{day.0}}">
            <h3 class="day-label text-muted">{{day.0}}</h3>
            {{ day.2|safe }}
        </div>
    {% else %}
    <div class="day"><span style="grid-row-start: 1;">&nbsp;<span></div>
    {% endif %}
    {% endfor %}
</div>
{% endfor %}
{% endblock %}