Last active
August 18, 2024 16:14
-
-
Save mark05e/112acd0f1680c3ce3741d482d8466cde to your computer and use it in GitHub Desktop.
Calendar Link Demo - https://jsfiddle.net/t586qyd7/2/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 | |
| const googleLink = google(event); | |
| const outlookLink = outlook(event); | |
| const office365Link = office365(event); | |
| const yahooLink = yahoo(event); | |
| const icsLink = ics(event); | |
| // Display links | |
| const linksDiv = document.getElementById('links'); | |
| linksDiv.innerHTML = ` | |
| <p><a href="${googleLink}" target="_blank">Google Calendar</a></p> | |
| <p><a href="${outlookLink}" target="_blank">Outlook</a></p> | |
| <p><a href="${office365Link}" target="_blank">Office 365</a></p> | |
| <p><a href="${yahooLink}" target="_blank">Yahoo Calendar</a></p> | |
| <p><a href="${icsLink}" download="event.ics">Download ICS File</a></p> | |
| `; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Demo Preview: https://jsfiddle.net/t586qyd7/2/