FEATURE: Add to google calendar link on list view (#12)

FEATURE: Add to google calendar link on list view (#12)

diff --git a/assets/javascripts/initializers/discourse-calendar.js.es6 b/assets/javascripts/initializers/discourse-calendar.js.es6
index c70312b..f497fdd 100644
--- a/assets/javascripts/initializers/discourse-calendar.js.es6
+++ b/assets/javascripts/initializers/discourse-calendar.js.es6
@@ -108,7 +108,10 @@ function initializeDiscourseCalendar(api) {
         center: "title",
         right: "month,basicWeek,listNextYear"
       },
-      datesRender: info => ($calendarTitle.innerText = info.view.title)
+      datesRender: info => {
+        _insertAddToCalendarLinks(info);
+        $calendarTitle.innerText = info.view.title;
+      }
     });
   }
 
@@ -405,6 +408,35 @@ function initializeDiscourseCalendar(api) {
       $(".discourse-calendar-timezone-wrap").text(timezone);
     }
   }
+
+  function _insertAddToCalendarLinks(info) {
+    if (info.view.type !== "listNextYear") return;
+
+    let eventSegments = info.view.eventRenderer.segs;
+    for (const event of eventSegments) {
+      _insertAddToCalendarLinkForEvent(event);
+    }
+  }
+
+  function _insertAddToCalendarLinkForEvent(event) {
+    const container = event.el.querySelector(".fc-list-item-title");
+    const startDate = _formatDateForGoogleApi(event.start);
+    const endDate = _formatDateForGoogleApi(event.end);
+    const link = document.createElement("a");
+    const title = I18n.t("discourse_calendar.add_to_calendar");
+    link.title = title;
+    link.appendChild(document.createTextNode(title));
+    link.href = `http://www.google.com/calendar/event?action=TEMPLATE&text=${encodeURIComponent(
+      container.childNodes[0].innerHTML
+    )}&dates=${startDate}/${endDate}`;
+    link.target = "_blank";
+    link.classList.add("fc-list-item-add-to-calendar");
+    container.appendChild(link);
+  }
+
+  function _formatDateForGoogleApi(date) {
+    return date.toISOString().replace(/-|:|\.\d\d\d/g, "");
+  }
 }
 
 export default {
diff --git a/assets/stylesheets/common/discourse-calendar.scss b/assets/stylesheets/common/discourse-calendar.scss
index 0f1caf2..ecb4824 100644
--- a/assets/stylesheets/common/discourse-calendar.scss
+++ b/assets/stylesheets/common/discourse-calendar.scss
@@ -103,6 +103,10 @@
       margin-left: 0;
     }
   }
+  .fc-list-item-add-to-calendar {
+    color: $tertiary;
+    font-size: $font-down-1;
+  }
 }
 
 .mention .d-icon {
diff --git a/assets/stylesheets/desktop/discourse-calendar.scss b/assets/stylesheets/desktop/discourse-calendar.scss
new file mode 100644
index 0000000..9270843
--- /dev/null
+++ b/assets/stylesheets/desktop/discourse-calendar.scss
@@ -0,0 +1,6 @@
+.calendar {
+  .fc-list-item-add-to-calendar {
+    float: right;
+    margin-right: 5px;
+  }
+}
diff --git a/assets/stylesheets/mobile/discourse-calendar.scss b/assets/stylesheets/mobile/discourse-calendar.scss
new file mode 100644
index 0000000..e85ac8d
--- /dev/null
+++ b/assets/stylesheets/mobile/discourse-calendar.scss
@@ -0,0 +1,5 @@
+.calendar {
+  .fc-list-item-add-to-calendar {
+    display: block;
+  }
+}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 4ddf089..06f22e9 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -3,6 +3,7 @@ en:
     discourse_calendar:
       on_holiday: "On Holiday"
       holiday: "Holiday"
+      add_to_calendar: "Add to calendar"
       timezone:
         title: "Timezone"
         instructions: "Your current timezone is %{timezone}."
diff --git a/plugin.rb b/plugin.rb
index e4c9c6e..87e84b8 100644
--- a/plugin.rb
+++ b/plugin.rb
@@ -12,6 +12,8 @@ enabled_site_setting :calendar_enabled
 
 register_asset "stylesheets/vendor/fullcalendar.min.css"
 register_asset "stylesheets/common/discourse-calendar.scss"
+register_asset "stylesheets/mobile/discourse-calendar.scss", :mobile
+register_asset "stylesheets/desktop/discourse-calendar.scss", :desktop
 
 PLUGIN_NAME ||= "calendar"
 DATA_PREFIX ||= "data-calendar-"

GitHub sha: 13cbdb53