Want to display your Google Calendar events directly on your website? The Google Calendar widget in aThemes Addons for Elementor lets you embed an interactive calendar with customizable views, language settings, and full style control to match your site’s design.
In this guide, we’ll walk you through how to activate, configure, and style the Google Calendar widget in aThemes Addons.
Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor.
Activating the Widget
Go to your WordPress admin area and open the aThemes Addons dashboard. Search for the Google Calendar widget and toggle the switch to activate it. Once activated, drag the Google Calendar widget into your Elementor editor.
Exploring Widget Options
The Google Calendar widget includes sections for connecting your calendar data and controlling how events are displayed. Below is a breakdown of each section.
Configuring the Calendar Data Section
The Calendar Data section connects the widget to your Google Calendar. Enter the following:
- Google API Key – Enter your Google API key to authenticate the connection.
- Calendar ID – Enter the Calendar ID from your Google Calendar settings to specify which calendar to display.
Configuring the Settings Section
The Settings section controls how the calendar is displayed to visitors:
- Language – Select the display language from the dropdown.
- Initial View – Choose the default view: Day, Week, Month, or List.
- 24-hour Time Format – Toggle to switch between 12-hour and 24-hour time display.
- First Day of the Week – Select which day the calendar week starts on (Sunday through Saturday).
- Hide Past Events – Toggle to hide events that have already passed.
- Hide Event Link – Toggle to remove the link to the event in Google Calendar.
Customizing the Style Tab
The Style tab lets you customize every aspect of the calendar’s appearance to match your site’s design.
Styling the Calendar
Adjust the overall calendar container with the following options:
- Padding – Set the inner spacing of the calendar container.
- Background Color – Choose a background color for the calendar.
- Text Color – Set the default text color.
- Border Color – Choose the color for calendar borders.
- Border Width – Adjust the thickness of borders.
- Border Radius – Round the corners of the calendar container.
- Box Shadow – Add a shadow effect around the calendar.
Styling the Toolbar
Customize the navigation toolbar above the calendar:
- Title Color – Set the color of the toolbar title.
- Title Typography – Adjust the font family, size, weight, and style.
- Button Border Radius – Round the corners of toolbar buttons.
- Button Padding – Set the inner spacing of toolbar buttons.
- Button Typography – Customize the button text style.
- Button Colors – Set different colors for Normal, Hover, and Active button states.
Styling the Table Header
Customize the day-name header row of the calendar:
- Padding – Adjust the inner spacing of header cells.
- Typography – Set the font style for day names.
- Color – Choose the text color for day names.
- Background Color – Set a background color for the header row.
- Text Align – Align the header text to the left, center, or right.
Styling the Table Cells
Customize the individual date cells in the calendar grid:
- Padding – Set the inner spacing of each cell.
- Typography – Adjust the font style for date numbers.
- Color – Choose the text color for dates.
- Background Color – Set a background color for cells.
- Border Color – Choose the border color for cell dividers.
Styling Events
Customize how individual events appear on the calendar:
- Typography – Set the font style for event text.
- Text Color – Choose the color for event labels.
- Background Color – Set a background color for event items.
Following Usage Tips
- Keep your Google API key secure and restrict it to your domain in the Google Cloud Console.
- Use the specific Calendar ID for the calendar you want to display rather than your primary account calendar.
- Test different initial views (Day, Week, Month, List) to find the best experience for your visitors.
- Match the calendar style options to your site’s design for a cohesive look.
That’s it! You’ve successfully set up the Google Calendar widget to display your events on your site.
Next, would you like to showcase customer reviews? Check out our guide on using the Google Reviews widget to learn more.
