Gatsby Starter Event Calendar is a free, open-source Gatsby starter that builds a collaborative, responsive event calendar website from events submitted through a Google Form and stored in a Google Spreadsheet. The template was created by Ema Suriano and is published on GitHub under an MIT license.
What is Gatsby Starter Event Calendar?
The starter's core function is to read event rows from a Google Spreadsheet and render them as a static monthly calendar site. It takes the spreadsheet URL and form link as configuration, then uses the gatsby-source-google-spreadsheets plugin to pull data into Gatsby's GraphQL layer during build time. The output is a fully pre-rendered HTML site with separate views and a modal for each event. Because it is built on Gatsby, the site is static and can be hosted anywhere, with Netlify support built in.
Key Features
- Gatsby framework — Built on Gatsby with TypeScript, React Hooks, and a GraphQL data layer that evaluates queries only at build time.
- Google Spreadsheet as CMS — Events are added entirely through Google Forms; the spreadsheet acts as the database, so no custom backend is required.
- Grommet UI components — Uses Grommet for accessible, themed, responsive UI with support for a JSON theme file.
- Customizable theming — A theme object controls colors for today, days, past days, empty cells, weekdays, events, past events, and the modal; sample themes labeled main, light, and dark are included.
- Responsive design — The layout adapts to desktop, tablet, and mobile and includes a modal with event details on smaller screens.
- App configuration file — appConfig.js in the root folder sets title, subtitle, formLink, spreadsheetLink, and limitMonthInTheFuture; values are accessed via a React Context named ConfigContext.
- SEO and PWA — The starter ships with SEO support, offline support, and is PWA ready.
- Developer tooling — Includes ESLint and Prettier configuration for consistent code style.
Who is it for?
Event organizers and meetup groups who want a public calendar without building and maintaining a backend. Developers who want a pre-built Gatsby starter with a spreadsheet-backed CMS and clear configuration. Communities that use Google Forms to collect event submissions and need an automatic website to display them.
Use cases
- Meetups: Publish a monthly meetup calendar by embedding a Google Form on your website and connecting this starter to the response spreadsheet.
- Conferences: Collect session submissions through a form and show the accepted agenda as a styled calendar.
- Community boards: Create a collaborative event page where anyone can submit an event via form and the admin edits or removes entries in the spreadsheet.
How does it work?
You start by creating a Google Form with questions for the event name, date, link, and place. After enabling the Responses tab and generating a linked Google Spreadsheet, copy both URLs into appConfig.js. Then configure the gatsby-source-google-spreadsheets plugin with your Google API service account credentials, and run yarn build. The build fetches the spreadsheet rows and generates a static site in the public folder. To map spreadsheet columns, edit the GraphQL query in the template to use aliases such as eventName: whatisthename and date: when.
Configuration and deployment
The starter needs a few environment variables to access the spreadsheet: PRIVATE_KEY, PRIVATE_KEY_ID, PROJECT_ID, and CLIENT_EMAIL. These are read during the build command, so you must pass them when deploying. The README recommends Netlify, where you can set environment variables and the build command in the dashboard. The appConfig.js file also lets you set a title, subtitle, form link, spreadsheet link, and a limit for how many months in the future the calendar shows.
