.container
  .title February 2019 Week 6
  .days
    .filler
    .filler
    .day Mon 4
    .day Tue 5
    .day Wed 6
    .day Thu 7
    .day.current Fri 8
    .day Sat 9
    .day Sun 10
  .content
    each val, index in ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23' ]
      .time(style='grid-row:'+[index+1])= val+":00"
    .filler-col
    - var n = 3;
    while n < 8
      .col(style='grid-column:'+n++)
    .col(style='grid-column:'+n++).weekend
    .col(style='grid-column:'+n++).weekend
    
    - var n = 1
    while n < 24
      .row(style='grid-row:'+n++)
    .event.event1.calendar1 Event 1
    .event.event2.calendar2 Event 2
    .event.event3.calendar2 Event 3
    .event.event4.calendar1 Event 4
    .current-time
      .circle
View Compiled
$title-height: 3em;
$days-height: 3em;
$time-width: 3em;
$time-height: 3em;
$grid-color: #dadce0;
$calendar-template: $time-width 10px repeat(7, 1fr);
$current-time-color: #ea4335;

* {
  box-sizing: border-box;
}

body {
  background: #fff;
}

.container {
  width: 100%;
  display: grid;
  grid-template-rows: $title-height $days-height auto;
  position: absolute;
}

.title {
  background: #217346;
  text-align: center;
  display: grid;
  place-content: center;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.days {
  background: #f3f2f1;
  display: grid;
  place-content: center;
  text-align: center;
  grid-template-columns: $calendar-template;
  position: sticky;
  top: $title-height;
  z-index: 10;
  border-bottom: 2px solid $grid-color;
}

.day {
  border-left: 1px solid $grid-color;
}

.content {
  display: grid;
  grid-template-columns: $calendar-template;
  grid-template-rows: repeat(24, $time-height);
}

.time {
  grid-column: 1;
  text-align: right;
  align-self: end;
  font-size: 80%;
  position: relative;
  bottom: -1ex;
  color: #70757a;
  padding-right: 2px;
}

.col {
  border-right: 1px solid $grid-color;
  grid-row: 1 / span 24;
  grid-column: span 1;
}

.filler-col {
  grid-row: 1 / -1;
  grid-column: 2;
  border-right: 1px solid $grid-color;
}

.row {
  grid-column: 2 / -1;
  border-bottom: 1px solid $grid-color;
}

.event {
  border-radius: 5px;
  padding: 5px;
  margin-right: 10px;
  font-weight: bold;
  font-size: 80%;
}

.weekend {
  background-color: #f1f3f4;
}

.calendar1 {
  background-color: #d7dbef;
  border-color: #bcc3e5;
}

.calendar2 {
  background-color: #b3e1f7;
  border-color: #81cdf2;
}

.event1 {
  grid-column: 3;
  grid-row: 9 / span 4;
}

.event2 {
  grid-column: 5;
  grid-row: 10 / span 6;
}

.event3 {
  grid-column: 7;
  grid-row: 8 / span 10;
}

.event4 {
  grid-column: 8;
  grid-row: 21 / span 2;
}

.current-time {
  grid-column: 7;
  grid-row: 10;
  border-top: 2px solid $current-time-color;
  position: relative;
  top: calc(50% - 1px);
}

.circle {
  width: 12px;
  height: 12px;
  border: 1px solid $current-time-color;
  border-radius: 50%;
  background: $current-time-color;
  position: relative;
  top: -6px;
  left: -6px;
}

.current {
  font-weight: bold;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.