The Event calendar widget allows you to display the schedule of the day, week, or month by switching tabs. Navigate to the required data easily via arrows. There are can be used the Events post type (created via admin) or custom events created via widget settings. Manage a layout of the event and speaker by adding/deleting the display elements. Hover a calendar date to see the event details The style of each detail can be customized according to the requirements and design of the site.
For further work, you need Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content Tab
In the Content section, you can manage basic settings of the Event calendar widget such as time period and format, event types, layouts and a lot of other settings.
General
Time format
Select the time format that will be displayed on the calendar and also in the event tooltip: AM/PM or 24 Hour. The option is not available when the “Custom events” toggle is enabled.
Include event types
Select the categories of events you want to display on the calendar. To create new categories go to Dashboard>Bookinger>Category. The option is not available when the “Custom events” toggle is enabled.
Time periods
Select periods to be displayed in the calendar on different tabs: Month, Week, Day.
Show Title
The toggle to enable/disable the title display of the Event calendar block. The option also allows you to enter the title text and align it.
Info popup content alignment
Specify the content alignment in the event popup tooltip: Left, Right, Center.
Time periods buttons alignment
Specify the text alignment in the period buttons: Left, Right, Center.
Custom events
The option allows you to create custom events instead of using already created posts through the dashboard. When the toggle is enabled a new “Custom events” section with settings appears where contents can be created.
Show button
The toggle to enable/disable the button below the calendar. When the option is enabled a new “Button” section appears for the advanced settings.
Short event view
The option allows you to enable a short display of events on the calendar.
Event layout
Section for managing event layout elements. Add, remove or copy each element and customize it to suit your needs.
Click “Add Item” button and manage each of the fields.
- Event layout – select one of the available elements to display in the layout: Title, Image, Description, Start date, End date, Type, Website, Event price, Event price currency.
- Inline block – the toggle to make the element inline.
- Layout caption – enter the caption for the item.
- Show icon – the toggle to enable/disable an icon for the item. When the icon is enabled you can choose the icon from the library and set icon spacing, size and position.
Speaker layout
The Section for managing speaker layout elements. Add, remove or copy each element and customize it to suit your needs.
Click “Add Item” button and manage each of the fields.
Speaker layout – select one of the available elements to display in the layout: Avatar, Name, Specialities, Email, Phone, Social link 1, Social link 2, Social link 3, Additional information.
Inline block – the toggle to make the element inline.
Layout caption – enter the caption for the item.
Show icon – the toggle to enable/disable an icon for the item. When the icon is enabled you can choose the icon from the library and set icon spacing, size and position.
Custom events
The section allows you to create custom events and speakers from the widget settings. It is available when the Custom events toggle in the General section is enabled.
Event
Click “Add Item” button and fill in each of the fields to create a new event.
- Event name – text field for entering the name of the event.
- Choose event image – select an event image from the media library or upload a new one.
- With speaker – the toggle to enable/disable the Speaker for the event. When the option is enabled a new Speaker tab with settings is added.
- Event type – text field for entering the event type.
- Repeated event – the toggle to enable/disable repeat period for the event. The option allows you to set the repeat Every day, Every month, Every year
- Event start date – specify the start date of the event.
- Event end date – specify the end date of the event.
- Paid event – the toggle to make the event payable and set the price.
- Event description – the field with a visual and text editor for entering an event description.
 |  |
speaker
- Speaker name – text field for entering the name of the speaker.
- Choose avatar – select an image for the speaker avatar from the media library or upload a new one.
- Speaker email – enter the email address of the current speaker.
- Speaker speciality – enter the email address of the current speaker.
- Speaker phone – enter the phone of the current speaker.
- Social link name – enter the name of the social network, the link to which will be entered below
- Social link – enter the social network link whose name is entered above.
- Speaker additional information – the field with a visual and text editor for entering information about the speaker.
Switch month buttons
- Previous button text – enter the text for the previous button.
- Previous button icon – select the icon for the previous button navigation from the library or upload your own icon in SVG format.
- Previous icon position – select the icon position of the previous navigation button: Before, After, Above left, Above center, Above right, Under left, Under center, Under right.
- Next button text – enter the text for the next button.
- Next button icon – select the icon for the next button navigation from the library or upload your own icon in SVG format.
- Next icon position – select the icon position of the next navigation button: Before, After, Above left, Above center, Above right, Under left, Under center, Under right.
Button
- Button link text – enter the text for the next button.
- Link – paste the link for the button
- Button link alignment – manage the current button alignment (left, center, right). It can be specified for different devices.
- Button icon – select the icon for the button from the library or upload your own icon in SVG format.
- Icon position – select the icon position of the button: Before, After, Above left, Above center, Above right, Under left, Under center, Under right.
Style tab
On the Custom fields widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.
Calendar title/Calendar month
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The element settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Event block/Calendar weekdays
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The element settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Calendar cell
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER/TODAY DATE
The element settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Event quantity color – specify the font color and opacity of the number that displays the quantity of events on a certain day.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Time periods
- Width – specify the width of the current element for desktops, tablets, or phones using the slider.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER/TODAY DATE
The element settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Month wrapper/Time period buttons wrapper
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
NORMAL/HOVER
The element settings for different states.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Time periods buttons
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Space between – set the space between the buttons for desktops, tablets, or phones using the slider.
- Width – specify the width of the current element for desktops, tablets, or phones using the slider.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER/ACTIVE
The element settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Next month button/Previous month button
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Icon spacing – the setting allows managing the spacing between text and button icon in different units(px, em, %) for desktops, tablets, or phones.
- Width – specify the width of the current element using the slider.
- Icon size – specify the icon size of the button via slider for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The element settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Icon Color – specify the icon color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Button link
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Icon size – specify the icon size of the button via slider for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The element settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Icon Color – specify the icon color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Info popup
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Offset x – specify the offset of the current element along the X-axis using the slider. This can be configured for different devices separately.
- Offset y – specify the offset of the current element along the Y-axis using the slider. This can be configured for different devices separately.
- Width – specify the width of the current element for desktops, tablets, or phones using the slider.
NORMAL/HOVER
The element settings for different states.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Info popup event image/Info popup event speaker avatar
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Image height – specify the height of the image in different units(px, %) using the slider.
- Image width – specify the width of the image in different units(px, %) using the slider.
NORMAL/HOVER
The element settings for different states.
- Icon Color – specify the icon color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Info popup event name/Info popup event type/Info popup event description/Info popup event start date/Info popup event end date/Info popup event website/Info popup event price/Info popup event currency/Info popup event speaker name/Info popup event speaker phone/Info popup event speaker additional information/Info popup event speaker specialities/Info popup event speaker email/Info popup event speaker social link
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The element settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Icon Color – specify the icon color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Advanced Tab
The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
