Day View Date Navigation
This extension will add a day strip, a banner of days to your day view to give the website visitors another means of navigating between the days.
The strip will appear on the desktop and tablet viewport and will be automatically hidden on the mobile one.
It works well with the [tribe_events view=day]
shortcode when the date is not defined.
The day strip on the right with default settings
Settings
The extension gives you a number of options to control the looks and the behavior of the day strip. You will find the settings under Events > Settings > Display tab > Day Strip Extension Settings section. Let’s see what these are in detail.
Full width strip
By default this option is not enabled. The strip will appear next to the date picker on the right side of the page (see image above). If set to full width, then the day strip will appear below the date picker and will be stretched to 100% width of the calendar.
Number of days to show
It is what it says. You can choose how many days you would like to see altogether on the strip. It is best to specify an odd number that is bigger than 2. The default value is 9.
Behavior
- Selected day always in the middle of the strip
This is the default setting. The currently selected day is in the middle of the strip and allows the visitors to choose days before and after that day. - Only show days forward from the selected day
The selected day will be the leftmost day on the strip. This setup can be useful when you want to “hide” past events (although there are other ways to get past events to show up). - Show fixed number of days starting today
Shows the defined number of days starting with today. Today’s date will always be the leftmost day on the strip. (The days are fixed, unlike in the previous case.) This setting can be useful for an event that lasts for a set number of days. - Show a fixed number of days starting on a specific date
The same as the one above with a defined date. Note, the calendar will not jump automatically to the selected day. - Current week (forces 7 days)
It always shows the days of the current week. The Number of days setting is omitted. The first day of the week will be the day that is set up in WordPress under Settings > General > Week Starts On.
Start date
This is where you can set the start date for the Show a fixed number of days starting on a specific date setting.
Length of the day name
You can define how long the name day should be. For example:
2
will show Mo, Tu, We etc.3
will show Mon, Tue, Wed etc.- A setting of
0
(or empty value) will hide the day names - A value of
-1
will show the full day name, like Monday, Tuesday, Wednesday etc.
Date format
Allows you to set the format of the day part of the date. It accepts the date format options available to the PHP date()
function.
j
– Day of the month without leading zeros (1 to 31)d
– Day of the month, 2 digits with leading zeros (01 to 31)jS
– English ordinal suffix for the day of the month, 2 characters (1st to 31st)0
(zero or empty) – Hides the day part of the date
Month format
Allows you to set the format of the day part of the date. It accepts the date format options available to the PHP date()
function.
F
– A full textual representation of a month (January through December)m
– Numeric representation of a month, with leading zeros (01 through 12)M
– A short textual representation of a month, three letters (Jan through Dec)n
– Numeric representation of a month, without leading zeros (1 through 12)0
(zero or empty) – Hides the month part of the date
Hide event marker
Enabling this option will hide the blue dot event marker from the day strip.
Customization
The day strip can be further customized with the help of CSS. The following CSS classes can be used:
.tribe-daystrip-container
– The day strip container.tribe-daystrip-day
– Days on the strip.tribe-daystrip-past
– Past days on the strip.tribe-daystrip-today
– Today’s day on the strip.tribe-daystrip-future
– Future days on the strip.tribe-daystrip-current
– The currently selected day on the strip.tribe-daystrip-day.has-event
– A day on the strip that has events.tribe-daystrip-dayname
– The day name part of the date (e.g. Monday).tribe-daystrip-date
– The day part of the date (e.g. 15).tribe-daystrip-month
– The month part of the date (e.g. Nov).tribe-events-calendar-day__daystrip-events-icon--event
– The event marker
Examples
A full month (31 days) on a full width strip with default styling
- Full width strip: checked
- Number of days to show:
31
- Functionality: Selected day always in the middle of the strip
- Length of the day name:
2
- Date format:
j
- Month format:
0
(zero or empty) - Hide event marker: not checked
Two weeks forward from the selected day
- Full width strip: checked
- Number of days to show:
14
- Functionality: Only show days forward from the selected day
- Length of day name:
0
(zero or empty) - Date format:
j
- Month format:
F
- Hide event marker: checked
Showing a fixed number of days (5) starting today with a bit of styling.
- Full width strip: checked
- Number of days to show:
5
- Functionality: Show a fixed number of days starting today
- Lenght of the day name:
0
(zero or empty) - Date format:
j
- Month format:
M
- CSS used:
.tribe-daystrip-date {
font-size: 2em;
}
.tribe-daystrip-month {
text-transform: uppercase full-width;
font-weight: bold;
font-size: 0.7em;
}
A 3-day weekend in November
- Full width strip: non checked
- Number of days to show:
3
- Functionality: Show a fixed number of days starting on a specific date
- Start date:
2020-11-20
- Length of day name:
3
- Date format:
j
- Month format:
M
- Note: the day view will not jump automatically to the starting day (November 20). This feature might come in a later version.
Days of the week
- Full width strip: checked
- Functionality: Current week (forces 7 days)
- Length of day name:
-1
- Date format:
0
(zero or empty) - Month format:
0
(zero or empty) - Hide event marker: checked
- CSS used:
.tribe-daystrip-day.tribe-daystrip-day {
margin: 10px !important;
border-radius: 20px;
background-color: #334aff;
color: #fff;
}
.tribe-events .tribe-daystrip-day.tribe-daystrip-past a
.tribe-events .tribe-daystrip-day a {
color: #fff;
}
This week variation
In this one I used a trick and used the month in the Date format and the day in Month format to switch them up. And some more styling.
- Full width strip: checked
- Functionality: Current week (forces 7 days)
- Length of day name:
-1
- Date format:
F
(This will show the full month name.) - Month format:
d
(This will show the day of the month with 2 digits.) - Hide event marker: checked
- CSS used:
.tribe-daystrip-day .tribe-daystrip-dayname {
border-bottom: 3px solid #334aff;
padding-bottom: 3px;
margin-bottom: 3px;
}
.tribe-events-header .tribe-daystrip-container .tribe-daystrip-day {
border: 1px solid #eee;
margin: 0 5px;
border-radius: 5px;
}
.tribe-daystrip-day.tribe-daystrip-current {
background-color: #334aff;
color: #fff;
}
.tribe-daystrip-day.tribe-daystrip-current a {
color: #fff;
}
.tribe-daystrip-day.tribe-daystrip-current .tribe-daystrip-dayname {
border-bottom-color: #fff;
}
Changelog
- Version 1.0.1
- April 14, 2021
- Fix – Adjusted the template directory to the correct one.
- Version 1.0.0
- October 16, 2020
- Initial release