Calendar Link Demo

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calendar Link Example</title>
  <style>
    /* Add some basic styling */
    body {
      font-family: Arial, sans-serif;
    }
    #links {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Calendar Link Demo</h1>
  <form id="event-form">
    <label for="title">Title:</label>
    <input type="text" id="title" name="title" value="My birthday party"><br><br>
    <label for="description">Description:</label>
    <input type="text" id="description" name="description" value="Be there!"><br><br>
    <label for="start">Start:</label>
    <input type="datetime-local" id="start" name="start" value="2024-08-18T09:30">*<br><br>
    <label for="duration">Duration (hours):</label>
    <input type="number" id="duration" name="duration" value="3"><br><br>
  </form>
  <button id="generate-links">Generate Calendar Links</button>
  <p>
  * Note: Uses browser's timezone
  </p>
  <div id="links"></div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js"></script>
  <script>
    // Get the generate links button
    const generateLinksButton = document.getElementById('generate-links');
    const eventForm = document.getElementById('event-form');

    // https://www.npmjs.com/package/calendar-link
    const { google, outlook, office365, yahoo, ics } = calendarLink;

    // Add event listener to the button
    generateLinksButton.addEventListener('click', (e) => {
      e.preventDefault();
      // Get form values
      const title = eventForm.title.value;
      const description = eventForm.description.value;
      const start = new Date(eventForm.start.value).toUTCString();
      const duration = [parseInt(eventForm.duration.value), "hour"];

      // Create event object
      const event = {
        title,
        description,
        start,
        duration,
      };

      // Generate links
  ...