Embedding a Calendar in a GitHub Pages Website

Using GitHub Pages makes it easy to add a custom calendar to your website.

This website uses GitHub Pages. For information on how to create a similar website, see the earlier article on creating a GitHub Pages site. The repository with the site content is available at http://denisecase.github.io/.

Follow the four steps below to add a top-level calendar page to your site.

1. Create your calendars

2. Grab the calendar content

From Google Calendar, access the calendar settings by clicking on the gear in the upper right.

Click the Calendars link.

Click the link to one of the calendars to be embedded. Under the Embed this Calender option, click the link to Customize the color, size, and other options.

Use the helper to adjust the content to show. Check all the calendars to be included. Update the calendar title. After customizing, select the HTML as indicated and copy to your clipboard (CTRL-C).

3. Add your new calendar page

Create a calendar.md file in the root folder. Add a YAML front matter block with the following content - the weight is used to set the order in which the menu items will appear.

layout: page
title: Calendar
weight : 98

Paste the HTML from Step 2 at the end of the file (CTRL-V).

This calendar.md file can be found in the GitHub repo for this site.

4. Test and commit

If you’re editing your files locally, open a Git Bash window in your github.io folder and run:

$ jekyll serve

Open browser to: http://localhost:4000/.

Verify the appearance, git add the new file, commit your changes locally, and then push them to your GitHub repository.