HOW TO

DOCS

PART 1

Add your calendar content to the page with these classes

.event-item-content
Finsweet Cal Invite Launch
.event-title

Hey party people! Lets learn about an event structure with a start date, start time, and duration.

.event-desc
America/New_York
.event-timezone
Nov 12, 2020 10:00 AM
.event-start
Nov 12, 2020 11:00 AM
.event-end
finsweet.com
.event-location
PART 2

Add data attributes to buttons

Custom Attributes
cal-platform="google"
left arrow icon
cal-platform="apple"
left arrow icon
cal-platform="outlook"
left arrow icon
PART 3

Add the code

<script src="https://cdn.finsweet.com/files/add-to-cal/addToCalendar_5.js"></script><script></script>

// initialize the F'in sweet Cal Invite
var calendarInvite = fsCalendar({
// class of event title
title: '.event-title',
// class of event start date
start: '.event-start',
// class of event end date
end: '.event-end',
// class of event timezone
timezone: '.event-timezone',
// class of event Address
address: '.event-location',
// class of event Description
description: '.event-desc',

// multiple events on the page?
multipleEvents: true,
// class of the cms cal item
eventItemClass: '.event-item-content'
});

Copy code
Before </body> tag

<script src="https://cdn.finsweet.com/files/fscalendar/calendar-invite-v1.0.min.js"></script>

<script>
// initialize the F'in sweet Cal Invite
var calendarInvite = fsCalendar ({
// class of event title
   title: '.event-title',
// class of event start date
   start: '.event-start',  
// class of event end date
   
end: '.event-end',
// class of event timezone
   timezone: '.event-timezone',
// class of event Address
   address: '.event-location',
// class of event Description
   description: '.event-desc',
// class of the event item
   eventItemClass: '.event-item-content',
// monitor for text translations
   
localize: true
});
</script>

FORMAT REQUIREMENTS
May 12, 2020 11:00 AM

Your start and end date must be formatted like this. Time is optional.

America/New_York

Your timezone must be formatted by TZ time zone

iCal is weird on iOS… thanks Apple.

Mac OS / Macs / MacBooks: Cal-Invite works as intended .i.e. event data syncs with iCal.

iOS / iPads / iPhones: Apple does not have support for opening iCal .ics files in Apple Calendar from a web browser. Weird. We went with the next best option for this library. When opening the .ics file, we will open the devices default mail app with .ics event data pre-filled in the subject & body of the email.

LEARN MORE HERE

Video Tutorials

Get started

Data structure setup & CMS

Implementation in Webflow

Next steps