Skip to main content

How to create a calendar widget for your website

Pick a template, connect your calendar and choose which events to show, then publish your widget and add it to your website.

Written by Piotr Poźniak

A calendar widget shows the events from your calendar on your website. Before you start, connect your calendar.

Step 1: Start a new calendar

In the left-hand menu, go to Widgets › Calendars and click Create new.

Step 2: Choose a template

Pick the layout closest to what you want:

  • Detailed list: full descriptions, a sign-up link per event, and featured events called out. Best for selling events.

  • Cards (Slider): a carousel that shows a lot in a little space. Best on mobile.

  • Cards (Grid): social-style cards, several events at a glance. Best on desktop.

  • Cards (List): the same cards stacked, with image and details in one compact row. Best on mobile.

  • Monthly view: the whole month at once. Best for recurring schedules.

  • Weekly view: just this week, in list, pill or stacked form. Best for planning attendance.

  • Events list: a plain list of what's on this month. The simplest option.

  • Tiles: resizable tiles for a sidebar or a featured-events strip.

Click a template to preview it with demo events. Switch between Desktop and Mobile to see both, or click All templates to go back. See all demos shows each template live.

You can go back and pick a different template until you click Create calendar. After that the template can't be changed, so to use a different layout, create a new calendar.

Step 3: Name it and connect your calendar

Give the calendar a Name. Only you see it, in your dashboard, so name it after the page it will go on.

Under Data source, choose the calendar connection its events come from. Then click Create calendar.

Nothing is public until you publish it.

Step 4: Choose which events to show

On the Setup tab, open Events Filtering. Only events that are public in your calendar are shown. You can also:

  • turn on Show events with images only

  • turn on Merge recurring events to show a repeating event once, with its schedule

  • click + Add filter to include or leave out events by calendar, location or tag. See Filter events: options and logic.

Use Featured Events to highlight events, and Public title and description (SEO) to set the title and description search engines show. Click Save.

Step 5: Make it look like your website

On the Design tab, choose colours, fonts and which event details to show. Changes show in the preview straight away. Looking for a setting? Use the search at the top of the tab. See Settings search.

Click Save when you're done.

Step 6: Publish

On the Install tab, click Publish, or turn on Make this widget available to others. The status next to the calendar's name changes from Unpublished to Published.

Step 7: Add it to your website

Click Install and choose where your website is built:

  • WordPress, Wix or Mailchimp, for steps made for that platform

  • Standard install, for any other website

Click Next and follow the steps.

Prefer a link? Under Hosted Link and Redirection, click Copy next to Sharable URL. Share it by email, on social media or in a message. See Hosted link and link redirection.

What's next

Did this answer your question?