Remote calendar link for external sync

com/ics_calendar.py

@@ -1,9 +1,11 @@
 from pathlib import Path
-from typing import final
 
 from dateutil.relativedelta import relativedelta
 from django.conf import settings
+from django.contrib.sites.models import Site
+from django.contrib.syndication.views import add_domain
 from django.db.models import F, QuerySet
+from django.http import HttpRequest
 from django.urls import reverse
 from django.utils import timezone
 from ical.calendar import Calendar
@@ -14,7 +16,14 @@ from com.models import NewsDate
 from core.models import User
 
 
-@final
+def as_absolute_url(url: str, request: HttpRequest | None = None) -> str:
+    return add_domain(
+        Site.objects.get_current(request=request),
+        url,
+        secure=request.is_secure() if request is not None else settings.HTTPS,
+    )
+
+
 class IcsCalendar:
     _CACHE_FOLDER: Path = settings.MEDIA_ROOT / "com" / "calendars"
     _INTERNAL_CALENDAR = _CACHE_FOLDER / "internal.ics"
@@ -58,7 +67,9 @@ class IcsCalendar:
                 summary=news_date.news_title,
                 start=news_date.start_date,
                 end=news_date.end_date,
-                url=reverse("com:news_detail", kwargs={"news_id": news_date.news.id}),
+                url=as_absolute_url(
+                    reverse("com:news_detail", kwargs={"news_id": news_date.news.id})
+                ),
             )
             calendar.events.append(event)
 

com/static/bundled/com/components/ics-calendar-index.ts

@@ -303,10 +303,36 @@ export class IcsCalendar extends inheritHtmlElement("div") {
     this.calendar = new Calendar(this.node, {
       plugins: [dayGridPlugin, iCalendarPlugin, listPlugin],
       locales: [frLocale, enLocale],
+      customButtons: {
+        getCalendarLink: {
+          text: gettext("Copy calendar link"),
+          click: async (event: Event) => {
+            const button = event.target as HTMLButtonElement;
+            button.classList.add("text-copy");
+            button.setAttribute(
+              "tooltip",
+              gettext("Calendar link copied to the clipboard"),
+            );
+            navigator.clipboard.writeText(
+              new URL(
+                await makeUrl(calendarCalendarInternal),
+                window.location.origin,
+              ).toString(),
+            );
+            setTimeout(() => {
+              button.classList.remove("text-copied");
+              button.classList.add("text-copied");
+              button.classList.remove("text-copy");
+              button.removeAttribute("tooltip");
+            }, 700);
+          },
+        },
+      },
       height: "auto",
       locale: this.locale,
       initialView: this.currentView(),
       headerToolbar: this.currentToolbar(),
+      footerToolbar: { start: "getCalendarLink" },
       eventSources: await this.getEventSources(),
       windowResize: () => {
         this.calendar.changeView(this.currentView());

com/static/com/components/ics-calendar.scss

@@ -98,4 +98,21 @@ ics-calendar {
       background: white;
     }
   }
+
+  .fc .fc-toolbar.fc-footer-toolbar {
+    margin-bottom: 0.5em;
+  }
+
+  button.text-copy,
+  button.text-copy:focus,
+  button.text-copy:hover {
+    background-color: green !important;
+    transition: 200ms linear;
+  }
+
+  button.text-copied,
+  button.text-copied:focus,
+  button.text-copied:hover {
+    transition: 200ms linear;
+  }
 }