Google Calendar is the default system for a reason: it’s stable, ubiquitous, and easy-to-use. Displaying calendar data, however can be a bit clunky, especially if you want your event page to reflect your site’s branding. In this series, I’ll show you how to:
- Create a custom calendar event page with HTML, Tailwind CSS, and ViteJS
- How to publish your site to Netlify
- How to get a Google API key and store it safely as a Netlify environmental variable
- How to write your own custom serverless function, allowing for dynamic query string parameters
- How to fetch dynamic calendar data from your Google Calendar endpoint and display it on your site.
🔗 Key Links 🔗
- Live code: https://codinginpublic.dev/projects/google-calendar-event-page/
- GitHub: https://github.com/coding-in-public/google-calendar-event-page Help me make it better! Contribute to the community-improvements branch on GitHub.
📹 Other Videos in this Series 📹
- Full Playlist: https://www.youtube.com/watch?v=SOsGToYI0MQ&list=PLoqZcxvpWzzeuzWsIpH-N1b3vnRVbrdm3
- Video 1: https://youtu.be/SOsGToYI0MQ
- Video 2: https://youtu.be/CObyHiI7TEQ
- Video 3: https://youtu.be/wf5gVe8hWnk
- Video 4: https://youtu.be/_ec2ps7w8s4
🔗 Additional Links 🔗
- NodeJS: https://nodejs.org/en/
- Vite JS: https://vitejs.dev/
- Tailwind: https://tailwindcss.com/docs/installation/using-postcss
🌐 Connect With Me 🌐
- Website: https://www.codinginpublic.dev
- Blog: https://www.chrispennington.blog
- Twitter: https://twitter.com/cpenned