Turn Your Minimum Efforts Into Maximum Results
  • Products
      Explore package advantages
  • Support
  • Blog
  • Contact

Table Of Contents

Booked Calendar Widget by Element Pack

How to Use Booked Calendar Widget

The Booked Calendar widget is a smart tool that notes down the important date you mark for it. Here, your visitors can fix an appointment time that you have made using this widget. It’s handy and easy to use.

To use this easy-to-use widget effectively, you need to know how it works. Let me give you a complete guide to it!

Installing Booked Calendar Widget

installing Booked Calendar Widget by Element Pack

Go to WordPress Dashboard> Element Pack> 3rd Party Widgets

There, you can see the Elementor Booked Calendar widget in the list. Click on the download button on the box and it will automatically install the widget.

To Insert Widget

Inserting the widget is just a matter of drag and drop. However, click and hold on the widget icon from the menu and drag the calendar widget to the drop point. Follow the picture above.

Content Tab

Using the Content tab, you can basically make a layout of a particular part of the website.


Go to Content Tab> Layout

From the first section Layout, you can change the date, calendar size, and layout of the calendar. There is a switcher, turning it on will make the calendar accessible by members only. The layout is set to Default.

When you change the layout to List, the booked calendar will look like this.

Moreover, if you change the booked calendar widget size to Small for the List layout, the appointment buttons will appear as full-width.

Note that, the Default layout and the List layout both have a different set of sections in the Style Tab.

Style Tab (Default Layout)

Now, time for some Style. In this Style tab, you will have more options to create your unique Booked Calendar widget as you like. Let’s have a look.


Go to Style Tab> Header

You can change the color of the header section and border.


Go to Style Tab> Date

With this section, you can change the colors of the parts in the main body of the calendar.


Go to Style Tab> Appointments

When you click on a date, it will show the appointment message box. In this section, you can edit the color of the appointment message box.

Style Tab (List Layout)

Now let’s explore the section of the style tab.


Go to Style Tab> Heading

Here, you can change the color and typography of the heading.


Go to Style Tab> Time

In this section, you can change the color of text and icon as well as the typography of the times.

Navigation Button

Go to Style Tab> Navigation button

This section lets you customize the navigation button. You change its color, background, border, etc.

Appointment Button

Go to Style Tab> Appointment Button

In this section, you can change the appearance of the appointment button.


Go to Style Tab> Additional

Lastly, you can customize the small calendar button at the top-right corner of the calendar. Also, you can change the row borders’ color and width. Clicking on the calendar button will show you a mini-sized calendar. You can pick any date from there.

Video Assist

Well done. Seems you have learned the whole thing and how it works. It is easy and fun. Watch Video Assist and to get more in-depth ideas about the usage of the Booked Calendar widget, take a tour to the demo page.

[Note: on-page video link]

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.

Subscribe to newsletter

Get Tips & Tricks, Updates, Fresh Blogs & Offers.
Join Now

Join Thousands of Happy Users

Get Tips & Tricks, Updates, Fresh Blogs & Offers.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge