Loop through hours of the day?

Loops & Logic
#1

@julia thanks again for providing this great snippet! Calendar - Loops & Logic.

I’m expanding on the calendar idea but attempting to build out a “time grid” view. I could have sworn that L&L can loop through time formatted in either 12 or 24hrs. From what it appears, looping through hours isn’t available yet or am I missing something?

thanks again for the calendar snippet!
Patrick

#2

Interesting question! I don’t think this is supported by the calendar loop, but I should be able to throw something together :slight_smile: I’ll let you know when I’ve come up with something

#3

Alright I went a little overboard here: Times of Day - Loops & Logic

So the core idea here is using <Loop time=24></Loop> to arbitrarily loop 24 times (once for each hour of the day). To start at 0:00 instead of 1:00 I used some math to subtract 1 from the current loop count <Math><Get loop=count /> - 1</Math>, and then a bit hackily fed the result into the format tag to turn it into a datetime value <Format date="Y-m-d H:i:s"><Field date date_format="Y-m-d" /> <Get index_to_hour />:00</Format>. This value could in theory be used with date conditionals to find posts that belong in each slot, but I haven’t actually populated the slots with any events yet (it may become complicated to place events that should fill half slots or multiple slots).

I also implemented a current time marker by testing whether the slot matches the current day and hour, using some math to convert minutes to a percentage <Math><Date format="i">now</Date> / 60 * 100</Math>% and using the value to style the top property of the marker div inline <div class="week-view__day__time-marker" style="top: {Get minute_to_percent}"></div>

#4

Whoa! Didn’t expect this so quickly! Thanks!

1 Like
#5

I used a timetable product before which used table row spans to “fill” slots. For example, a 4 hour slot would set row span of 4. I bet I can use CSS grid to do something similar.

1 Like
#6

@julia Quick semi-unrelated question. You linked to /snippets/times-of-day/

I was wondering if you have a collection of these “snippets” that could be output at /snippets/ maybe?

2 Likes
#7

Done! Now I’m going to have to start collecting screenshots and writing excerpts :upside_down_face: definitely a good suggestion. These were initially just meant to power the hint ducks on the homepage

1 Like
#8

Awesome! It can become a similar resource to this gist page for FacetWP, for example!

https://gist.facetwp.com/

1 Like
#9

Haha, I never even noticed the duck hints until now :rofl:

1 Like