Weekly Planner

<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;
    }
  }
}