FormatGoogleCalendar

Script gets public Google calendar and displays list of events.
Example: http://www.kacurak.com/formatgooglecalendar/example.html

How to install

Step 1: Link the library

The library could be found in the dist folder of this repository.

<!-- FormatGoogleCalendar Javascript file -->

<script src="/js/format-google-calendar.min.js"></script>

Step 2: Create HTML markup

<ul id="events-upcoming">

</ul>

<ul id="events-past">

</ul>

Step 3: Call the FormatGoogleCalendar

formatGoogleCalendar.init({});

Options

• calendarUrl (string, url of a public Google calendar)
  
• past (boolean, determines if past events should be displayed)
  
• upcoming (boolean, determines if upcoming events should be displayed)
  
• sameDayTimes (boolean, determines whether to show times for single-day events)
  
• dayNames (boolean, determines whether to show day names, beta feature)
  
• pastTopN (integer, number of latest past events, -1 means display all)
  
• upcomingTopN (integer, number of upcoming events, -1 means display all)
  
• recurringEvents (boolean, determines if recurring events should be shown as multiple events)
  
• timeMin (timestamp, Lower bound (inclusive) for an event's end time to filter by. Optional. The default is not to filter by end time. Must be an RFC3339 timestamp with mandatory time zone offset, e.g., 2011-06-03T10:00:00-07:00, 2011-06-03T10:00:00Z. Milliseconds may be provided but will be ignored.)
  
• timeMax (timestamp, Upper bound (exclusive) for an event's start time to filter by. Optional. The default is not to filter by start time. Must be an RFC3339 timestamp with mandatory time zone offset, e.g., 2011-06-03T10:00:00-07:00, 2011-06-03T10:00:00Z. Milliseconds may be provided but will be ignored.)
  
• itemsTagName (string, tagname of each event item)
  
• upcomingSelector (string, selector name of a parent element of upcoming events)
  
• pastSelector (string, selector name of a parent element of past events)
  
• upcomingHeading (string, heading of upcoming events)
  
• pastHeading (string, heading of past events)
  
• format (array, describes format in which should be data displayed, it is a list of strings where wildcards are *date*, *summary*, *description*, *location*, if a string is a different value than a wildcard the string will be appended to the final output)
  

Notes

You can customize calendarUrl with use of various parameters which are listed in the Google Calendar API page. Following options of this library: recurringEvents, timeMin, timeMax operate directly with the Google Calendar API url parameters.

Example of initialization

formatGoogleCalendar.init({

        calendarUrl: 'https://www.googleapis.com/calendar/v3/calendars/milan.kacurak@gmail.com/events?key=AIzaSyCR3-ptjHE-_douJsn8o20oRwkxt-zHStY',

        past: false,

        upcoming: true,

        sameDayTimes: true,

        dayNames: true,

        pastTopN: -1,

        upcomingTopN: 3,

        recurringEvents: true, 

        itemsTagName: 'li',

        upcomingSelector: '#events-upcoming',

        pastSelector: '#events-past',

        upcomingHeading: '<h2>Upcoming events</h2>',

        pastHeading: '<h2>Past events</h2>',

        format: ['*date*', ': ', '*summary*', ' — ', '*description*', ' in ', '*location*'],

        timeMin: '2016-06-03T10:00:00-07:00',

        timeMax: '2020-06-03T10:00:00-07:00'

});