Skip to content

๐Ÿ—“ su.addToCalendar is a simple event creator for calendar services. It supports iCalendar(.ics) format which supports most of mail applications, Gmail and Outlook Online.

License

Notifications You must be signed in to change notification settings

sercanuste/su.addToCalendar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

6 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Calendar Event Creator

About

su.addToCalendar is a simple event creator for calendar services. It supports iCalendar(.ics) format which supports most of mail applications, Gmail and Outlook Online.

Live Preview

Snippet

<div class="box buttons">
    <div class="button-container">
        <a class="button su-event-button"
           data-service="icalendar"
           data-title="Friday Night Party"
           data-location="Office"
           data-description="We will celebrate new year!"
           data-start-date="2016.01.01 20:00"
           data-end-date="2016.01.01 22:00">
          <img src="images/iCalendar.png" alt="iCalendar" />
          <br />
          <span>iCalendar</span>
        </a>
    </div>
    <div class="button-container">
        <a class="button su-event-button"
           data-service="google"
           data-title="Friday Night Party"
           data-location="Office"
           data-description="We will celebrate new year!"
           data-start-date="2016.01.01 20:00"
           data-end-date="2016.01.01 22:00">
          <img src="images/Gmail.png" alt="Gmail" />
          <br />
          <span>Gmail</span>
        </a>
    </div>
    <div class="button-container">
        <a class="button su-event-button"
           data-service="outlook"
           data-title="Friday Night Party"
           data-location="Office"
           data-description="We will celebrate new year!"
           data-start-date="2016.01.01 20:00"
           data-end-date="2016.01.01 22:00">
          <img src="images/Outlook.png" alt="Outlook" />
          <br />
          <span>Outlook</span>
        </a>
    </div>
</div>

<script>
    su.addToCalendar.initialize();
</script>

Data Attributes

Name Type / Format Description
data-service icalendar, gmail or outlook Type of calendar service.
data-title string Title of the event.
data-location string Location of the event.
data-description string Description of the event.
data-start-date YYYY.MM.DD HH:mm Start date and time of the event. 24h format.
data-end-date YYYY.MM.DD HH:mm End date and time of the event. 24h format.
data-organizer string Organizer of the event. (su.addToCalendar.defaults.organizer's value if it's not specified.)

Usage

su.addToCalendar works with all CSS styles and HTML elements. Just add attributes to element and add script to page.

<script src="js/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/su.addToCalendar.min.js" type="text/javascript"></script>

<script>
    su.addToCalendar.initialize();
</script>

Options

Name Type Default Value Description
organizer string sercanuste.com Organizer of event.
footer string Get updated with us. Footer of event description text.
selector string .su-event-button jQuery selector of event creator HTML element.
<script>
    su.addToCalendar.initialize({ organizer: 'yoursite.com', footer: 'From Istanbul with Love', selector: '.foo' });
</script>

2016 ยฉ Sercan รœste

About

๐Ÿ—“ su.addToCalendar is a simple event creator for calendar services. It supports iCalendar(.ics) format which supports most of mail applications, Gmail and Outlook Online.

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project