DOCS
Add your calendar content to the page with these classes
Hey party people! Lets learn about an event structure with a start date, start time, and duration.
Add data attributes to buttons
Add the code
// 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'
});
<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>
Your start and end date must be formatted like this. Time is optional.
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.
