Skip Navigation

[Resolved] View with weekday filtering

This support ticket is created 3 years, 8 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 8 replies, has 2 voices.

Last updated by Waqar 3 years, 8 months ago.

Assisted by: Waqar.

Author
Posts
#1743895
Capture.PNG

I am trying to create a view that displays scheduling details for multiple people over a weeks time. So it will show a daily schedule from Friday to Thursday. Each person could have multiple assignments during that week, for example monday 6a-2p, Monday 2p-10p. I've already created a CRED form to enter each schedule in. What I'm struggling with is displaying the assignments in the day of the week (instead of just listing them all out in one big list).

I already tried https://toolset.com/forums/topic/how-to-filter-a-date-field-by-an-specific-day-of-the-week/#post-1124389 but that didn't seem to work.

How can 1) get the schedule entries to automatically display in the correct sections of the view (see screen shot) 2) I need to display multiple people at once who might have multiple assignments each week on different days. IOW, person 1, assignment 1, friday 2p-10p, assignment 2 10p-6a. Person 2, Tuesday, 6a-2p. etc...

#1744161

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Thank you for contacting us and I'd be happy to assist.

If I understand correctly, the view that you're referring to is at the page named "Schedule".
( page slug: /schedule/ )

The related view "Schedule View" seems to be set up correctly, and the only thing that needed fixing was that in the "Query Filter" settings, "Constant" was selected as a source.

I've updated it to use the shortcode attribute "ts", as suggested by Luo in the other ticket.

The view should work now to correctly show only the results where the "Work Date" field's day is equal to the current week's day, that has been passed in the view's shortcode attribute.

Can you please add some test "times" posts that have the "Work Date" field set as the current week's "Monday" and "Tuesday" and see if they show up correctly on the "Schedule" page, under the correct days?

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

#1744807

Fantastic Waqar. How can I change the formatting on this to more directly reflect the screenshot?

IOW, I'd like to display it more like a week view with the days of the week columns being FRI, SAT, SUN, MON, TUE, WED, THU and then the hours being worked below.

Thanks!

#1745163

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Thanks for the update and glad that it works.

To show the 7 instances of these views (for each day of the week) in equal-width columns, you can structure your page's content like this:


<div class="main-calendar-wrapper">
	<div class="calendar-item">
		<div class="calendar-item-head">FRI</div>
		<div class="calendar-item-body">[wpv-view name="schedule-view" cached="off" ts="[ts_day_week day='Friday']"]</div>
	</div>
	<div class="calendar-item">
		<div class="calendar-item-head">SAT</div>
		<div class="calendar-item-body">[wpv-view name="schedule-view" cached="off" ts="[ts_day_week day='Saturday']"]</div>
	</div>
	<div class="calendar-item">
		<div class="calendar-item-head">SUN</div>
		<div class="calendar-item-body">[wpv-view name="schedule-view" cached="off" ts="[ts_day_week day='Sunday']"]</div>
	</div>
	<div class="calendar-item">
		<div class="calendar-item-head">MON</div>
		<div class="calendar-item-body">[wpv-view name="schedule-view" cached="off" ts="[ts_day_week day='Monday']"]</div>
	</div>
	<div class="calendar-item">
		<div class="calendar-item-head">TUE</div>
		<div class="calendar-item-body">[wpv-view name="schedule-view" cached="off" ts="[ts_day_week day='Tuesday']"]</div>
	</div>
	<div class="calendar-item">
		<div class="calendar-item-head">WED</div>
		<div class="calendar-item-body">[wpv-view name="schedule-view" cached="off" ts="[ts_day_week day='Wednesday']"]</div>
	</div>
	<div class="calendar-item">
		<div class="calendar-item-head">THU</div>
		<div class="calendar-item-body">[wpv-view name="schedule-view" cached="off" ts="[ts_day_week day='Thursday']"]</div>
	</div>
</div>

The following custom CSS code should help in making this HTML structure turn into 7 column-grid:


.main-calendar-wrapper {
width: 100%;
overflow: hidden;
border: 1px solid;
display: flex;
}

.main-calendar-wrapper .calendar-item {
float: left;
width: 14.28%;
border-left: 1px solid;
overflow: hidden;
}

.main-calendar-wrapper .calendar-item:first-of-type {
border-left: 0px;
}

.main-calendar-wrapper .calendar-item .calendar-item-head {
font-weight: bold;
border-bottom: 1px solid;
}

To show the view's results ordered by the "Start Time" field, you can select it in the "Order by" option in the "Ascending" order.
( screenshot: hidden link )

regards,
Waqar

#1750439
Capture.PNG

That didn't quite work for me (see attached)

BTW - On an unrelated note I seem to have messed up the work we did on https://toolset.com/forums/topic/dynamic-field-values-from-cpt/ and I don't know how to fix it. could you please help (in another ticket)?

Thanks!

#1753659

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thanks for writing back.

I've checked the schedule page and the view for each day of the week is correctly showing in their respective column.
( just as can be seen in your screenshot too )

As the space for each week's column is limited, you'll need to change the output structure of your view "Schedule View" from table to regular unformatted text, since the table will require a lot more width.

If you're having difficulty in designing/structuring this complex layout on your own, it would be best to hire a professional from our list of recommended contractors:
https://toolset.com/contractors/

As for your note about the other ticket, I've re-opened it, so that you can share any follow-up questions through it.

#1757317

My issue is resolved now. Thank you!

#1757553

Sorry, I closed this prematurely. The days are not sorting properly. IOW, how do I get the filter to place the correct information in the correct day of the week?

Right now it is simply repeating the same information for every day of the week - over and over again.

But it should only place dates that are on a Friday under the Friday column, dates that fall on a Saturday in the Saturday column, etc...

#1758055

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

During troubleshooting, I noticed that the parent theme "Divi" is active on the website.

But the custom code functions including the one for the shortcode "ts_day_week" are all in the "functions.php" file in the child theme "Divi Child Theme".

As this child theme is not active, any custom code that you have placed in that "functions.php" file will have no effect on the website.

Please activate the "Divi Child Theme" from WP Admin -> Appearance -> Themes and then check the output of these views again.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.