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

31 days on a full width strip with default styling

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

Only show days forward from the selected day, showing only day and month

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;
}

The program of the coming 5 days. (Always the coming 5 days.)

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.

A long weekend in the future

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

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;
}