This article is for Hosted Calendars but is useful for anyone looking to embed a JavaScript calendar widget onto their external website.Please note: To embed a full calendar into your external website you need to either have a Hosted Calendar or have purchased the Super Widget add-on for your WordPress site.

Timely comes with a suite of JavaScript widgets you can use to embed various calendars on your site. The widgets you have access to are dependent on the plan you are subscribed to, or which WordPress add-ons you have installed. Free users can embed Upcoming Events widget, while paid users have access to various other widgets, such as Full Calendar. The Hub Calendar users also have access to Featured Events, Frontend Submissions button and Events by Filter Group.

Screen Shot 2014-11-24 at 1.10.57 PM

Once you have created your events, and have your calendar looking the way you want, it’s time to get it on your site. To start, navigate to Events > Widget Creator. In this example, we are going to embed the full calendar on a site (which, for users with their own WordPress calendar, requires the Super Widget add-on to be installed). Click the Full Calendar tab. Your events will now appear in the preview.

You can embed as many calendar widgets as you like. There are no limits. Some settings work system-wide, so all the calendars you embed will be affected. For instance, theme options such as colour and font will apply to all embedded calendars. The options in the Widget Creator form impact only the current widget you are about to embed. Let’s have a look at what each of the settings does.

image_389
Navigation Bar
The Navigation Bar allows your site visitors to navigate your calendar based on time, or change the view of the calendar.
Filter Bar
The Filter Bar allows your site visitors to filter the events shown in your calendar, for instance, by Category or Tag.
Display Type
The calendar will show one view by default. This is typically controlled on the settings page, but we provide the option here as well. This allows you to embed calendars with different default views.
Preselected Calendar Filters
You can select certain filters to have the calendar load with these selected by default.
Changing any of these options will only impact this widget, as opposed to making changes in settings or theme options, which will impact all widgets.

As you make changes to the settings here, you may notice that the code in the box changes. Once you have the calendar set up the way you want it to appear on your site, simply copy and paste that code to the appropriate page. You can use this code as many times as you like. Once you have it embedded you can start again and create a new widget with a fresh set of options. Changes you make to the settings on this page will not affect older widgets you previously embedded.

We recommend embedding the full calendar widget in the main body of your page. It will take the dimensions of the element it has been placed in.

Site-Specific Instructions

Learn how to embed your calendar on specific sites: