Do you want to customize date navigation and control how visitors select dates in your event calnedars?
The Events Calendar provides date navigation features such as Day View and Datepicker to help visitors to explore your events and select dates.
However, the built-in settings do not have many options when you need to customize these features for your website.
For example, if you run an event submission site and you want to restrict the datepicker so users can not submit outdated or incorrect events, or make Day View easier to navigate. These customizations are not available in the default settings.
In such cases, you need dedicated extensions that help to extend the default settings with additional customization and control options.
In this guide, you’ll learn about three extensions that help you customize Day View and Datepicker in The Events Calendar:
- Day Strip: Used to add a day strip or banner to Day View.
- Custom Datepicker Start Date: Used to customize the Datepicker and control its starting date.
- Datepicker jQuery Conflict: Used to resolve conflicts in the datepicker caused by JavaScript.
Now, let’s understand the functionality and usage of each extension.
What is Day Strip Extension?
The Day Strip extension for The Events Calendar adds a strip or banner to the Day view.
By default, users can navigate the Day View using the Datepicker or by using the Previous Day and Next Day buttons. With this extension, you can add a day strip that helps visitors quickly switch between nearby dates.
It adds a simple and convenient navigation option when visitors are looking for nearby dates and events.
Add Day Strip Navigation
Follow the steps below to add a Day Strip to your events calendar:
- Before getting started, make sure to install and activate the Day Strip Extension.
Once the extension is activated, you can access the settings from Events > Settings > Display > Calendar > Day Strip Extension Settings.
The extension will add the following Day Strip Extension Settings:
- Full Width Strip: With this setting, you can set the width of the day strip.
- Default: The Day strip will appear to the right of the datepicker.
- Full Width: The day strip will appear below the datepicker.
- Number of days to show: Set the number of days to show on the day strip. The minimum number is two.
- Behaviour: With this setting, you can choose the arrangement and movement of the day strip.
- Length of the day name: Set the length of the day name. For example, if it is set to ‘2’, the day name will appear as Mo, Tu, We, etc.
- Date format: Set the date format for your day strip.
- Month format: Set the month format for your day strip.
- Hide event marker: With this option, you can disable the blue dot event marker from the day strip.
Once you are satisfied with all the settings, click Save Changes.
[Note: It works on desktop and tablet, and the strip is automatically hidden on mobile.]
With these settings, you can add a Day Strip in your day view, and it will appear like this:
Customization of Day Strip
If you wish to further customize the appearance of the Day Strip, such as colors, font sizes, spacing, borders, and more, to match your website’s design, you can use the following CSS classes:
| CSS Class | What You Can Customize |
| .tribe-daystrip__container | The entire Day Strip container |
| .tribe-daystrip__day | Individual days in the Day Strip |
| .tribe-daystrip__day–past | Past days on the Day Strip |
| .tribe-daystrip__day–today | Today’s date on the Day Strip |
| .tribe-daystrip__day–future | Future days on the Day Strip |
| .tribe-daystrip__day–current | The currently selected day |
| .tribe-daystrip__day.has-event | A day that has events |
| .tribe-daystrip__day-name | The day name, such as Monday |
| .tribe-daystrip__date | The date number, such as 15 |
| .tribe-daystrip__month | The month name, such as Nov |
| .tribe-daystrip__event-icon | The event marker/icon shown for days with events |
Here is how a customized Day strip will appear:
What is Custom Datepicker Start Date Extension?
The Custom Datepicker Start Date extension lets you control the dates that users can select in the Datepicker.
You can set a minimum and maximum date range that gives you more control over date selection.
This extension is especially useful for community websites where thousands of users can submit events through the Datepicker.
With the extension is activated, administrators (with the “manage_options” capability) can still select any start date, while other users are restricted to the date range configured for the Datepicker.
Customize the Datepicker with Filter Hooks
The Custom Datepicker Start Date is a PHP-powered extension and provides you with filter hooks for customization. These hooks are mainly for developers or advanced WordPress users who are comfortable adding PHP code.
Before using these hooks, make sure that your site has the following server and plugins:
- PHP version 5.3 or newer
- WordPress version 4.5 or newer
- The Events Calendar
- Community Events (optional)
- Custom Datepicker Start Date
The extension provides the following Filter Hooks for customizing the datepicker:
| Filter hook | Purpose |
| tribe_ext_start_datepicker_cap_allowed_any_start_date | Allows specific users to select any date in the Datepicker, even when date restrictions are enabled. |
| tribe_ext_start_datepicker_min_date_interval | Sets the minimum date interval allowed for selecting the event start date. |
| tribe_ext_start_datepicker_max_date_interval | Sets the maximum date interval allowed for selecting the event start date. |
| tribe_ext_start_datepicker_time_zone | Modifies the time zone used by the Start Date Datepicker when determining available dates and times. |
| tribe_ext_start_datepicker_load_script_wp_admin | Controls whether the Datepicker script loads in the WordPress admin area. |
| tribe_ext_start_datepicker_load_script_ce_form | Controls whether the Start Date Datepicker script is loaded on the Community Events form. |
By using these hooks, you can create a custom datepicker for your website.
What is Fix for Datepicker jQuery Conflict Extension?
The Fix for Datepicker jQuery Conflict extension is designed to resolve Datepicker problems caused by conflicting JavaScript or jQuery code.
The Events Calendar uses JavaScript to make its Datepicker work. If another plugin or theme loads conflicting JavaScript or jQuery code on the same page, the Datepicker may become unresponsive or stop working correctly.
This extension provides a simple way to address that conflict.
Simply install and activate the Fix for Datepicker jQuery Conflict extension.
Once activated, it automatically fixes the Datepicker jQuery conflict, so you don’t need to add custom code or configure additional settings.
Extension Overview for Your Calendar
Each extension focuses on a different part of Day View or Datepicker functionality:
| Extension | What It Does | Customization |
| Day Strip | Adds a strip for navigating between nearby dates in Day View | Settings panel and CSS |
| Custom Datepicker Start Date | Controls the date range users can select | PHP filter hooks |
| Fix for Datepicker jQuery Conflict | Resolves Datepicker issues caused by JavaScript/jQuery conflicts | Automatic fix |
Managing events becomes much easier when users can quickly find the dates they need. With the right The Events Calendar datepicker extension, you can improve date navigation, customize the date selection experience, and fix common Datepicker issues without making the process complicated.
