Merge pull request #104 from abe-101/add-cal-view

add calendar to view
abe-101 · Jan 15, 2024 · 7363dc4 · 7363dc4
2 parents 8fe54b7 + 516fdf9
commit 7363dc4
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 47 deletions.
diff --git a/my_hebrew_dates/hebcal/utils.py b/my_hebrew_dates/hebcal/utils.py
@@ -36,8 +36,9 @@ def generate_ical(
             ).digest()
             uid = engDate.isoformat() + urlsafe_b64encode(eventHash).decode("ascii") + "@myhebrewdates.com"
             event = Event()
-            event.add("summary", hebrewDate.event_type + " " + hebrewDate.name)
-            base_description = hebrewDate.get_hebrew_date() + "\n\nhttps://myhebrewdates.com"
+            title = f"{hebrewDate.get_hebrew_date()} | {hebrewDate.event_type} {hebrewDate.name}"
+            event.add("summary", title)
+            base_description = title + "\n\nhttps://myhebrewdates.com"
             # if "Google-Calendar-Importer" in user_agent:
             # if not (user_agent == "" or "iOS" in user_agent or "macOS" in user_agent):
             #     base_description += (
@@ -48,7 +49,7 @@ def generate_ical(
             #     )
             event.add("description", base_description)
             html_description = (
-                f"{hebrewDate.get_hebrew_date()}<br>"
+                f"{title}<br>"
                 f"Delivered to you by: <a href='https://myhebrewdates.com'>"  # noqa E231
                 "MyHebrewDates.com</a><br>"
                 f"<img src='https://myhebrewdates.com/calendars/serve-image/{modelCalendar.uuid}/{hebrewDate.pk}' "  # noqa E231

diff --git a/my_hebrew_dates/hebcal/views.py b/my_hebrew_dates/hebcal/views.py
@@ -1,9 +1,8 @@
 import base64
 import logging
-from datetime import datetime, timedelta
+from datetime import timedelta
 from uuid import UUID
 
-import icalendar
 from django.contrib import messages
 from django.contrib.auth.mixins import LoginRequiredMixin
 from django.contrib.sites.models import Site
@@ -81,28 +80,28 @@ def get_context_data(self, **kwargs):
 
         # Add the domain_name to the context
         context["domain_name"] = Site.objects.get_current().domain
-        cal = icalendar.Calendar.from_ical(generate_ical(self.object))
-        # Get the current date
-        current_date = datetime.now().date()
-
-        # Calculate the date range for the events (from current date to one year from now)
-        one_year_from_now = current_date + timedelta(days=395)
-
-        events = []
-        for component in cal.walk():
-            if component.name == "VEVENT":
-                event = {
-                    "summary": component.get("summary"),
-                    "description": component.get("description")[:-54],
-                    "start": component.get("dtstart").dt,
-                    "end": component.get("dtend").dt,
-                }
-                if current_date <= event["start"] <= one_year_from_now:
-                    events.append(event)
-
-        # Sort events by start date and time
-        events.sort(key=lambda e: e["start"])
-        context["events"] = events
+        # cal = icalendar.Calendar.from_ical(generate_ical(self.object))
+        # # Get the current date
+        # current_date = datetime.now().date()
+
+        # # Calculate the date range for the events (from current date to one year from now)
+        # one_year_from_now = current_date + timedelta(days=395)
+
+        # events = []
+        # for component in cal.walk():
+        #     if component.name == "VEVENT":
+        #         event = {
+        #             "summary": component.get("summary"),
+        #             "description": component.get("description")[:-54],
+        #             "start": component.get("dtstart").dt,
+        #             "end": component.get("dtend").dt,
+        #         }
+        #         if current_date <= event["start"] <= one_year_from_now:
+        #             events.append(event)
+
+        # # Sort events by start date and time
+        # events.sort(key=lambda e: e["start"])
+        # context["events"] = events
         context["alarm_time"] = self.request.GET.get("alarm", "9")
 
         return context

diff --git a/my_hebrew_dates/templates/base.html b/my_hebrew_dates/templates/base.html
@@ -55,6 +55,10 @@
 
         gtag('config', 'G-MLL490GGCR');
       </script>
+      <!-- ICAL.js Library -->
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/ical.min.js" integrity="sha256-uotVKltUv5neKsIlZxrxUccba0PaptusFj6p+w8Sons=" crossorigin="anonymous"></script>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js" integrity="sha256-J37ZtjEw94oWBNZ9w/XC73raGXE9t10//XHJfKz2QCM=" crossorigin="anonymous"></script>
+      <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/index.global.min.js" integrity="sha256-io4G+JpruJtt8SoSUOgLQrhBj/YtQXFgIvkGzBxQAUQ=" crossorigin="anonymous"></script>
 
 
       {% endblock javascript %}

diff --git a/my_hebrew_dates/templates/hebcal/calendar_detail.html b/my_hebrew_dates/templates/hebcal/calendar_detail.html
@@ -61,28 +61,39 @@ <h5 class="card-title szCaps"><i class="bi bi-calendar-check-fill"></i> {{ calen
     </div>
   </div>
   <div class="card mb-4">
+    <div class="card-header">
+      <h5 class="card-title szCaps"><i class="bi bi-calendar-check-fill"></i> {{ calendar.name }}</h5>
+    </div>
 
     <div class="card-body">
-      <ul class="list-group">
-        {% for event in events %}
-        <li class="list-group-item">
-          <div class="row align-items-center">
-            <div class="col-1 text-center">
-              <span class="dot">&#11044;</span>
-            </div>
-            <div class="col-2 szWider">
-              <p class="mb-1 text-center" style="font-size: 1.25rem;"><strong>{{ event.start|date:"d" }}</strong></p>
-              <p class="mb-0 text-center">{{ event.start|date:"M" }}</p>
-            </div>
-            <div class="col">
-              <p class="mb-1"><strong>{{ event.summary }}</strong></p>
-              <p class="mb-0">{{ event.description }}</p>
-            </div>
-            <div class="col"></div> <!-- Empty column to occupy remaining space -->
-          </div>
-        </li>
-        {% endfor %}
-      </ul>
+        <div id='calendar'></div>
+    </div>
+
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            var calendarEl = document.getElementById('calendar');
+            var calendar = new FullCalendar.Calendar(calendarEl, {
+                themeSystem: 'bootstrap5',
+                headerToolbar: {
+                  left: 'prev,next today',
+                  center: 'title',
+                  right: 'dayGridMonth,timeGridWeek,listMonth,listYear'
+                },
+                dayMaxEvents: true,
+                initialView: 'listYear',
+                eventSources: [
+                    {
+                        url: "{% url 'hebcal:calendar_file' calendar.uuid %}",
+                        format: 'ics',
+                    },
+                ]
+                // Additional FullCalendar options can go here
+            });
+            calendar.render();
+        });
+    </script>
+
     </div>
   </div>
 </div>