.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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.