Go to athemes.com

Google Calendar

The Google Calendar Widget allows you to display events from your Google Calendar directly on your website. It pulls events through the API from Google Calendar and displays them in a customizable calendar format.

Activate the widget

This widget is part of the aThemes Addons for Elementor plugin. To activate it, go to your admin area, visit the aThemes Addons dashboard, search for the widget, and click on the switch to activate it. It will now be available in your Elementor interface.

Widget options

Calendar Data Section

  • Google API Key: Enter your Google API Key. Learn how to obtain your API key here.
  • Calendar ID: Enter your Calendar ID. Learn how to obtain your Calendar ID here.

Settings Section

  • Language: Select the language for the calendar from the dropdown options.
  • Initial View: Choose the default view for the calendar (Day, Week, Month, List).
  • 24-hour Time Format: Toggle to enable 24-hour time format.
  • First Day of the Week: Select the first day of the week (Sunday to Saturday).
  • Hide Past Events: Toggle to hide events that have already passed.
  • Hide Event Link: Toggle to hide the link to the event details.

Style tab

Customize the appearance of your Google Calendar under this tab. You have a variety of options to ensure the widget matches your website’s design and branding perfectly.

Calendar Style

  • Padding: Adjust the padding around the calendar.
  • Background Color: Set the background color of the calendar.
  • Text Color: Set the text color for the calendar.
  • Border Color: Set the border color of the calendar.
  • Border Width: Adjust the border width of the calendar.
  • Border Radius: Set the border radius for rounded corners.
  • Box Shadow: Add a shadow effect to the calendar.

Toolbar Style

  • Title Color: Set the color for the calendar title.
  • Title Typography: Adjust the typography for the calendar title.
  • Button Border Radius: Set the border radius for toolbar buttons.
  • Button Padding: Adjust the padding for toolbar buttons.
  • Button Typography: Customize the typography for toolbar buttons.
  • Button Colors (Normal, Hover, Active): Set the colors for toolbar buttons in normal, hover, and active states.

Table Header Style

  • Padding: Adjust the padding for table headers.
  • Typography: Customize the typography for table headers.
  • Color: Set the color for table headers.
  • Background Color: Set the background color for table headers.
  • Text Align: Align the text in table headers.

Table Cell Style

  • Padding: Adjust the padding for table cells.
  • Typography: Customize the typography for table cells.
  • Color: Set the color for table cells.
  • Today Color: Set the color for the current day cell.
  • Background Color: Set the background color for table cells.
  • Today Background: Set the background color for the current day cell.

Event Style

  • Typography: Customize the typography for event titles.
  • Padding: Adjust the padding for events.
  • Border Radius: Set the border radius for event blocks.
  • Colors (Normal, Hover): Set the colors for events in normal and hover states.

These style options ensure that your Google Calendar looks professional and integrates seamlessly with your site’s overall design.

Usage tips

  • Ensure your Google API Key and Calendar ID are correctly entered to display events.
  • Customize the calendar’s appearance to match your site’s design.
  • Use the “Hide Past Events” option to keep your calendar clean and focused on upcoming events.

Conclusion

The Google Calendar Widget is a powerful tool for displaying your events on your website. With extensive customization options, you can tailor the appearance and functionality to match your needs and provide an engaging user experience.