Reimplemented calendar mostly working

Multi day alignment puzzle is pretty hard...

RIGS/models.py

@@ -401,10 +401,6 @@ class BaseEvent(models.Model, RevisionMixin):
             errdict['end_time'] = ['Unless you\'ve invented time travel, the event can\'t finish before it has started.']
         return errdict
 
-    @property
-    def get_html_url(self):
-        return f'<a href="{self.get_edit_url()}"><span class="badge badge-{self.color}">{self}</span></a>'
-
     def __str__(self):
         return f"{self.display_id}: {self.name}"
 
@@ -503,7 +499,7 @@ class Event(BaseEvent):
 
     @property
     def authorised(self):
-        if self.internal:
+        if self.internal and hasattr(self, 'authorisation'):
             return self.authorisation.amount == self.total
         else:
             return bool(self.purchase_order)

RIGS/templates/calendar.html

@@ -1,59 +1,66 @@
 {% extends 'base_rigs.html' %}
 {% load static %}
 
-{% block title %}Calendar{% endblock %}
+{% 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 {
-  width: 98%;
-  margin: auto;
-  font-size: 13px;
-}
-
 .calendar tr, .calendar td {
-  border: 1px solid black;
+  border: 1px solid grey;
 }
-
-.calendar th {
-  padding: 10px;
-  text-align: center;
-  font-size: 18px;
-}
-
-.calendar td {
-  width: 200px;
-  height: 150px;
-  padding: 20px 0px 0px 5px;
-}
-
-.month {
-  font-size: 25px;
-}
-
 .date {
-  font-size: 16px;
+    float: right;
 }
-
+.days {
-ul {
+    height: 20vh;
-  height: 100%;
-  padding: 0px 5px 0px 20px;
 }
-
+td {
-a {
+    width: calc(100% / 7);
-  color: #17a2b8;
 }
-.badge-purple, .bg-purple {
+th {
-    background-color: #800080 !important;
+    margin: 0.5em;
+    border-bottom: 3px solid grey;
 }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="clearfix">
+<div class="row justify-content-center">
-	<a class="btn btn-info left" href="{% url 'web_calendar' %}?{{ prev_month }}"> Previous Month </a>
+    <a class="btn btn-info col-2" href="{% url 'web_calendar' %}?{{ prev_month }}"><span class="fas fa-chevron-left"></span> Previous Month</a>
-	<a class="btn btn-info right" href="{% url 'web_calendar' %}?{{ next_month }}"> Next 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 %}

RIGS/utils.py

@@ -3,6 +3,24 @@ import calendar
 from calendar import HTMLCalendar
 from RIGS.models import BaseEvent, Event, Subhire
 
+def get_html(events, day):
+    d = ''
+    for event in events:
+            # Open shared stuff
+            d += f'<a href="{event.get_edit_url()}" class="modal-href"><span class="badge badge-{event.color} w-100 text-left"'
+            if event.start_date.day != event.end_date.day:
+                if day == event.start_date.day:
+                    d += f'style="border-top-right-radius: 0; border-bottom-right-radius: 0;">{event}'
+                elif day == event.end_date.day:
+                    d += f'style="border-top-left-radius: 0; border-bottom-left-radius: 0;">&nbsp;'
+                else:
+                    d += f'style="border-radius: 0;">&nbsp;'
+            else:
+                d += f'{event}'
+            # Close shared stuff
+            d += "</span></a>"
+    return d
+
 class Calendar(HTMLCalendar):
     def __init__(self, year=None, month=None):
         self.year = year
@@ -12,16 +30,11 @@ class Calendar(HTMLCalendar):
     # formats a day as a td
     # filter events by day
     def formatday(self, day, events, subhires):
-        events_per_day = events.filter(start_date__day=day)
+        events_per_day = events.order_by("start_date").filter(start_date__day__lte=day, end_date__day__gte=day)
-        subhires_per_day = subhires.filter(start_date__day=day)
+        subhires_per_day = subhires.order_by("start_date").filter(start_date__day__lte=day, end_date__day__gte=day)
-        d = ''
+        d = get_html(events_per_day, day) + get_html(subhires_per_day, day)
-        for event in events_per_day:
-            d += f'{event.get_html_url}<br>'
-        for subhire in subhires_per_day:
-            d += f'{subhire.get_html_url}<br>'
-
         if day != 0:
-            return f"<td><span class='date'>{day}</span><ul> {d} </ul></td>"
+            return f"<td valign='top' class='days'><span class='date'>{day}</span><br>{d}</td>"
         return '<td></td>'
 
     # formats a week as a tr
@@ -37,8 +50,7 @@ class Calendar(HTMLCalendar):
         events = Event.objects.filter(start_date__year=self.year, start_date__month=self.month)
         subhires = Subhire.objects.filter(start_date__year=self.year, start_date__month=self.month)
 
-        cal = f'<table border="0" cellpadding="0" cellspacing="0" class="calendar">\n'
+        cal = f'<table cellpadding="0" cellspacing="0" class="calendar">\n'
-        cal += f'{self.formatmonthname(self.year, self.month, withyear=withyear)}\n'
         cal += f'{self.formatweekheader()}\n'
         for week in self.monthdays2calendar(self.year, self.month):
             cal += f'{self.formatweek(week, events, subhires)}\n'

RIGS/views/rigboard.py

@@ -47,7 +47,6 @@ class WebCalendar(generic.ListView):
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
-
         # use today's date for the calendar
         d = utils.get_date(self.request.GET.get('month', None))
         context['prev_month'] = utils.prev_month(d)
@@ -59,6 +58,7 @@ class WebCalendar(generic.ListView):
         # Call the formatmonth method, which returns our calendar as a table
         html_cal = cal.formatmonth(withyear=True)
         context['calendar'] = mark_safe(html_cal)
+        context['page_title'] = d.strftime("%B %Y")
         return context
 
 

gulpfile.js

@@ -24,7 +24,6 @@ function fonts(done) {
 function styles(done) {
     const bs_select = ["bootstrap-select.css", "ajax-bootstrap-select.css"]
     return gulp.src(['pipeline/source_assets/scss/**/*.scss',
-                    'node_modules/fullcalendar/main.css',
                     'node_modules/bootstrap-select/dist/css/bootstrap-select.css',
                     'node_modules/ajax-bootstrap-select/dist/css/ajax-bootstrap-select.css',
                     'node_modules/easymde/dist/easymde.min.css'
@@ -59,7 +58,6 @@ function scripts() {
                     'node_modules/html5sortable/dist/html5sortable.min.js',
                     'node_modules/clipboard/dist/clipboard.min.js',
                     'node_modules/moment/moment.js',
-                    'node_modules/fullcalendar/main.js',
                     'node_modules/bootstrap-select/dist/js/bootstrap-select.js',
                     'node_modules/ajax-bootstrap-select/dist/js/ajax-bootstrap-select.js',
                     'node_modules/easymde/dist/easymde.min.js',

pipeline/source_assets/scss/screen.scss

@@ -281,3 +281,7 @@ html.embedded {
 .bootstrap-select, button.btn.dropdown-toggle.bs-placeholder.btn-light {
     padding-right: 1rem !important;
 }
+
+.badge-purple, .bg-purple {
+    background-color: #800080 !important;
+}