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/g...
GitHub: https://github.com/coding-in-public/g...
Help me make it better! Contribute to the community-improvements branch on GitHub.
📹 Other Videos in this Series 📹
Full Playlist: • Google Calendar API Event Page (Tailw...
Video 2: • Google Calendar API Event Page (Tailw...
Video 3: • Google Calendar API Event Page (Tailw...
Video 4: • Google Calendar API Event Page (Tailw...
---------------------------------------
🔗 Additional Links 🔗
NodeJS: https://nodejs.org/en/
Vite JS: https://vitejs.dev/
Tailwind: https://tailwindcss.com/docs/installa...
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
1:35 ViteJS setup
2:31 Tailwind setup
---------------------------------------
🌐 Connect With Me 🌐
Website: https://www.codinginpublic.dev
Blog: https://www.chrispennington.blog
Twitter: / cpenned
Source for images: Google, Tailwind, Netlify
Watch video Google Calendar API Event Page (Tailwind Project) | Intro & Setup online without registration, duration hours minute second in high quality. This video was added by user Coding in Public 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 7,875 once and liked it 140 people.