CSS Flex Calendar

I needed to create a calendar for Semicolon's coding mentorship program. A student would pick a month and a day and select a mentor based on their available hours. (If they match mentor's availability lane or not already scheduled by other students.)

So here was my thinking behind making CSS Flex Calendar:

1. For this project I have to use CSS Flex, not CSS Grid.
2. Create representation of a calendar cell (two types for empty cells and day cells)
3. Using flex-wrap:wrap will drop days to next row.
4. (By default flex doesn't create a line break for long lines)
5. HTML scaffold containing all days

Calendars with day pickers require a bit more CSS and JavaScript. But the first step is to create the layout. I know grid is probably a more natural solution but for my setup I had to make it with flex. So I'm not saying this is a complete flex calendar, only a basic layout.

Example of Flex calendar built with source code on this page (see below):

Empty spaces should be calculated programatically but at this point I simply inserted several div elements.

Flex is one of the quickest ways of making a simple calendar. Calendars are basically grids. And CSS grid is probably a better solution to designing an HTML calendar than Flex because the grid gives you better control over cell placement.

Flex Calendar CSS Code

<style>
/ Flex calendar's container/
#calendar {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
}

/ Calendar's flex cell /
#calendar div {
    font-size: 28px;
    font-weight: bold;
    border-radius: 8px;
    min-width: 100px;
    line-height: 100px;
    height: 100px;
    text-align: center;
    margin: 5px;
}

/ Days have a yellow background /
#calendar .day {
    background-color: #fffa69;
}
</style>

Flex calendar HTML scaffold

<div id = "calendar">
    <!-- use empty divs to create empty cells -->
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <!-- Flex calendar starts here -->
    <div class = "day">1</div>
    <div class = "day">2</div>
    <div class = "day">3</div>
    <div class = "day">4</div>
    <div class = "day">5</div>
    <div class = "day">6</div>
    <div class = "day">7</div>
    <div class = "day">8</div>
    <div class = "day">9</div>
    <div class = "day">10</div>
    <div class = "day">11</div>
    <div class = "day">12</div>
    <div class = "day">13</div>
    <div class = "day">14</div>
    <div class = "day">15</div>
    <div class = "day">16</div>
    <div class = "day">17</div>
    <div class = "day">18</div>
    <div class = "day">19</div>
    <div class = "day">20</div>
    <div class = "day">21</div>
    <div class = "day">22</div>
    <div class = "day">23</div>
    <div class = "day">24</div>
    <div class = "day">25</div>
    <div class = "day">26</div>
    <div class = "day">27</div>
    <div class = "day">28</div>
    <div class = "day">29</div>
    <div class = "day">30</div>
    <div class = "day">31</div>
</div>

Share link to this article on your social media.