replace calendar library

Author: compwron

app/assets/stylesheets/application.scss

@@ -1,5 +1,4 @@
 // links to stylesheets inside node_modules
-@use "add2calendar/css/add2calendar";
 @use "bootstrap/scss/bootstrap.scss" with (
   $primary: #00447c
 );

app/javascript/src/add_to_calendar_button.js

@@ -1,21 +1,29 @@
 /* global $ */
 
-const Add2Calendar = require('add2calendar')
+import 'add-to-calendar-button'
 
 function createCalendarEvents () {
   const calendarButtons = document.querySelectorAll('div.cal-btn')
 
   for (const calendarButton of calendarButtons) {
-    const calendarEvent = new Add2Calendar({
-      title: calendarButton.dataset.title,
-      start: calendarButton.dataset.start,
-      end: calendarButton.dataset.end,
-      description: calendarButton.dataset.title,
-      isAllDay: true
-    })
+    // Create the add-to-calendar-button web component
+    const button = document.createElement('add-to-calendar-button')
 
-    calendarEvent.createWidget(`#${calendarButton.id}`)
-    calendarButton.title = calendarButton.dataset.tooltip
+    // Set attributes from data attributes
+    button.setAttribute('name', calendarButton.dataset.title)
+    button.setAttribute('startDate', calendarButton.dataset.start)
+    button.setAttribute('endDate', calendarButton.dataset.end)
+    button.setAttribute('description', calendarButton.dataset.title)
+    button.setAttribute('options', "'Apple','Google','iCal','Microsoft365','Outlook.com','Yahoo'")
+    button.setAttribute('timeZone', 'currentBrowser')
+    button.setAttribute('lightMode', 'bodyScheme')
+
+    // Set tooltip
+    button.title = calendarButton.dataset.tooltip
+
+    // Replace the div content with the button
+    calendarButton.innerHTML = ''
+    calendarButton.appendChild(button)
   }
 }
 

package-lock.json

@@ -22,7 +22,7 @@
     "@rails/activestorage": "^8.1.0",
     "@rails/ujs": "^7.1.502",
     "@stimulus-components/rails-nested-form": "^5.0.0",
-    "add2calendar": "^1.1.8",
+    "add-to-calendar-button": "^2.12.12",
     "bootstrap": "5.3.6",
     "bootstrap-datepicker": "^1.10.1",
     "bootstrap-scss": "^5.3.4",