├── .gitignore
├── README.md
├── favicon.svg
├── functions
    └── calFetch.mjs
├── index.html
├── main.js
├── netlify.toml
├── package-lock.json
├── package.json
├── postcss.config.js
├── style.css
└── tailwind.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 | # Local Netlify folder
7 | .netlify
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Custom Google Calendar Event Page
 2 | 
 3 | 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: 
 4 | - Create a custom calendar event page with HTML, Tailwind CSS, and ViteJS
 5 | - How to publish your site to Netlify
 6 | - How to get a Google API key and store it safely as a Netlify environmental variable
 7 | - How to write your own custom serverless function, allowing for dynamic query string parameters
 8 | - How to fetch dynamic calendar data from your Google Calendar endpoint and display it on your site.
 9 | 
10 | 🔗  Key Links 🔗
11 | - Live code: https://codinginpublic.dev/projects/google-calendar-event-page/
12 | - GitHub: https://github.com/coding-in-public/google-calendar-event-page
13 | Help me make it better! Contribute to the community-improvements branch on GitHub.
14 | 
15 | 📹  Other Videos in this Series 📹
16 | - Full Playlist: https://www.youtube.com/watch?v=SOsGToYI0MQ&list=PLoqZcxvpWzzeuzWsIpH-N1b3vnRVbrdm3
17 | - Video 1: https://youtu.be/SOsGToYI0MQ
18 | - Video 2: https://youtu.be/CObyHiI7TEQ
19 | - Video 3: https://youtu.be/wf5gVe8hWnk
20 | - Video 4: https://youtu.be/_ec2ps7w8s4
21 | 
22 | ---------------------------------------
23 | 
24 | 🔗  Additional Links 🔗
25 | - NodeJS: https://nodejs.org/en/
26 | - Vite JS: https://vitejs.dev/
27 | - Tailwind: https://tailwindcss.com/docs/installation/using-postcss
28 | 
29 | ---------------------------------------
30 | 
31 | 🌐 Connect With Me 🌐 
32 | - Website: https://www.codinginpublic.dev
33 | - Blog: https://www.chrispennington.blog
34 | - Twitter: https://twitter.com/cpenned
35 | 


--------------------------------------------------------------------------------
/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
 3 | <path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
 4 | <defs>
 5 | <linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
 6 | <stop stop-color="#41D1FF"/>
 7 | <stop offset="1" stop-color="#BD34FE"/>
 8 | </linearGradient>
 9 | <linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
10 | <stop stop-color="#FFEA83"/>
11 | <stop offset="0.0833333" stop-color="#FFDD35"/>
12 | <stop offset="1" stop-color="#FFA800"/>
13 | </linearGradient>
14 | </defs>
15 | </svg>
16 | 


