Displaying the Calendar

Would you like to learn how to show calendars on your sites’ frontend? Sugar Calendar provides different ways to show calendars with events you’ve created.

This tutorial will show you the various ways to display calendars on your site.

---

Before you get started, make sure Sugar Calendar is installed and activated on your WordPress site. After that, create a calendar and add some events to it.

Using the Block Editor

With the Events Calendar block, you’ll be able to display a calendar on your site. To use this block, you’ll need to create a new post/page or edit an existing one to access the block editor.

In the block editor, click the Add block (+) icon and select the Events Calendar block.

After adding the block, it will display a calendar with all the Calendars and events you’ve created on your site.

Additional options will also appear on the right sidebar of the page. Under the Calendars section, select the calendar(s) you’d like to display. If none is selected, it will default to show all calendars and events on your site.

In the Display section, you can choose to display the calendar by Month, Week, or Day. The default is the Month display option.

Here’s an overview of how the Week option looks when selected.

The Day option will look similar to the image below if selected.

If you’d like to allow users to change the calendar’s display on your site’s frontend, toggle on the Allow Users to Change Display option.

The Colors section lets you choose an accent color for the calendar.

You can choose from the predefined Theme or Default colors. Alternatively, clicking the color panel opens the color picker, where you can choose a custom color.

If you have the Hex code for your brand color, you can simply paste it into the hex value field.

When you’re done customizing the block, be sure to publish or update the page to save your changes.

Using a Shortcode

The [sc_events_calendar] shortcode will show a complete Ajax-enabled calendar with your events wherever you place the shortcode. You can display it on a page or post on your site.

The shortcode accepts two optional parameters:

1. Category: This will allow you to limit the calendar to only show events from a specific calendar.
2. Size: This allows you to display a large or small calendar. The default option is a large calendar.

Using the shortcode like the example below will show a large calendar with all calendars selected (non-excluded):

[sc_events_calendar]

Here’s an updated version of the shortcode displaying the concerts calendar and the size set to small.

[sc_events_calendar category="concerts" size="small"]

The shortcode also accepts a type parameter that allows you to control the date range displayed. Below, we’ve highlighted the supported date range options:

• month
• day
• 4day
• week
• 2week

For example, to show a calendar that displays one week at a time, use:

[sc_events_calendar type="week"]

To show a calendar that displays two weeks at a time, use:

[sc_events_calendar type="2week"]

Using the Events Calendar Widget

If you’d like, you can also display calendar events on your site’s widget areas like the sidebar or footer.

To use the widget, first go to Appearance » Widgets. Then add the Events Calendar block to the area you wish to display the calendar.

You can customize the widget like we did in the block editor section above.

Classic Widgets

If your site uses the classic widgets, you’ll need to select the (Sugar Calendar) Event Calendar widget.

Then choose the area you’d like to display the calendar and click Add Widget.

Once the widget is placed, you can customize the Size and Calendar category to show. Leaving the Calendar option set to All will show all calendars with their respective events. After making your changes, click the Save button to continue.

That’s it! You’ve now learned different ways to show event calendars on your site.

Next, would you like to learn how to connect your site with a third-party calendar application to sync your events? Be sure to check our tutorial on using calendar feeds to learn how.