Google Calendar is one of the most popular calendar tools on the web. Google first released Google Calendar to the general public in 2009, and the app has been increasing in popularity ever since. To have your calendar work for you, you must have all appointments and events be clearly visible to you and all other event participants. Displaying your team’s Google Calendar on a digital sign display in your office can help ensure that everyone stays informed on upcoming events and commitments.
In this guide, we walk you through how to set up and create your Google Calendar dashboard so that you can feature your calendar on a display wall.
While you might not want to have your private calendar up on the wall of your office, you likely do want to display your team’s calendar. Perhaps you have a shared Google Calendar for company events (possibly connected to your CRM), and you want this calendar to be in plain sight for your team. Displaying a team calendar on a large digital sign display helps keep people’s schedules in sync and minimizes meeting absences.
After you complete this step-by-step guide, you will have a monthly view of your team calendar displaying on a digital sign. We hope your team’s calendar is not as empty as the example calendar below!
Create your calendar dashboard
Before we begin, you will need three things:
- A Google calendar you want to share. This calendar must be ‘published’ (i.e., be visible to people without them having to be logged in).
- A place to store and serve a regular HTML page. Most web hosting services will do (even Dropbox’s public folder’ works).
- A basic knowledge of HTML. If you are unfamiliar with HTML, don’t worry. You will likely be able to work through this guide just fine.
Configure your Google Calendar
The first step is to go to your Google Calendar. Next, locate the calendar you want to share in the left-hand side. Expand the drop-down menu and select “Calendar settings.”
You may need to customize the permission of your calendar so that it is publicly accessible. You can do this by selecting the “Make available to public” box under “Access permissions.”
After you complete the above steps, click the “Customize” button which is in the “Integrate calendar” section.
Clicking this button will take you to a page that allows you to customize the look and feel of an embedded calendar. This embedded calendar is the Google Calendar that you will display on your Screenly digital sign.
On this page, we recommend that you make the following changes:
- Under ‘Show’, deselect all items.
- Set the ‘Width’ to ‘1920’ pixels.
- Set the ‘Height’ to ‘1080’ pixels.
- Leave the selected ‘Default View’ at ‘Month’ to get a good overview of your upcoming events.
- Set ‘Week Starts On’, ‘Language’, and ‘Calendars to Display’ options according to your preferences.
When you are done making these adjustments, copy the HTML that the Google Calendar app generates at the top of the page. It should look something like this:
<iframe src="https://www.google.com/calendar/embed?[...]" width="1920" height="1080" frameborder="0" scrolling="no"></iframe>
Create your web page
You now need to create the actual HTML page that we will add to Screenly. This page needs to be publicly accessible. If you are using Dropbox to serve this file, you need to put the file in your “Public” folder. You can get the URL by right-clicking the file within your Dropbox account and selecting “Copy Public URL.””
Regardless of how you are hosting the file, you need to create a new file with the HTML snippet from above wrapped in an
<html> tag as follows:
<html> <iframe src="https://www.google.com/calendar/embed?[...]" width="1920" height="1080" frameborder="0" scrolling="no"></iframe> </html>
With this step completed, save the file and try browsing this URL using your web browser. Use your web browser in “Private” or “Incognito” mode to make sure the URL will work even when you are not logged in to your Google account.
Assuming that you were able to load the webpage, you can now add the public URL of your new page as an asset in Screenly.
Are you ready to give Screenly a shot? Sign up for a free trial..
More use cases
Want to learn more about other use cases? Check out our use cases page.