Weekly Planner
Preview
Site time: 2023-06-08 08:44:32
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
5
var dump looped_date: 2023-06-05
var dump slot_date: 2023-06-05 00:00:00
var dump slot_date: 2023-06-05 01:00:00
var dump slot_date: 2023-06-05 02:00:00
var dump slot_date: 2023-06-05 03:00:00
var dump slot_date: 2023-06-05 04:00:00
var dump slot_date: 2023-06-05 05:00:00
var dump slot_date: 2023-06-05 06:00:00
var dump slot_date: 2023-06-05 07:00:00
var dump slot_date: 2023-06-05 08:00:00
var dump slot_date: 2023-06-05 09:00:00
var dump slot_date: 2023-06-05 10:00:00
var dump slot_date: 2023-06-05 11:00:00
var dump slot_date: 2023-06-05 12:00:00
var dump slot_date: 2023-06-05 13:00:00
var dump slot_date: 2023-06-05 14:00:00
var dump slot_date: 2023-06-05 15:00:00
var dump slot_date: 2023-06-05 16:00:00
var dump slot_date: 2023-06-05 17:00:00
var dump slot_date: 2023-06-05 18:00:00
var dump slot_date: 2023-06-05 19:00:00
var dump slot_date: 2023-06-05 20:00:00
var dump slot_date: 2023-06-05 21:00:00
var dump slot_date: 2023-06-05 22:00:00
var dump slot_date: 2023-06-05 23:00:00
Tue
6
var dump looped_date: 2023-06-06
var dump slot_date: 2023-06-06 00:00:00
var dump slot_date: 2023-06-06 01:00:00
var dump slot_date: 2023-06-06 02:00:00
var dump slot_date: 2023-06-06 03:00:00
var dump slot_date: 2023-06-06 04:00:00
var dump slot_date: 2023-06-06 05:00:00
var dump slot_date: 2023-06-06 06:00:00
var dump slot_date: 2023-06-06 07:00:00
var dump slot_date: 2023-06-06 08:00:00
var dump slot_date: 2023-06-06 09:00:00
var dump slot_date: 2023-06-06 10:00:00
var dump slot_date: 2023-06-06 11:00:00
var dump slot_date: 2023-06-06 12:00:00
var dump slot_date: 2023-06-06 13:00:00
var dump slot_date: 2023-06-06 14:00:00
var dump slot_date: 2023-06-06 15:00:00
var dump slot_date: 2023-06-06 16:00:00
var dump slot_date: 2023-06-06 17:00:00
var dump slot_date: 2023-06-06 18:00:00
var dump slot_date: 2023-06-06 19:00:00
var dump slot_date: 2023-06-06 20:00:00
var dump slot_date: 2023-06-06 21:00:00
var dump slot_date: 2023-06-06 22:00:00
var dump slot_date: 2023-06-06 23:00:00
Wed
7
var dump looped_date: 2023-06-07
var dump slot_date: 2023-06-07 00:00:00
var dump slot_date: 2023-06-07 01:00:00
var dump slot_date: 2023-06-07 02:00:00
var dump slot_date: 2023-06-07 03:00:00
var dump slot_date: 2023-06-07 04:00:00
var dump slot_date: 2023-06-07 05:00:00
var dump slot_date: 2023-06-07 06:00:00
var dump slot_date: 2023-06-07 07:00:00
var dump slot_date: 2023-06-07 08:00:00
var dump slot_date: 2023-06-07 09:00:00
var dump slot_date: 2023-06-07 10:00:00
var dump slot_date: 2023-06-07 11:00:00
var dump slot_date: 2023-06-07 12:00:00
var dump slot_date: 2023-06-07 13:00:00
var dump slot_date: 2023-06-07 14:00:00
var dump slot_date: 2023-06-07 15:00:00
var dump slot_date: 2023-06-07 16:00:00
var dump slot_date: 2023-06-07 17:00:00
var dump slot_date: 2023-06-07 18:00:00
var dump slot_date: 2023-06-07 19:00:00
var dump slot_date: 2023-06-07 20:00:00
var dump slot_date: 2023-06-07 21:00:00
var dump slot_date: 2023-06-07 22:00:00
var dump slot_date: 2023-06-07 23:00:00
Thu
8
var dump looped_date: 2023-06-08
var dump slot_date: 2023-06-08 00:00:00
var dump slot_date: 2023-06-08 01:00:00
var dump slot_date: 2023-06-08 02:00:00
var dump slot_date: 2023-06-08 03:00:00
var dump slot_date: 2023-06-08 04:00:00
var dump slot_date: 2023-06-08 05:00:00
var dump slot_date: 2023-06-08 06:00:00
var dump slot_date: 2023-06-08 07:00:00
var dump slot_date: 2023-06-08 08:00:00
var dump slot_date: 2023-06-08 09:00:00
var dump slot_date: 2023-06-08 10:00:00
var dump slot_date: 2023-06-08 11:00:00
var dump slot_date: 2023-06-08 12:00:00
var dump slot_date: 2023-06-08 13:00:00
var dump slot_date: 2023-06-08 14:00:00
var dump slot_date: 2023-06-08 15:00:00
var dump slot_date: 2023-06-08 16:00:00
var dump slot_date: 2023-06-08 17:00:00
var dump slot_date: 2023-06-08 18:00:00
var dump slot_date: 2023-06-08 19:00:00
var dump slot_date: 2023-06-08 20:00:00
var dump slot_date: 2023-06-08 21:00:00
var dump slot_date: 2023-06-08 22:00:00
var dump slot_date: 2023-06-08 23:00:00
Fri
9
var dump looped_date: 2023-06-09
var dump slot_date: 2023-06-09 00:00:00
var dump slot_date: 2023-06-09 01:00:00
var dump slot_date: 2023-06-09 02:00:00
var dump slot_date: 2023-06-09 03:00:00
var dump slot_date: 2023-06-09 04:00:00
var dump slot_date: 2023-06-09 05:00:00
var dump slot_date: 2023-06-09 06:00:00
var dump slot_date: 2023-06-09 07:00:00
var dump slot_date: 2023-06-09 08:00:00
var dump slot_date: 2023-06-09 09:00:00
var dump slot_date: 2023-06-09 10:00:00
var dump slot_date: 2023-06-09 11:00:00
var dump slot_date: 2023-06-09 12:00:00
var dump slot_date: 2023-06-09 13:00:00
var dump slot_date: 2023-06-09 14:00:00
var dump slot_date: 2023-06-09 15:00:00
var dump slot_date: 2023-06-09 16:00:00
var dump slot_date: 2023-06-09 17:00:00
var dump slot_date: 2023-06-09 18:00:00
var dump slot_date: 2023-06-09 19:00:00
var dump slot_date: 2023-06-09 20:00:00
var dump slot_date: 2023-06-09 21:00:00
var dump slot_date: 2023-06-09 22:00:00
var dump slot_date: 2023-06-09 23:00:00
Sat
10
var dump looped_date: 2023-06-10
var dump slot_date: 2023-06-10 00:00:00
var dump slot_date: 2023-06-10 01:00:00
var dump slot_date: 2023-06-10 02:00:00
var dump slot_date: 2023-06-10 03:00:00
var dump slot_date: 2023-06-10 04:00:00
var dump slot_date: 2023-06-10 05:00:00
var dump slot_date: 2023-06-10 06:00:00
var dump slot_date: 2023-06-10 07:00:00
var dump slot_date: 2023-06-10 08:00:00
var dump slot_date: 2023-06-10 09:00:00
var dump slot_date: 2023-06-10 10:00:00
var dump slot_date: 2023-06-10 11:00:00
var dump slot_date: 2023-06-10 12:00:00
var dump slot_date: 2023-06-10 13:00:00
var dump slot_date: 2023-06-10 14:00:00
var dump slot_date: 2023-06-10 15:00:00
var dump slot_date: 2023-06-10 16:00:00
var dump slot_date: 2023-06-10 17:00:00
var dump slot_date: 2023-06-10 18:00:00
var dump slot_date: 2023-06-10 19:00:00
var dump slot_date: 2023-06-10 20:00:00
var dump slot_date: 2023-06-10 21:00:00
var dump slot_date: 2023-06-10 22:00:00
var dump slot_date: 2023-06-10 23:00:00
Sun
11
var dump looped_date: 2023-06-11
var dump slot_date: 2023-06-11 00:00:00
var dump slot_date: 2023-06-11 01:00:00
var dump slot_date: 2023-06-11 02:00:00
var dump slot_date: 2023-06-11 03:00:00
var dump slot_date: 2023-06-11 04:00:00
var dump slot_date: 2023-06-11 05:00:00
var dump slot_date: 2023-06-11 06:00:00
var dump slot_date: 2023-06-11 07:00:00
var dump slot_date: 2023-06-11 08:00:00
var dump slot_date: 2023-06-11 09:00:00
var dump slot_date: 2023-06-11 10:00:00
var dump slot_date: 2023-06-11 11:00:00
var dump slot_date: 2023-06-11 12:00:00
var dump slot_date: 2023-06-11 13:00:00
var dump slot_date: 2023-06-11 14:00:00
var dump slot_date: 2023-06-11 15:00:00
var dump slot_date: 2023-06-11 16:00:00
var dump slot_date: 2023-06-11 17:00:00
var dump slot_date: 2023-06-11 18:00:00
var dump slot_date: 2023-06-11 19:00:00
var dump slot_date: 2023-06-11 20:00:00
var dump slot_date: 2023-06-11 21:00:00
var dump slot_date: 2023-06-11 22:00:00
var dump slot_date: 2023-06-11 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;
}
}
}