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