Flex Calendar

by Adrian Mejias

HTML

<div class="calendar">
  <div class="month">
    <div class="week" data-week="1">
      <div class="day" data-day="1"></div>
      <div class="day" data-day="2"></div>
      <div class="day event today" data-day="3"></div>
      <div class="day event" data-day="4"></div>
      <div class="day" data-day="5"></div>
      <div class="day" data-day="6"></div>
      <div class="day" data-day="7"></div>
    </div>
    <div class="week" data-week="2">
      <div class="day" data-day="8"></div>
      <div class="day" data-day="9"></div>
      <div class="day" data-day="10"></div>
      <div class="day" data-day="11"></div>
      <div class="day" data-day="12"></div>
      <div class="day" data-day="13"></div>
      <div class="day event" data-day="14"></div>
    </div>
    <div class="week" data-week="3">
      <div class="day" data-day="15"></div>
      <div class="day" data-day="16"></div>
      <div class="day" data-day="17"></div>
      <div class="day" data-day="18"></div>
      <div class="day" data-day="19"></div>
      <div class="day" data-day="20"></div>
      <div class="day" data-day="21"></div>
    </div>
    <div class="week" data-week="4">
      <div class="day" data-day="22"></div>
      <div class="day" data-day="23"></div>
      <div class="day" data-day="24"></div>
      <div class="day" data-day="25"></div>
      <div class="day" data-day="26"></div>
      <div class="day" data-day="27"></div>
      <div class="day" data-day="28"></div>
    </div>
    <div class="week" data-week="5">
      <div class="day" data-day="29"></div>
      <div class="day" data-day="30"></div>
      <div class="day" data-day="31"></div>
      <div class="day empty" data-day="0"></div>
      <div class="day empty" data-day="0"></div>
      <div class="day empty" data-day="0"></div>
      <div class="day empty" data-day="0"></div>
    </div>
  </div>
</div>

CSS

.calendar {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.month {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.week {
  display: flex;
  flex-flow: wrap;
}

.day {
  flex: 1;
  height: 50px;
  min-width: 14.2857%;
  max-width: 14.2857vw;
  position: relative;
}

.day.empty {
  min-height: 14vw;
  max-height: 14%
}

.day.empty::after,
.day.empty::before {
  opacity: 0;
}

.day.today::before {
  background: #e9e9e9;
}

.day.event::after {
  font-weight: bold;
  display: inline-block;
  content: '\2219';
  text-align: center;
  color: #ff578b;
  border-radius: 100%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  position: absolute;
  left: 32%;
  bottom: 20%;
}

.day::before {
  content: attr(data-day);
  display: inline-block;
  text-align: center;
  border-radius: 100%;
  width: 30px;
  height: 30px;
  line-height: 30px;
}