Weekly Planner
Preview
Site time: 2025-04-20 02:23:25
12 am
1 am
2 am
3 am
4 am
5 am
6 am
7 am
8 am
9 am
10 am
11 am
12 pm
1 pm
2 pm
3 pm
4 pm
5 pm
6 pm
7 pm
8 pm
9 pm
10 pm
11 pm
Mon
14
var dump looped_date: 2025-04-14
var dump slot_date: 2025-04-14 00:00:00
var dump slot_date: 2025-04-14 01:00:00
var dump slot_date: 2025-04-14 02:00:00
var dump slot_date: 2025-04-14 03:00:00
var dump slot_date: 2025-04-14 04:00:00
var dump slot_date: 2025-04-14 05:00:00
var dump slot_date: 2025-04-14 06:00:00
var dump slot_date: 2025-04-14 07:00:00
var dump slot_date: 2025-04-14 08:00:00
var dump slot_date: 2025-04-14 09:00:00
var dump slot_date: 2025-04-14 10:00:00
var dump slot_date: 2025-04-14 11:00:00
var dump slot_date: 2025-04-14 12:00:00
var dump slot_date: 2025-04-14 13:00:00
var dump slot_date: 2025-04-14 14:00:00
var dump slot_date: 2025-04-14 15:00:00
var dump slot_date: 2025-04-14 16:00:00
var dump slot_date: 2025-04-14 17:00:00
var dump slot_date: 2025-04-14 18:00:00
var dump slot_date: 2025-04-14 19:00:00
var dump slot_date: 2025-04-14 20:00:00
var dump slot_date: 2025-04-14 21:00:00
var dump slot_date: 2025-04-14 22:00:00
var dump slot_date: 2025-04-14 23:00:00
Tue
15
var dump looped_date: 2025-04-15
var dump slot_date: 2025-04-15 00:00:00
var dump slot_date: 2025-04-15 01:00:00
var dump slot_date: 2025-04-15 02:00:00
var dump slot_date: 2025-04-15 03:00:00
var dump slot_date: 2025-04-15 04:00:00
var dump slot_date: 2025-04-15 05:00:00
var dump slot_date: 2025-04-15 06:00:00
var dump slot_date: 2025-04-15 07:00:00
var dump slot_date: 2025-04-15 08:00:00
var dump slot_date: 2025-04-15 09:00:00
var dump slot_date: 2025-04-15 10:00:00
var dump slot_date: 2025-04-15 11:00:00
var dump slot_date: 2025-04-15 12:00:00
var dump slot_date: 2025-04-15 13:00:00
var dump slot_date: 2025-04-15 14:00:00
var dump slot_date: 2025-04-15 15:00:00
var dump slot_date: 2025-04-15 16:00:00
var dump slot_date: 2025-04-15 17:00:00
var dump slot_date: 2025-04-15 18:00:00
var dump slot_date: 2025-04-15 19:00:00
var dump slot_date: 2025-04-15 20:00:00
var dump slot_date: 2025-04-15 21:00:00
var dump slot_date: 2025-04-15 22:00:00
var dump slot_date: 2025-04-15 23:00:00
Wed
16
var dump looped_date: 2025-04-16
var dump slot_date: 2025-04-16 00:00:00
var dump slot_date: 2025-04-16 01:00:00
var dump slot_date: 2025-04-16 02:00:00
var dump slot_date: 2025-04-16 03:00:00
var dump slot_date: 2025-04-16 04:00:00
var dump slot_date: 2025-04-16 05:00:00
var dump slot_date: 2025-04-16 06:00:00
var dump slot_date: 2025-04-16 07:00:00
var dump slot_date: 2025-04-16 08:00:00
var dump slot_date: 2025-04-16 09:00:00
var dump slot_date: 2025-04-16 10:00:00
var dump slot_date: 2025-04-16 11:00:00
var dump slot_date: 2025-04-16 12:00:00
var dump slot_date: 2025-04-16 13:00:00
var dump slot_date: 2025-04-16 14:00:00
var dump slot_date: 2025-04-16 15:00:00
var dump slot_date: 2025-04-16 16:00:00
var dump slot_date: 2025-04-16 17:00:00
var dump slot_date: 2025-04-16 18:00:00
var dump slot_date: 2025-04-16 19:00:00
var dump slot_date: 2025-04-16 20:00:00
var dump slot_date: 2025-04-16 21:00:00
var dump slot_date: 2025-04-16 22:00:00
var dump slot_date: 2025-04-16 23:00:00
Thu
17
var dump looped_date: 2025-04-17
var dump slot_date: 2025-04-17 00:00:00
var dump slot_date: 2025-04-17 01:00:00
var dump slot_date: 2025-04-17 02:00:00
var dump slot_date: 2025-04-17 03:00:00
var dump slot_date: 2025-04-17 04:00:00
var dump slot_date: 2025-04-17 05:00:00
var dump slot_date: 2025-04-17 06:00:00
var dump slot_date: 2025-04-17 07:00:00
var dump slot_date: 2025-04-17 08:00:00
var dump slot_date: 2025-04-17 09:00:00
var dump slot_date: 2025-04-17 10:00:00
var dump slot_date: 2025-04-17 11:00:00
var dump slot_date: 2025-04-17 12:00:00
var dump slot_date: 2025-04-17 13:00:00
var dump slot_date: 2025-04-17 14:00:00
var dump slot_date: 2025-04-17 15:00:00
var dump slot_date: 2025-04-17 16:00:00
var dump slot_date: 2025-04-17 17:00:00
var dump slot_date: 2025-04-17 18:00:00
var dump slot_date: 2025-04-17 19:00:00
var dump slot_date: 2025-04-17 20:00:00
var dump slot_date: 2025-04-17 21:00:00
var dump slot_date: 2025-04-17 22:00:00
var dump slot_date: 2025-04-17 23:00:00
Fri
18
var dump looped_date: 2025-04-18
var dump slot_date: 2025-04-18 00:00:00
var dump slot_date: 2025-04-18 01:00:00
var dump slot_date: 2025-04-18 02:00:00
var dump slot_date: 2025-04-18 03:00:00
var dump slot_date: 2025-04-18 04:00:00
var dump slot_date: 2025-04-18 05:00:00
var dump slot_date: 2025-04-18 06:00:00
var dump slot_date: 2025-04-18 07:00:00
var dump slot_date: 2025-04-18 08:00:00
var dump slot_date: 2025-04-18 09:00:00
var dump slot_date: 2025-04-18 10:00:00
var dump slot_date: 2025-04-18 11:00:00
var dump slot_date: 2025-04-18 12:00:00
var dump slot_date: 2025-04-18 13:00:00
var dump slot_date: 2025-04-18 14:00:00
var dump slot_date: 2025-04-18 15:00:00
var dump slot_date: 2025-04-18 16:00:00
var dump slot_date: 2025-04-18 17:00:00
var dump slot_date: 2025-04-18 18:00:00
var dump slot_date: 2025-04-18 19:00:00
var dump slot_date: 2025-04-18 20:00:00
var dump slot_date: 2025-04-18 21:00:00
var dump slot_date: 2025-04-18 22:00:00
var dump slot_date: 2025-04-18 23:00:00
Sat
19
var dump looped_date: 2025-04-19
var dump slot_date: 2025-04-19 00:00:00
var dump slot_date: 2025-04-19 01:00:00
var dump slot_date: 2025-04-19 02:00:00
var dump slot_date: 2025-04-19 03:00:00
var dump slot_date: 2025-04-19 04:00:00
var dump slot_date: 2025-04-19 05:00:00
var dump slot_date: 2025-04-19 06:00:00
var dump slot_date: 2025-04-19 07:00:00
var dump slot_date: 2025-04-19 08:00:00
var dump slot_date: 2025-04-19 09:00:00
var dump slot_date: 2025-04-19 10:00:00
var dump slot_date: 2025-04-19 11:00:00
var dump slot_date: 2025-04-19 12:00:00
var dump slot_date: 2025-04-19 13:00:00
var dump slot_date: 2025-04-19 14:00:00
var dump slot_date: 2025-04-19 15:00:00
var dump slot_date: 2025-04-19 16:00:00
var dump slot_date: 2025-04-19 17:00:00
var dump slot_date: 2025-04-19 18:00:00
var dump slot_date: 2025-04-19 19:00:00
var dump slot_date: 2025-04-19 20:00:00
var dump slot_date: 2025-04-19 21:00:00
var dump slot_date: 2025-04-19 22:00:00
var dump slot_date: 2025-04-19 23:00:00
Sun
20
var dump looped_date: 2025-04-20
var dump slot_date: 2025-04-20 00:00:00
var dump slot_date: 2025-04-20 01:00:00
var dump slot_date: 2025-04-20 02:00:00
var dump slot_date: 2025-04-20 03:00:00
var dump slot_date: 2025-04-20 04:00:00
var dump slot_date: 2025-04-20 05:00:00
var dump slot_date: 2025-04-20 06:00:00
var dump slot_date: 2025-04-20 07:00:00
var dump slot_date: 2025-04-20 08:00:00
var dump slot_date: 2025-04-20 09:00:00
var dump slot_date: 2025-04-20 10:00:00
var dump slot_date: 2025-04-20 11:00:00
var dump slot_date: 2025-04-20 12:00:00
var dump slot_date: 2025-04-20 13:00:00
var dump slot_date: 2025-04-20 14:00:00
var dump slot_date: 2025-04-20 15:00:00
var dump slot_date: 2025-04-20 16:00:00
var dump slot_date: 2025-04-20 17:00:00
var dump slot_date: 2025-04-20 18:00:00
var dump slot_date: 2025-04-20 19:00:00
var dump slot_date: 2025-04-20 20:00:00
var dump slot_date: 2025-04-20 21:00:00
var dump slot_date: 2025-04-20 22:00:00
var dump slot_date: 2025-04-20 23:00:00
<Set current_date><Date format="Y-m-d">today</Date></Set>
<Set current_hour><Date format="H">now</Date></Set>
<Set minute_to_percent><Math><Date format="i">now</Date> / 60 * 100</Math>%</Set>
<pre>Site time: <Date format="Y-m-d H:i:s">now</Date></pre><br />
<Loop type=calendar_week>
<div class="week-view">
<div class="week-view__labels">
<Loop times=24>
<div class="week-view__labels__label">
<span class="week-view__labels__label__inner">
<Format date="g a"><Math><Get loop=count /> - 1</Math>:00</Format>
</span>
</div>
</Loop>
</div>
<Loop type=calendar_day week="{Field week}">
<Set is_today><If variable=current_date value="{Field date date_format='Y-m-d'}">true</If></Set>
<Set looped_date><Field date date_format='Y-m-d' /></Set>
<div class="week-view__day">
<div class="week-view__day__heading {If variable=is_today}week-view__day__heading--today{/If}">
<div class="week-view__day__heading__weekday">
<Field short_name />
</div>
<div class="week-view__day__heading__date">
<Field day />
</div>
</div>
<div>
<div class="week-view__day__slot--all-day">
<Note>All day events here</Note>
</div>
<Loop times=24>
<Set index_to_hour><Math><Get loop=count /> - 1</Math></Set>
<Set slot_date><Format date="Y-m-d H:i:s"><Get looped_date /> <Get index_to_hour />:00</Format></Set>
<div class="week-view__day__slot">
<Note>Inline Events Here</Note>
<If variable=is_today>
<If variable=current_hour value="{Get index_to_hour}"><div class="week-view__day__time-marker" style="top: {Get minute_to_percent}"></div></If>
</If>
</div>
</Loop>
</div>
</div>
</Loop>
</div>
</Loop>
.week-view {
display: grid;
grid-template-columns: max-content repeat(7, 1fr);
&__labels {
padding-top: 80px;
&__label {
min-height: 50px;
display: flex;
align-items: flex-end;
justify-content: flex-end;
text-transform: uppercase;
font-size: 14px;
line-height: 1.2;
&__inner {
transform: translateY(50%);
display: flex;
align-items: center;
gap: 0.5em;
&::after {
content: "";
display: block;
width: 0.8em;
height: 1px;
background-color: #eee;
}
}
}
}
&__day__heading {
text-align: center;
min-height: 80px;
border-bottom: 1px solid #eee;
&__date {
width: 1.8em;
height: 1.8em;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 100%;
}
&__weekday {
text-transform: uppercase;
font-size: 14px;
line-height: 1.2;
}
&--today {
.week-view__day__heading__date {
background-color: #002deb;
color: #fff;
}
}
}
[class^="week-view__day__slot"] {
min-height: 50px;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
position: relative;
}
.week-view__labels + .week-view__day [class^="week-view__day__slot"] {
border-left: 1px solid #eee;
}
.week-view__day__time-marker {
display: block;
pointer-events: none;
height: 2px;
transform: translateY(1px);
background-color: red;
position: absolute;
left: -6px;
right: 0;
&::before {
content: "";
width: 12px;
height: 12px;
border-radius: 100%;
display: block;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color: red;
}
}
}