js-add-to-calendar-buttons

OuiCal2

A simple JS library that enables you to add an "add to calendar" button for your upcoming events.

Inspiration

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.

How to use it?

Method 1

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:

• Event title
• Start time

Example

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);

Method 2

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:

• Event title

• Start time

Example

<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>

Demo

Here is a live example

Calendar Generator

Need to generate an add-to-calendar widget on the fly? No problem, go here.

GitHub Project Page

Official Project Page

License

MIT