--------------------------------------------------------------------------------
/functions/calFetch.mjs:
--------------------------------------------------------------------------------
 1 | import fetch from 'node-fetch';
 2 | 
 3 | const { CAL_API, CAL_ID } = process.env;
 4 | const BASEPARAMS = `orderBy=startTime&singleEvents=true&timeMin=${new Date().toISOString()}`
 5 | const BASEURL = `https://www.googleapis.com/calendar/v3/calendars/${CAL_ID}/events?${BASEPARAMS}`
 6 | 
 7 | const HEADERS = {
 8 |   'Content-Type': 'application/json',
 9 |   'Access-Control-Allow-Methods': 'GET',
10 | }
11 | 
12 | exports.handler = async function (event, context) {
13 |   const finalURL = `${BASEURL}${event.queryStringParameters.maxResults ? `&maxResults=${event.queryStringParameters.maxResults}` : ''}&key=${CAL_API}`
14 |   try {
15 |     if (event.httpMethod === 'GET') {
16 |       return fetch(finalURL)
17 |         .then((response) => response.json())
18 |         .then((data) => ({
19 |           statusCode: 200,
20 |           body: JSON.stringify(data.items, null, 2),
21 |           HEADERS
22 |         }))
23 |     }
24 |     return {
25 |       statusCode: 401
26 |     }
27 |   } catch (e) {
28 |     console.error(e)
29 |     return {
30 |       statusCode: 500,
31 |       body: e.toString()
32 |     }
33 |   }
34 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Google Calender Event Page</title>
 8 |   </head>
 9 |   <body class="bg-slate-50 dark:bg-slate-700 p-4 md:p-6 lg:p-8 min-h-screen grid gap-4 md:gap-6 lg:gap-8 text-slate-600 dark:text-slate-100 grid-rows-auto1">
10 |     <header class="text-center grid p-4 place-items-center content-center">
11 |       <h1 class="text-3xl sm:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-br pb-4 md:pb-6 from-blue-500 to-violet-700 dark:from-blue-400">My Calender Events</h1>
12 |       <label for="eventAmt">Events to Show</label>
13 |       <input type="range" id="eventAmt" min="1" value="9" max="20" class="accent-blue-600 cursor-grab">
14 |     </header>
15 |     <main class="max-w-6xl w-full mx-auto">
16 |       <section class="grid gap-4 md:gap-6 lg:gap-8 items-start grid-cols-cards" id="events-container">
17 |         <div class="flex gap-3 items-center text-blue-500 mx-auto">
18 |           <svg class="animate-spin h-8 w-8" width="20" viewBox="0 0 155 155" fill="none" xmlns="http://www.w3.org/2000/svg">
19 |             <circle class="opacity-25" cx="77.5" cy="77.5" r="60" stroke="currentColor" stroke-width="10" />
20 |             <path d="M120.329 35.48a59.998 59.998 0 0 1 6.712 75.868" class="opacity-75" stroke="currentColor" stroke-width="10" />
21 |           </svg>
22 |           <p class="text-center text-3xl animate-pulse">Loading Events</p>
23 |         </div>
24 |       </section>
25 |     </main>
26 |     <script type="module" src="/main.js"></script>
27 |   </body>
28 | </html>
29 | 
30 | 
31 | 
32 | 
33 | 
34 | 
35 | 
36 | 
37 | 
38 | 
39 | 


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
  1 | import './style.css'
  2 | 
  3 | const eventContainer = document.querySelector('#events-container');
  4 | const eventAmtToFetch = document.querySelector('#eventAmt');
  5 | 
  6 | const getRandomNumBetween = (min, max) => Math.floor(Math.random() * (max-min +1)) + min;
  7 | const getMonth = (month) => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][month];
  8 | const getDayOfWeek = (weekday) => ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][weekday]
  9 | const isAM = (hour) => hour < 12;
 10 | const getHour = (hour) => (hour <= 12 ? hour : hour - 12);
 11 | const getMinute = (minute) => (minute === 0 ? '00' : minute);
 12 | 
 13 | function processDate(date){
 14 |   const hour = getHour(date.getHours()) === 0 
 15 |     ? false 
 16 |     : getHour(date.getHours());
 17 |   const minute = getMinute(date.getMinutes());
 18 |   const timeSuffix = `<small>${isAM(date.getHours()) 
 19 |     ? `AM` 
 20 |     : `PM`
 21 |   }</small>`
 22 |   const time = hour && `${hour}:${minute}${timeSuffix}`;
 23 |   
 24 |   return {
 25 |     month: getMonth(date.getMonth()), 
 26 |     weekday: getDayOfWeek(date.getDay()),
 27 |     time,
 28 |     date: date.getDate(),
 29 |   }
 30 | }
 31 | 
 32 | function mapEventObject(event){
 33 |   const startDate = event.start.dateTime 
 34 |     ? processDate(new Date(event.start.dateTime))
 35 |     : processDate(new Date(`${event.start.date}T00:00:00`))
 36 |   const endDate = event.end.dateTime 
 37 |     ? processDate(new Date(event.end.dateTime))
 38 |     : processDate(new Date(`${event.end.date}T00:00:00`))
 39 |   let dateRange;
 40 |   if (startDate.date !== endDate.date){
 41 |     dateRange = `${startDate.month} ${startDate.date}–${endDate.month} ${endDate.date}`
 42 |   } else if (!startDate.time) {
 43 |     dateRange  = `${startDate.month} ${startDate.date}`;
 44 |   } else {
 45 |     dateRange = `${startDate.weekday}, ${startDate.time}–${endDate.time}`;
 46 |   }
 47 |   
 48 |   return {
 49 |     name: event.summary,
 50 |     description: event.description,
 51 |     location: event.location,
 52 |     start: startDate,
 53 |     end: endDate,
 54 |     dateRange,
 55 |     link: event.htmlLink,
 56 |   }
 57 | }
 58 | 
 59 | function createEvent(e, i){
 60 |   const colors = ['blue', 'amber', 'rose', 'indigo', 'pink'];
 61 |   const colorScheme = colors[getRandomNumBetween(0, colors.length - 1)]
 62 |   return `<article class="bg-white dark:bg-slate-800 shadow-xl shadow-slate-200 dark:shadow-slate-800 rounded-lg">
 63 |           <div class="p-3 shadow bg-${colorScheme}-500 text-indigo-50 uppercase grid place-items-center rounded-t-lg">
 64 |             <div class="text-sm">${e.start.month}</div>
 65 |             <div class="text-3xl font-bold">${e.start.date}</div>
 66 |           </div>
 67 |           <div class="p-4 md:p-6 lg:p-8 grid gap-4 md:gap-6">
 68 |             <div class="grid gap-1">
 69 |               <p class="text-slate-400 text-sm">${e.dateRange}</p>
 70 |               <h2 class="font-bold text-2xl">
 71 |               <a href="${e.link}">${e.name}</a>
 72 |               ${e.location 
 73 |                 ? `<p class="text-slate-400 text-sm">${e.location}</p>`
 74 |                 : ''}
 75 |               </h2>
 76 |               ${
 77 |               e.description
 78 |               ? `<div class="grid gap-1">
 79 |                 <button class="text-slate-400 flex gap-1 items-center cursor-pointer" aria-expanded="false" aria-controls="details-${i}" id="btn-${i}">
 80 |                   <p class="pointer-events-none">See details</p>
 81 |                   <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 pointer-events-none transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 82 |                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
 83 |                   </svg>
 84 |                 </button>
 85 |                 <div class="grid gap-1 hidden" id="details-${i}" aria-labelledby="btn-${i}">
 86 |                   <p class="text-slate-400">${e.description}</p>
 87 |                 </div>
 88 |               </div>
 89 |             </div>`
 90 |             : '<div class="h-4"></div>'
 91 |             }
 92 |             <a href="${e.link}" class="bg-${colorScheme}-500 rounded-md px-4 py-2 text-${colorScheme}-50 shadow-2xl shadow-${colorScheme}-200 dark:shadow-none text-center font-bold hover:shadow-none ring ring-offset-0 ring-${colorScheme}-500 focus:outline-none focus:ring-offset-2">View Event</a>
 93 |           </div>
 94 |         </article>`
 95 | }
 96 | 
 97 | async function loadEvents(max=8){
 98 |   try {
 99 |     const endpoint = await fetch(`./.netlify/functions/calFetch?maxResults=${max}`);
100 |     const data = await endpoint.json();
101 |     const processedEvents = data.map(e => mapEventObject(e));
102 |     eventContainer.innerHTML = processedEvents.map((event, i) => createEvent(event, i)).join('');
103 |   } catch (e) {
104 |     eventContainer.innerHTML = `<p class="text-center text-3xl">🙀 Something went wrong!</p>`
105 |     console.log(e);
106 |   }
107 | }
108 | loadEvents();
109 | 
110 | eventContainer.addEventListener('click', (e) =>{
111 |   if(e.target.hasAttribute('aria-expanded')){
112 |     e.target.setAttribute('aria-expanded', e.target.getAttribute('aria-expanded') === 'false' ? 'true' : 'false');
113 |     e.target.querySelector('svg').classList.toggle('rotate-180');
114 |     e.target.nextElementSibling.classList.toggle('hidden');
115 |   }
116 | })
117 | eventAmtToFetch.addEventListener('change', (e) => loadEvents(eventAmtToFetch.value))


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   functions = 'functions'


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "google-cal-api",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build": "vite build",
 7 |     "preview": "vite preview"
 8 |   },
 9 |   "devDependencies": {
10 |     "autoprefixer": "^10.4.2",
11 |     "netlify-cli": "^8.18.1",
12 |     "postcss": "^8.4.5",
13 |     "tailwindcss": "^3.0.18",
14 |     "vite": "^2.7.2"
15 |   },
16 |   "dependencies": {
17 |     "node-fetch": "^3.2.0"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   }
6 | }


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: ["*.{html,js}"],
 3 |    safelist: [
 4 |     'bg-blue-500',
 5 |     'bg-amber-500',
 6 |     'bg-rose-500',
 7 |     'bg-indigo-500',
 8 |     'bg-pink-500',
 9 |     'text-blue-50',
10 |     'text-amber-50',
11 |     'text-rose-50',
12 |     'text-indigo-50',
13 |     'text-pink-50',
14 |     'ring-blue-500',
15 |     'ring-amber-500',
16 |     'ring-rose-500',
17 |     'ring-indigo-500',
18 |     'ring-pink-500',
19 |     'shadow-blue-200',
20 |     'shadow-amber-200',
21 |     'shadow-rose-200',
22 |     'shadow-indigo-200',
23 |     'shadow-pink-200',
24 |   ],
25 |   theme: {
26 |     extend: {
27 |       gridTemplateRows: {
28 |         'auto1': 'auto 1fr',
29 |       },
30 |       gridTemplateColumns: {
31 |         'cards': 'repeat(auto-fit, minmax(250px, 1fr))',
32 |       }
33 |     },
34 |   },
35 |   plugins: [],
36 | }


--------------------------------------------------------------------------------