Entirely new concept

RIGS/templates/calendar.html

@@ -28,27 +28,70 @@
 
 {% block css %}
 <style>
-.calendar tr, .calendar td {
-  border: 1px solid grey;
+.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;
 }
-.date {
-    float: right;
+
+.day {
+  display:contents;
 }
-.days {
-    height: 20vh;
+.day-label {
+  grid-row-start: 1;
+  text-align: right;
+  margin:0;
+  font-size: 1em !important;
+  height: 1em;
 }
-td {
-    width: calc(100% / 7);
+
+.week-day, .day-label, .event {
+  padding: 4px 10px;
 }
-th {
-    margin: 0.5em;
-    border-bottom: 3px solid grey;
+
+.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;
+}
+
+.day:nth-child(1) > .event { grid-column-start: 1; }
+.day:nth-child(2) > .event { grid-column-start: 2; }
+.day:nth-child(3) > .event { grid-column-start: 3; }
+.day:nth-child(4) > .event { grid-column-start: 4; }
+
+[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; }
+
+a {
+  color: inherit !important;
+  text-decoration: inherit !important;
+}
+
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="row justify-content-center">
+<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="input-group col-4">
         <input type="date" id="go-to-date-input" placeholder="Go to date...">
@@ -60,7 +103,23 @@ th {
     <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 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 %}
+    <div class="day" id="{{day.0}}">
+        <h3 class="day-label text-muted">{% if day.0 != 0 %}{{day.0}}{% endif %}</h3>
+        {{ day.2|safe }}
+    </div>
+    {% endfor %}
+</div>
+{% endfor %}
 {% endblock %}