A simple JS library that enables you to add an “add to calendar” button for your upcoming events.
This project was inspired by Eventbrite’s add to calendar feature (which should have been open sourced #justSayin).
Later, it was adjusted to look and behave more like AddToCalendar, which suddenly became a commercial tool, and very expensive too #justSayin.
Call ‘addToCalendar’ with your event info, pass in any optional parameters such as a class and/ or id and boom! Insert your add-to-calendar div wherever you’d like.
The only fields that are mandatory are:
var myCalendar = addToCalendar({
options: {
class: 'my-class',
// You can pass an ID. If you don't, one will be generated for you
id: 'my-id'
},
data: {
// Event title
title: 'Get on the front page of HN',
// Event start date
start: new Date('June 15, 2013 19:00'),
// Event timezone. Will convert the given time to that zone
timezone: America/Los_Angeles,
// Event duration (IN MINUTES)
duration: 120,
// You can also choose to set an end time
// If an end time is set, this will take precedence over duration
// end: new Date('June 15, 2013 23:00'),
// You can also choose to set 'all day'
// If this is set, this will override end time, duration and timezone
// allday:true,
// Event Address
address: 'The internet',
// Event Description
description: 'Get on the front page of HN, then prepare for world domination.'
}
});
document.querySelector('#place-where-I-want-this-calendar').appendChild(myCalendar);
Write your events data in several hidden HTML tags with the right classnames, and wrap them in a div. Then call ‘createCalendar’ with the outer div and boom! The calendar is appended to your wrapping div. The only fields that are mandatory are:
<div title="Add to Calendar" class="add-to-calendar">
<span class="start">12/18/2018 08:00 AM</span>
<span class="timezone">America/Los_Angeles</span>
<!--span class="end">12/18/2018 10:00 AM</span-->
<!--span class="duration">60</span-->
<!--span class="allday">true</span-->
<span class="title">Summary of the event</span>
<span class="description">Description of the event</span>
<span class="location">Location of the event</span>
</div>
If you are ony interested in the data, call ‘addToCalendarData’ with your event info, pass in any optional parameters as described in method #1. An object with some html links is returned.
var caldata = addToCalendarData({
data: {
// Event title
title: 'Get on the front page of HN',
// Event start date
start: new Date('June 15, 2013 19:00'),
//.. and the rest was optional.
}
});
console.log(caldata);
Need to generate an add-to-calendar widget on the fly? No problem, go here.