Add a calendar to your site

If you are thinking of more ways to keep your site visitors up to date on what's going on with your business, or in your life in general you may consider posting a calendar to your site. With a calendar you can keep track of all kinds of important events in one place. You can add events and send invitations, share your schedule with clients, friends and family, and search for events you might enjoy. Using an HTML snippet you can easily display Google Calendars or 30Boxes Calendars into your site.

Google Calendar


To create a Google Calendar, you should have an account with Google. If you don't yet have an account, create one here. If you already have one, just visit the Google Calendar home page, enter your username and password, and click Sign in.


Once in your account, you will see your empty calendar created. Start adding events by clicking a spot on your calendar (1). Enter the name of the event and click Create Event. To enter more details for the event click edit event details link. In addition to the event date, time and name, you will have the option to enter event description, repeat options, popup reminders and so on. This detailed event page may also be accessed if you click Create Event link on the left (2).



With Google Calendar you can import events from other programs, send invitations, set event reminders and many others. Learn more on all features included with Google Calendar here.

Add a Google Calendar to your website


1. In the calendar list on the left, click the down-arrow next to the calendar you want to embed (1), and select Calendar settings (2). (Alternatively, click the Settings (3) link at the bottom of the calendar list, then click the name of the calendar.)


2. Copy the code displayed in the Embed This Calendar section.
3. Add an HTML Snippet at the place where your Google Calendar should appear and paste the code into the snippet box.


4. On the published page your calendar will look similar to this:


5. To customize your embedded calendar, click the Customize the color, size, and other options link in Embed This Calendar section (step 3). In the Embeddable Calendar Helper displayed, select your options and paste the calendar code displayed on top right in your website.


6. To display events from multiple calendars in the same embedded calendar, simply follow the instructions above to access the Google Embeddable Calendar Helper. Then, in the section Calendars to Display select the checkbox next to each calendar you wish to display.