Weekly Planner
Preview
Site time: 2023-11-29 07:58:46
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
27
var dump looped_date: 2023-11-27
var dump slot_date: 2023-11-27 00:00:00
var dump slot_date: 2023-11-27 01:00:00
var dump slot_date: 2023-11-27 02:00:00
var dump slot_date: 2023-11-27 03:00:00
var dump slot_date: 2023-11-27 04:00:00
var dump slot_date: 2023-11-27 05:00:00
var dump slot_date: 2023-11-27 06:00:00
var dump slot_date: 2023-11-27 07:00:00
var dump slot_date: 2023-11-27 08:00:00
var dump slot_date: 2023-11-27 09:00:00
var dump slot_date: 2023-11-27 10:00:00
var dump slot_date: 2023-11-27 11:00:00
var dump slot_date: 2023-11-27 12:00:00
var dump slot_date: 2023-11-27 13:00:00
var dump slot_date: 2023-11-27 14:00:00
var dump slot_date: 2023-11-27 15:00:00
var dump slot_date: 2023-11-27 16:00:00
var dump slot_date: 2023-11-27 17:00:00
var dump slot_date: 2023-11-27 18:00:00
var dump slot_date: 2023-11-27 19:00:00
var dump slot_date: 2023-11-27 20:00:00
var dump slot_date: 2023-11-27 21:00:00
var dump slot_date: 2023-11-27 22:00:00
var dump slot_date: 2023-11-27 23:00:00
Tue
28
var dump looped_date: 2023-11-28
var dump slot_date: 2023-11-28 00:00:00
var dump slot_date: 2023-11-28 01:00:00
var dump slot_date: 2023-11-28 02:00:00
var dump slot_date: 2023-11-28 03:00:00
var dump slot_date: 2023-11-28 04:00:00
var dump slot_date: 2023-11-28 05:00:00
var dump slot_date: 2023-11-28 06:00:00
var dump slot_date: 2023-11-28 07:00:00
var dump slot_date: 2023-11-28 08:00:00
var dump slot_date: 2023-11-28 09:00:00
var dump slot_date: 2023-11-28 10:00:00
var dump slot_date: 2023-11-28 11:00:00
var dump slot_date: 2023-11-28 12:00:00
var dump slot_date: 2023-11-28 13:00:00
var dump slot_date: 2023-11-28 14:00:00
var dump slot_date: 2023-11-28 15:00:00
var dump slot_date: 2023-11-28 16:00:00
var dump slot_date: 2023-11-28 17:00:00
var dump slot_date: 2023-11-28 18:00:00
var dump slot_date: 2023-11-28 19:00:00
var dump slot_date: 2023-11-28 20:00:00
var dump slot_date: 2023-11-28 21:00:00
var dump slot_date: 2023-11-28 22:00:00
var dump slot_date: 2023-11-28 23:00:00
Wed
29
var dump looped_date: 2023-11-29
var dump slot_date: 2023-11-29 00:00:00
var dump slot_date: 2023-11-29 01:00:00
var dump slot_date: 2023-11-29 02:00:00
var dump slot_date: 2023-11-29 03:00:00
var dump slot_date: 2023-11-29 04:00:00
var dump slot_date: 2023-11-29 05:00:00
var dump slot_date: 2023-11-29 06:00:00
var dump slot_date: 2023-11-29 07:00:00
var dump slot_date: 2023-11-29 08:00:00
var dump slot_date: 2023-11-29 09:00:00
var dump slot_date: 2023-11-29 10:00:00
var dump slot_date: 2023-11-29 11:00:00
var dump slot_date: 2023-11-29 12:00:00
var dump slot_date: 2023-11-29 13:00:00
var dump slot_date: 2023-11-29 14:00:00
var dump slot_date: 2023-11-29 15:00:00
var dump slot_date: 2023-11-29 16:00:00
var dump slot_date: 2023-11-29 17:00:00
var dump slot_date: 2023-11-29 18:00:00
var dump slot_date: 2023-11-29 19:00:00
var dump slot_date: 2023-11-29 20:00:00
var dump slot_date: 2023-11-29 21:00:00
var dump slot_date: 2023-11-29 22:00:00
var dump slot_date: 2023-11-29 23:00:00
Thu
30
var dump looped_date: 2023-11-30
var dump slot_date: 2023-11-30 00:00:00
var dump slot_date: 2023-11-30 01:00:00
var dump slot_date: 2023-11-30 02:00:00
var dump slot_date: 2023-11-30 03:00:00
var dump slot_date: 2023-11-30 04:00:00
var dump slot_date: 2023-11-30 05:00:00
var dump slot_date: 2023-11-30 06:00:00
var dump slot_date: 2023-11-30 07:00:00
var dump slot_date: 2023-11-30 08:00:00
var dump slot_date: 2023-11-30 09:00:00
var dump slot_date: 2023-11-30 10:00:00
var dump slot_date: 2023-11-30 11:00:00
var dump slot_date: 2023-11-30 12:00:00
var dump slot_date: 2023-11-30 13:00:00
var dump slot_date: 2023-11-30 14:00:00
var dump slot_date: 2023-11-30 15:00:00
var dump slot_date: 2023-11-30 16:00:00
var dump slot_date: 2023-11-30 17:00:00
var dump slot_date: 2023-11-30 18:00:00
var dump slot_date: 2023-11-30 19:00:00
var dump slot_date: 2023-11-30 20:00:00
var dump slot_date: 2023-11-30 21:00:00
var dump slot_date: 2023-11-30 22:00:00
var dump slot_date: 2023-11-30 23:00:00
Fri
1
var dump looped_date: 2023-12-01
var dump slot_date: 2023-12-01 00:00:00
var dump slot_date: 2023-12-01 01:00:00
var dump slot_date: 2023-12-01 02:00:00
var dump slot_date: 2023-12-01 03:00:00
var dump slot_date: 2023-12-01 04:00:00
var dump slot_date: 2023-12-01 05:00:00
var dump slot_date: 2023-12-01 06:00:00
var dump slot_date: 2023-12-01 07:00:00
var dump slot_date: 2023-12-01 08:00:00
var dump slot_date: 2023-12-01 09:00:00
var dump slot_date: 2023-12-01 10:00:00
var dump slot_date: 2023-12-01 11:00:00
var dump slot_date: 2023-12-01 12:00:00
var dump slot_date: 2023-12-01 13:00:00
var dump slot_date: 2023-12-01 14:00:00
var dump slot_date: 2023-12-01 15:00:00
var dump slot_date: 2023-12-01 16:00:00
var dump slot_date: 2023-12-01 17:00:00
var dump slot_date: 2023-12-01 18:00:00
var dump slot_date: 2023-12-01 19:00:00
var dump slot_date: 2023-12-01 20:00:00
var dump slot_date: 2023-12-01 21:00:00
var dump slot_date: 2023-12-01 22:00:00
var dump slot_date: 2023-12-01 23:00:00
Sat
2
var dump looped_date: 2023-12-02
var dump slot_date: 2023-12-02 00:00:00
var dump slot_date: 2023-12-02 01:00:00
var dump slot_date: 2023-12-02 02:00:00
var dump slot_date: 2023-12-02 03:00:00
var dump slot_date: 2023-12-02 04:00:00
var dump slot_date: 2023-12-02 05:00:00
var dump slot_date: 2023-12-02 06:00:00
var dump slot_date: 2023-12-02 07:00:00
var dump slot_date: 2023-12-02 08:00:00
var dump slot_date: 2023-12-02 09:00:00
var dump slot_date: 2023-12-02 10:00:00
var dump slot_date: 2023-12-02 11:00:00
var dump slot_date: 2023-12-02 12:00:00
var dump slot_date: 2023-12-02 13:00:00
var dump slot_date: 2023-12-02 14:00:00
var dump slot_date: 2023-12-02 15:00:00
var dump slot_date: 2023-12-02 16:00:00
var dump slot_date: 2023-12-02 17:00:00
var dump slot_date: 2023-12-02 18:00:00
var dump slot_date: 2023-12-02 19:00:00
var dump slot_date: 2023-12-02 20:00:00
var dump slot_date: 2023-12-02 21:00:00
var dump slot_date: 2023-12-02 22:00:00
var dump slot_date: 2023-12-02 23:00:00
Sun
3
var dump looped_date: 2023-12-03
var dump slot_date: 2023-12-03 00:00:00
var dump slot_date: 2023-12-03 01:00:00
var dump slot_date: 2023-12-03 02:00:00
var dump slot_date: 2023-12-03 03:00:00
var dump slot_date: 2023-12-03 04:00:00
var dump slot_date: 2023-12-03 05:00:00
var dump slot_date: 2023-12-03 06:00:00
var dump slot_date: 2023-12-03 07:00:00
var dump slot_date: 2023-12-03 08:00:00
var dump slot_date: 2023-12-03 09:00:00
var dump slot_date: 2023-12-03 10:00:00
var dump slot_date: 2023-12-03 11:00:00
var dump slot_date: 2023-12-03 12:00:00
var dump slot_date: 2023-12-03 13:00:00
var dump slot_date: 2023-12-03 14:00:00
var dump slot_date: 2023-12-03 15:00:00
var dump slot_date: 2023-12-03 16:00:00
var dump slot_date: 2023-12-03 17:00:00
var dump slot_date: 2023-12-03 18:00:00
var dump slot_date: 2023-12-03 19:00:00
var dump slot_date: 2023-12-03 20:00:00
var dump slot_date: 2023-12-03 21:00:00
var dump slot_date: 2023-12-03 22:00:00
var dump slot_date: 2023-12-03 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;
}
}
}