Getting started: Documentation

Introduction

AddToCalendar is a jQuery plugin. This plugin provides a simple and flexible way for your users to add your events to their calendars. It has designed for event/seminar organizer to add an "Add to Calendar" button to their website and application.

Installation

Basic setup

Include the style inside the <head>

<link href="css/addtocalendar.css" rel="stylesheet">

Include jQuery and addtocalendar.js inside the <head> or before the closing </body> tag
(Don't include jQuery twice if it's already in your project)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/addtocalendar.js"></script>

Setup Button Markup

Here data-event attribute holds your event data and once the plugin initiates it would become a full featured AddToCalendar button. With this new version timezone is now available for google calendar only. See the markup below to understand how to use it. List of timezones.

Start and End date time must be formatted as: 

Y-m-d HH:mm
or 
Y/m/d HH:mm

          <div class="addevent" data-event='{
            "title":"Summary of the event", 
            "start":"2018-08-09 08:00", 
            "end":"2018-08-09 10:00", 
            "desc":"Description of the event",
            "location":"Bangladesh", 
            "timezone":"America/Chicago"
            }'>
            <span>Add to Calendar</span>
          </div>

Call the plugin

          <script type="text/javascript">
          jQuery(document).ready(function($){
            $('.addevent').addToCalendar();
          });
          </script>

addToCalendar() can be appended to any element, beside you can invoke multiple buttons by class name.

Options

Here an exampe calling the plugin with all its default options

            $('.addevent').addToCalendar({
                filename: 'sample', // filename download for ical excluding extension
                target: '_blank', // specifies the target attribute of the window
                providers: {
                  google: 'Google Calendar', // provider name and label
                  outlook: 'Outlook Calendar', // provider name and label
                  yahoo: 'Yahoo! Calendar', // provider name and label
                  other: 'Other Calendar' // other property force download event as .ics for ical
                },
                onAddEvent: function() {} // callback after click provider link
            });

Callback

The plugin has one callback option: onAddEvent, to perform additional actions after add event. 

          $('.addevent').addToCalendar({
            providers: {
              google: 'Google Calendar', 
              outlook: 'Outlook Calendar', 
              yahoo: 'Yahoo! Calendar', 
              other: 'Other Calendar', 
            },
            onAddEvent: function() { // callback function
              alert('do some action');
            }
          });

Customization

It is quite easy to customize the look and feel of the AddToCalendar UI by adjusting one css file addtocalendar.css

List of Timezones:

Compatibility

It works perfectly in all modern browsers, tablets and mobile devices, and with Google Calendar, Outlook.com, Yahoo Calendar and iCalendar.

Thank you for purchasing addToCalendar. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here: Webmechanicx Thank you so much!