.main-content
  div.month.month--feb(style="--color:#db7a7a") February
  each val, index in ['#db7f7a', '#db847a','#db8d7a','#db8d7a','#db917a','#db967a', '#db9a7a', '#db9a7a','#db9f7a','#dba37a', '#dba87a','#dbac7a', '#dbb07a', '#dbb57a', '#dbbe7a', '#dbc27a', '#dbc77a', '#dbd07a', '#dbd47a', '#dbd97a', '#d9db7a', '#d0db7a', '#cbdb7a', '#c7db7a', '#c2db7a', '#bedb7a', '#b9db7a', '#b5db7a']
    div.date(style="--color:"+val)= index+1
    
  div.month.month--mar(style="--color:#b0db7a") March
  each val, index in [ '#acdb7a', '#a7db7a', '#a3db7a','#9adb7a','#96db7a', '#91db7a', '#8ddb7a', '#88db7a', '#7fdb7a', '#7bdb7a', '#7adb7e', '#7adb82', '#7adb87', '#7adb90', '#7adb9d', '#7adba6', '#7adbaf', '#7adbb3', '#7adbb8', '#7adbc1', '#7adbce', '#7adbd3','#7adbd7', '#7adadb', '#7ad6db', '#7ad1db', '#7acddb', '#7ac8db', '#7ac4db','#7abfdb', '#7ab6db']
    div.date(style="--color:"+val)= index+1
  div.month.month--title(style="--color:#7ab6db") you've got plans
  div.explanation(style="--color:#7ab2db")
    | Part of the 
    a(href="https://codepen.io/collection/DQvYpQ/" target="_blank") CSS Grid collection here
    | .
  footer(style="--color:#7ab2db")
    a(href="https://twitter.com/meowlivia_" target="_blank")
      i.icon-social-twitter.icons
    a(href="https://github.com/oliviale" target="_blank")
      i.icon-social-github.icons
    a(href="https://dribbble.com/oliviale" target="_blank")
      i.icon-social-dribbble.icons
  //more colors: '#7aaddb', '#7aa9db','#7aa5db', '#7a9cdb', '#7a97db', '#7a8edb', '#7a81db', '#7c7adb', '#817adb', '#8a7adb', '#8e7adb', '#977adb', '#9c7adb', '#a57adb', '#a97adb', '#ae7adb', '#b27adb', '#b67adb', '#bb7adb', '#bf7adb', '#c47adb', '#c87adb', '#cd7adb', '#d17adb', '#d67adb', '#da7adb', '#db7ac5', '#db7ac1','#db7ab8','#db7ab3', '#db7aaf', '#db7aaa', '#db7aa6', '#db7aa2', '#db7a9d', '#db7a99', '#db7a94', '#db7a90', '#db7a87', '#db7a82', '#db7a82', '#db7a7a']
  div.event.event--1 
    .event__name Valentines party with Ames ❤️
  div.event.event--2
    .event__name 😎 Die Hard binge weekend 😎
  div.event.event--3
    .event__name Dinner w/ Gina 💯
  div.event.event--4a
    .event__name Charles' Taco...
  div.event.event--4b
    .event__name ... Food Truck Opening 🌯
  div.event.event--5
    .event__name Run-through 🎃
View Compiled
* {
  box-sizing: border-box;
}
body {
  font-family: "Comfortaa", sans-serif;
}

.explanation {
  background: var(--color);
  grid-column: span 6;
  padding: 28px;
  color: #fff;
  line-height: 1.7;
  a {
    text-decoration: none;
    color: #fff;
    padding: 3px 0;
    border-bottom: 1px dashed;
    &:hover {
      border-bottom: 1px solid;
    }
  }
}

footer {
  background: var(--color);
  text-align: center;
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  place-content: center;
  a {
    text-decoration: none;
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 1px dashed #fff;
    color: #fff;
    margin: 0 5px;
    &:hover {
      background: rgba(0, 0, 0, 0.05);
    }
    .icons {
      margin-top: 8px;
      display: inline-block;
      font-size: 20px;
    }
  }
}

.date {
  background: var(--color);
  padding: 15px;
  position: relative;
  font-size: 20px;
}

.month {
  background: var(--color);
  font: 900 75px "Montserrat", sans-serif;
  text-transform: uppercase;
  padding: 40px 30px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
  &--feb {
    grid-column: span 3;
  }
  &--mar {
    grid-column: span 2;
  }
  &--title {
    grid-column: span 6;
    text-align: right;
    padding-right: 60px;
  }
}

.main-content {
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: repeat(10, 170px) 80px;
  grid-template-columns: repeat(7, minmax(170px, 1fr));
}

.event {
  z-index: 10;
  background: transparent;
  padding-top: 40px;
  &__name {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    height: auto;
    padding: 10px;
    margin: 10px;
    font-size: 14px;
  }
  &--1 {
    grid-column: 3 / span 2;
    grid-row: 3;
  }
  &--2 {
    grid-column: 4 / span 3;
    grid-row: 3;
    padding-top: 85px;
  }
  &--3 {
    grid-column: 2;
    grid-row: 6;
  }
  &--4a {
    grid-column: 7;
    grid-row: 7;
    .event__name {
      border-radius: 20px 0 0 20px;
    }
  }
  &--4b {
    grid-column: 1 / span 2;
    grid-row: 8;
    .event__name {
      border-radius: 0 20px 20px 0;
    }
  }
  &--5 {
    grid-column: 5;
    grid-row: 9;
  }
}

//events

div.date {
  &:nth-child(15) {
    grid-column: 3;
    grid-row: 3;
  }
  &:nth-child(16) {
    grid-column: 4;
    grid-row: 3;
  }
  &:nth-child(17) {
    grid-column: 5;
    grid-row: 3;
  }
  &:nth-child(18) {
    grid-column: 6;
    grid-row: 3;
  }
  &:nth-child(34) {
    grid-column: 2;
    grid-row: 6;
  }
  &:nth-child(46) {
    grid-column: 7;
    grid-row: 7;
  }
  &:nth-child(47) {
    grid-column: 1;
    grid-row: 8;
  }
  &:nth-child(48) {
    grid-column: 2;
    grid-row: 8;
  }
  &:nth-child(58) {
    grid-column: 5;
    grid-row: 9;
  }
}

//feb & march days
.date {
  &:after {
    position: absolute;
    z-index: 20;
    top: 15px;
    right: 15px;
    font-size: 10px;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  }
}

.date {
  &:nth-child(-7n + 30):after {
    content: "Fri";
  }
  &:nth-child(-7n + 24):after {
    content: "Sat";
  }
  &:nth-child(-7n + 25):after {
    content: "Sun";
  }
  &:nth-child(-7n + 26):after {
    content: "Mon";
  }
  &:nth-child(-7n + 27):after {
    content: "Tue";
  }
  &:nth-child(-7n + 28):after {
    content: "Wed";
  }
  &:nth-child(-7n + 29):after {
    content: "Thu";
  }
}

.date {
  &:nth-child(7n + 31):after {
    content: "Fri";
  }
  &:nth-child(7n + 32):after {
    content: "Sat";
  }
  &:nth-child(7n + 33):after {
    content: "Sun";
  }
  &:nth-child(7n + 34):after {
    content: "Mon";
  }
  &:nth-child(7n + 35):after {
    content: "Tue";
  }
  &:nth-child(7n + 36):after {
    content: "Wed";
  }
  &:nth-child(7n + 37):after {
    content: "Thu";
  }
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js