Users often ask us about new ways they can use Yodeck. And we love nothing more than helping you make the best use of digital signage solution. Showing a Google calendar on a wall-mounted screen is one such frequent request.
Being able to show a calendar on a display can be very useful, for various reasons. The most common usage scenario is mounting a screen outside a meeting room to show availability. Another use is internal communications in offices; showing a calendar with corporate events in recreation areas, like cafeterias and reception areas.
Getting that Google calendar on a wall-mounted screen
Most calendars have a web version. We use the power of our scripting engine to run custom code on that web page that shows the calendar. Why? Here are a couple of reasons:
- Authenticate in order to display the calendar, or display details for the events in the calendar.
- Get only the calendar data for the screen. In that case, you need to remove any surrounding buttons, link, service provider logos, and other stuff that just get in the way.
- Change the styling of the calendar, to better fit the rest of the content you might have on screen.
- Refresh contents periodically, in case the web version of the calendar does not refresh its content automatically.
With this technique, there is no limitation to what you can display on Yodeck; you can use any calendar provider, even a calendar from a local server, as long as it provides a link to view the calendar in a web browser.
For this guide, we will be showing you how to display a google calendar on a wall-mounted screen, which is the most frequent request we get (we use it internally too!).
How it works with Yodeck on Raspberry Pi
Using a publicly accessible calendar
The easy way to display a Google calendar on Yodeck with Raspberry Pi, is to make it available as public. If you do not wish to have a public calendar, then you should check out the next section for using credentials to access a calendar.
If you login to your Google Calendar account and navigate to the options of a calendar, you will find two options for making a calendar public.
- “See only free/busy (hide details)”
- “See all event details”
Pretty self-explanatory, right? If you select the first option, then you will see the events in the calendar saying just “busy”, while the latter will allow you to see all the event details (namely, the event title).
(Note: If you are using G Suite, formerly known as Google Apps for Work, then you might not be allowed to select the “See all event details” option. Then, you either need to contact your administrator to allow this option, or go to the next section and use credentials to access the calendar.)
After that, scroll down and go to the “Integrate calendar” section. There you will find a “CUSTOMIZE” link.
Click on “CUSTOMIZE”. You will be directed to a tool that allows you to define which of your calendars you want to see, as well as other options.
Now do the following:
- From the options column on the right, uncheck all options in the “Show”.
- Select the “Default View” you want to see. We use the “Week” view, but you can use any of the two options and see what fits you best.
- Set the “Week Starts On”, “Language” and “Time Zone” options to the desired values.
- Select the Google Calendars you wish to show by checking them in the “Calendars to Display” section.
- Click the “Update HTML” button on the top-right corner, just to update the preview of the calendar.
Still with me? Good. After doing all of that, from the produced HTML code text area on the top, there is an HTML code fragment that you will need to copy. Make sure you select whatever is within the “src” parameter (excluding the starting and ending quotes, and copy that to your clipboard.
Code snippet<iframe src="https://calendar.google.com/calendar/b/1/embed?showTitle=0&showNav=0&showDate=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&height=600&wkst=1&bgcolor=%23ffffff&ctz=America%2FNew_York" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
Then, navigate to this page:
Now, paste the text you copied into the text area, and click “UNESCAPE”. Within a couple of seconds, you will be shown the results in the “Unescaped string” textarea. Select all of it, and copy that.
The final step is within your Yodeck Account. Go to the “Web Pages” section and create a new Web Page with the following details:
- As the URL address, use the unescaped address you copied previously.
- As the Zoom Factor, this is up to you. You need to test 2-3 values to make it as readable as possible and still look good. Start with the default 100% and, if text looks small, go for 150% or even 300%. Trial and error guys!
- To remove the “Google” logo in the bottom-right corner, set the “Run Custom Script” toggle to “ON” and in the “Script Code”, type the following:
Code snippetrunScript("""jQuery("#footer1 > tbody > tr").remove();""")
Next, click “Save”. You Web Page entry is ready! Now, go to “Shows”, create a new Show, add the Web Page you created, resize it to be full screen, click “Save”, and then got to “Monitors” and assign this Show to a Monitor without assigning any Schedule to Playback. Push to your screens and you are all set! You should now see your Google calendar on a wall-mounted screen!
Using a username and password to access a private calendar
Showing only free/busy might not be enough. And making your calendar details public on the Internet might not be possible. In this case, you need to use a Google Account with access to the calendar, so that you can show your Google calendar on a wall-mounted screen through Yodeck.
First, make sure that you have a username and password for a Google Account that does indeed have access to the calendar(s) you want to show. Use these credentials to login and add these calendars, so that you can display them.
An important note:
The credentials for this Google Account will be saved in your Yodeck Account and in your Yodeck Players that display this calendar. Understand that if someone accesses your Yodeck Account or physically access your Yodeck Player, then they will have access to these credentials. We suggest creating a Google Account specifically for this type of use.
After you login into the Google Account, you repeat the whole process described in the previous section to get the final unescaped URL address to be used. Then, go into Yodeck and create a Web Page, but do the following instead:
- As the URL address, use:
- As the Zoom Factor, again this is up to you. You need to test 2-3 values to make it as readable as possible and still look good.
- Set the “Run Custom Script” toggle to “ON” and in the “Script Code”, type the following:
Code snippettype("""#Email""", """GOOGLEACCOUNT@DOMAIN.COM""")
runScript("""jQuery("#footer1 > tbody > tr").remove();""")
- Make sure that in the above code you:
- Replace GOOGLEACCOUNT@DOMAIN.COM with the email address of the Google Account you use to access the calendar.
- Replace PASSWORD with the password of that Google Account.
- Replace GOOGLE_CALENDAR_ADDRESS with the unescaped address you retrieved.
Finally, click “Save”. Your Web Page entry is ready! Now, go to “Shows”, create a new Show, add the Web Page you created, resize it to be full screen, click Save, and then got to “Monitors” and assign this Show to a Monitor without assigning any Schedule to Playback. Push to your screens and you are all set!
Your calendar should now be on display. Just a note, since you are logging in using credentials, it might take 15-20 seconds for the login to complete and for the calendar to show up. We hope you find this guide to displaying a Google calendar on a wall-mounted screen useful. As always, feel free to contact us if you have any comments or need help.