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 required files

<!-- jQuery library -->

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- FormatGoogleCalendar Javascript file -->

<script src="/js/format-google-calendar.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)
  
• 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)
  

Example of initialization

formatGoogleCalendar.init({

        calendarUrl: 'https://www.googleapis.com/calendar/v3/calendars/[email protected]/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*']

});