EverWebSoftwareTips and TricksTutorialsWidgets

Using Google Calendars in EverWeb

Adding a calendar to your website is a simple, easy and effective way to let others know your agenda and availability. It’s also great in business situations where you want to show things such as available appointment times, room availability for meetings or if a piece of equipment is available for hire on a particular day. Including a calendar in your EverWeb made website only takes a few steps using Google’s calendaring feature.

In this example we’re going to create a calendar showing the availability of a music studio for hire.

  1. First of all you’ll need to have a Google account. If you don’t have one go to www.google.com and click on the ‘Sign In’ button located in the top right hand corner of the browser window and create an account from there.
  2. If you have not done so already, log in to your Google account and go to Google Calendar by clicking on the grid icon in the top right of the browser window. The grid icon displays all of Google’s cloud based apps you can access. Click on the Calendar app.
  3. You’ll see this month’s calendar displayed. Next create your own calendar that will be shown on your website the studio’s availability. If you’ve used Google Calendar before, you may already have one or more calendars set up already. Different calendars can be used for different purposes e.g. one for your own availability and one for studio bookings. To create a new calendar, go to the ‘My Calendars’ section and click on the drop down arrow. Select ‘Create new calendar’.
  4. On the ‘Create new calendar’ page, name your calendar e.g. ‘Studio Bookings’ and complete the form by filling in the fields you want include.
  5. It’s important to remember to tick the box to ‘Make this calendar public’. If you don’t no-one will see the calendar content on your website.
  6. When you have completed the form click on the ‘Create Calendar’ button at the bottom of the window.
  7. You’ll now see the calendar in the ‘My calendars’ list. Now the calendar has been added, hover the cursor over the calendar name and click on the drop down button to the right of the calendar name. Select the option ‘Calendar settings’ from the menu that appears.
  8. On the next screen you can edit the calendar display by selecting ‘Customize the color, size, and other options’ link in the ‘Embed this calendar’ section. Google Calendar allows you to change the display size of the calendar, has color and bordering options, the initial calendar view options such as weekly, monthly or agenda view and more.
  9. Once you’ve finished customizing your calendar, click the ‘Update HTML’ button, Select all the code in the ‘Copy and paste the HTML…’ box and copy it using Cmd+C. Having copied the code to the clipboard you can return to the calendar by clicking on ‘Google Calendar’ in the top left of the browser window.
  10. On the calendar view add in some events so you can see that the calendar functions properly on your web page. To create an event just click on the time you want the event to start and drag the mouse cursor to it’s end time. You’ll then be able to create the event.
  11. There are other options available on the calendar page such customizing the color of the events in the calendar. Just click on the drop down button to the right of the calendar name for the menu of options.
  12. The code snippet you copied to the clipboard is what you need to embed the calendar in to your page in EverWeb. If you change the customisation options in your calendar after you’ve copied the code, you’ll need to ‘update’ the HTML code, recopy the resulting code and reapply it in EverWeb.
  13. With the code copied to the clipboard, launch EverWeb and go to the page in your Project file where you want to add the calendar.
  14. Drag and drop the HTML Widget on to the page from the Widgets tab. Paste the code that you copied in to the ‘HTML code’ box and press the ‘Apply’ button.
  15. The widget will update. Move the calendar to where you want it on the page. The width and height of the calendar will be the dimensions that you chose in Google Calendar.
  16. Use EverWeb’s Preview to see how the calendar will look, you can even interact with it as well.

When you’re happy with the results, hit the ‘Publish’ button and you’re all done and will have a live calendar online!

You may also like

Comments

Leave a reply

Your email address will not be published. Required fields are marked *

More in EverWeb