<p>Example of this <a href="https://github.com/jekuer/add-to-calendar-button">Add to Calendar Button</a></p>
<div class="atcb">
<script type="application/ld+json">
{
"event": {
"@context": "https://schema.org",
"@type": "Event",
"name": "Add the title of your event",
"description": "A nice description does not hurt",
"startDate": "02-21-2022T10:13",
"endDate": "03-24-2022T17:57",
"location": "Somewhere over the rainbow"
},
"label": "Add to Calendar",
"options": [
"Apple",
"Google",
"iCal",
"Microsoft365",
"Outlook.com",
"Yahoo"
],
"timeZone": "Europe/Berlin",
"timeZoneOffset": "+01:00",
"trigger": "click",
"iCalFileName": "Reminder-Event"
}
</script>
</div>
@import "https://cdn.jsdelivr.net/npm/add-to-calendar-button/assets/css/atcb.min.css";
html {
font: 110%/1.4 system-ui;
}
import { atcb_init } from "https://cdn.skypack.dev/add-to-calendar-button";
atcb_init();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.