xst-google-calendar-events

fetch Google Calendar Entries via API into an sortable Event-List-Table at your Website

It's based on React, fetch the Data via AJAX and output an sortable Event-List Table. No Webserver with PHP or Database needed, because it's plain HTML, JS and CSS.

Table of content

• DEMO
• Browser Support
• Requirements
• Installation
• License
• ToDo
• Links

Demo

Live-Demo on a Website

Browser Support

Fully compatiple to following Browsers

• IE >= 10 ¹
• firefox
• Chrome
• Chrome for Android
• UC Browser for Android
• Samsung Internet
• IOS - Safari

¹ To support IE lower then IEedege, add https://cdn.polyfill.io/v2/polyfill.min.js into your HTML-Sourcecode.

Requirements

• yarn or npm installed and working
• Calendar-ID of your Google Calendar. You'll find it in your Calendar-Settings: How to get the Calender-ID
• API_KEY - to access your Google-Calendar. Get it on https://console.developers.google.com : [How to create a Google-Calendar Api-Key](./How to create a Google Api Key.pdf)

Installation

• Download the sources to your PC
• Rename or copy /sources/config.EXAMPLE.js to sources/config.js and edit for your needs
• Run yarn install on the root-path of the xst_googleEvents Directory
• Change API_KEY and CAL_ID (Calender-ID) in /source/app.js to your personal credentials, you've got from your Google-Calendar
• Run webpack -p. This will create the file xst_googlecalendar.js_
• Copy the file xst_googlecalendar.xst to your Server and include it into your Webpage-Source-Code

License

• React, React-Dom, React-Table, Superagent = MIT

ToDo

• Optimize index.html to show a nicer preview of functionality
• implement kind of auto- detector/loader to load polyfill.io for IE 10 & 11
• use Language-Files for Labels (Table, Buttons etc.)

Links

Live-Demo on a Website