<div class="calendar">
    <div class="calendar__weekday">Sun</div>
    <div class="calendar__weekday">Mon</div>
    <div class="calendar__weekday">Tue</div>
    <div class="calendar__weekday">Wed</div>
    <div class="calendar__weekday">Thu</div>
    <div class="calendar__weekday">Fri</div>
    <div class="calendar__weekday">Sat</div>

    <!-- Week 1 -->
    <div class="calendar__day">29</div>
    <div class="calendar__day">30</div>
    <div class="calendar__day">31</div>
    <div class="calendar__day">1</div>
    <div class="calendar__day">2</div>
    <div class="calendar__day">3</div>
    <div class="calendar__day">4</div>

    <!-- Week 2 -->
    <div class="calendar__day">5</div>
    <div class="calendar__day">6</div>
    <div class="calendar__day">7</div>
    <div class="calendar__day">8</div>
    <div class="calendar__day">9</div>
    <div class="calendar__day">10</div>
    <div class="calendar__day">11</div>

    <!-- Week 3 -->
    <div class="calendar__day">12</div>
    <div class="calendar__day">13</div>
    <div class="calendar__day">14</div>
    <div class="calendar__day">15</div>
    <div class="calendar__day">16</div>
    <div class="calendar__day">17</div>
    <div class="calendar__day">18</div>

    <!-- Week 4 -->
    <div class="calendar__day">19</div>
    <div class="calendar__day">20</div>
    <div class="calendar__day">21</div>
    <div class="calendar__day">22</div>
    <div class="calendar__day">23</div>
    <div class="calendar__day">24</div>
    <div class="calendar__day">25</div>

    <!-- Week 5 -->
    <div class="calendar__day">26</div>
    <div class="calendar__day">27</div>
    <div class="calendar__day">28</div>
    <div class="calendar__day">29</div>
    <div class="calendar__day">30</div>
    <div class="calendar__day">1</div>
    <div class="calendar__day">2</div>

    <!-- Events -->
    <div
        class="calendar__event calendar__event--done"
        style="grid-column: 2 / 5; grid-row: 2; margin-top: 2rem"
    >Metting</div>
    <div
        class="calendar__event calendar__event--todo"
        style="grid-column: 2 / 6; grid-row: 3; margin-top: 2rem"
    >Design</div>
    <div
        class="calendar__event calendar__event--overdue"
        style="grid-column: 3 / 8; grid-row: 3; margin-top: 4rem"
    >Implementation (1)</div>
    <div
        class="calendar__event calendar__event--overdue"
        style="grid-column: 1 / 6; grid-row: 4; margin-top: 2rem"
    >Implementation (2)</div>
    <div
        class="calendar__event calendar__event--todo"
        style="grid-column: 1 / 6; grid-row: 5; margin-top: 2rem"
    >Test</div>
    <div
        class="calendar__event calendar__event--todo"
        style="grid-column: 2 / 7; grid-row: 5; margin-top: 4rem"
    >Fix bugs</div>
</div>

body {
    color: rgb(51 65 85);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
* {
    box-sizing: border-box;
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 2rem repeat(5, 1fr);

    border-left: 1px solid rgb(203 213 225);
    border-top: 1px solid rgb(203 213 225);
    border-right: 1px solid rgb(203 213 225);

    width: 100%;
}

.calendar__weekday {
    border-bottom: 1px solid rgb(203 213 225);

    justify-content: center;
    align-items: center;
    display: flex;

    padding: 0.5rem 0;
    text-transform: uppercase;
}

.calendar__day {
    border-bottom: 1px solid rgb(203 213 225);
    border-right: 1px solid rgb(203 213 225);
    font-size: 0.75rem;
    padding: 0.5rem;
    text-align: right;
}
.calendar__day:nth-child(7n + 1) {
    grid-column: 1;
}
.calendar__day:nth-child(7n + 2) {
    grid-column: 2;
}
.calendar__day:nth-child(7n + 3) {
    grid-column: 3;
}
.calendar__day:nth-child(7n + 4) {
    grid-column: 4;
}
.calendar__day:nth-child(7n + 5) {
    grid-column: 5;
}
.calendar__day:nth-child(7n + 6) {
    grid-column: 6;
}
.calendar__day:nth-child(7n + 7) {
    grid-column: 7;
    border-right: 0;
}
.calendar__day:nth-child(n + 8):nth-child(-n + 14) {
    grid-row: 2;
}
.calendar__day:nth-child(n + 15):nth-child(-n + 21) {
    grid-row: 3;
}
.calendar__day:nth-child(n + 22):nth-child(-n + 28) {
    grid-row: 4;
}
.calendar__day:nth-child(n + 29):nth-child(-n + 35) {
    grid-row: 5;
}
.calendar__day:nth-child(n + 36):nth-child(-n + 42) {
    grid-row: 6;
}

.calendar__event {
    border-radius: 9999px;
    color: #fff;
    height: 1.75rem;
    margin: 0.5rem;
    padding: 0 0.5rem;

    display: flex;
    align-items: center;
}
.calendar__event--done {
    background: rgb(74 222 128);
}
.calendar__event--todo {
    background: rgb(96 165 250);
}
.calendar__event--overdue {
    background: rgb(190 18 60);
}