The calendar is one of the important tools in human civilization. Many important events can then be remembered and traced to the truth from the exact date of the incident. In all parts of the world, there are two widely known calendar systems namely, the gregorian calendar and the Islamic calendar.
In this article we will learn how to design calendars using HTML and CSS by utilizing the CSS Grid system, a layouting technique that has recently been popular among frontend developers.
Build a simple calendar with CSS Grid
Following are the final designs to be made:
Creating the HTML
We can tell from the picture that the calendar contains three parts:
- Month indicator.
- Weekday / weekend indicators.
- Date itself.
The best way to compose HTML is to follow what feels right. now we will create HTML according to these three parts:
<div class="calendar"> <div class="month-indicator">...</div> <div class="day-of-week">...</div> <div class="date-grid">...</div> </div>
We should also be able to see the needs of seven columns for grids on the calendar.
We will focus our discussion on the .day-of-week and .date-grid code above because now we are only talking about grids.
Grid Arrangement
There are two ways to create CSS Boxes.
The first way is to combine elements in the .day-of-week and .date-grid into one selector. If we do this, we can adjust the display: grid selection. What does HTML look like if we do this:
<div class="grid"> <!-- Day of week --> <div>Su</div> <div>Mo</div> <div>Tu</div> <div>We</div> <div>Th</div> <div>Fr</div> <div>Sa</div> <!-- Dates --> <button><time datetime="2019-02-01">1</time></button> <button><time datetime="2019-02-02">2</time></button> <button><time datetime="2019-02-03">3</time></button> <!-- ... --> <button><time datetime="2019-02-28">28</time></button> </div>
We should prevent this method because HTML loses its structural meaning by being combined, let’s try to save .day-of-week and date-grid as separate elements if possible. Because this makes it easier for us to read / understand the code that has been written.
Here is the best HTML structure:
<div class="day-of-week"> <div>Su</div> <div>Mo</div> <div>Tu</div> <div>We</div> <div>Th</div> <div>Fr</div> <div>Sa</div> </div> <div class="date-grid"> <button><time datetime="2019-02-01">1</time></button> <button><time datetime="2019-02-02">2</time></button> <button><time datetime="2019-02-03">3</time></button> <!-- ... --> <button><time datetime="2019-02-28">28</time></button> </div>
The best way to create a CSS Grid with a simple structure is to use a subgrid. However, most browsers do not yet support subgrid. Meanwhile, the best way is to make two separate grids, one for .day-of-week and one for .date-grid. So, it can be interpreted that .day-of-week and .date-grid can use a grid ( grid) the same seven columns.
/* The grid */
.day-of-week,
.date-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
Real Date Adjustment
February 2019 starts on Friday. If we want the calendar to be correct, we need to make sure:
- Feb 1 2019 falls on Friday
- February 2, 2019 falls on Saturday
- 3 February 2019 falls on a Sunday
- Etc…
With CSS Grid, this part can be made easy.
CSS Grid has a placement algorithm that somewhat follows the following rules (if we don’t set grid-auto-flow to dense):
Place items that have the first explicit grid-column or grid-row
Fill in the rest according to the item that was last placed
This means:
- If the first item falls in column 6
- The second item will be placed in column 7.
- The third item will be placed in the next row, in column 1 (because there are only seven columns).
- The fourth item will be placed in column 2,
- Etc…
So, if we position February 1 in the sixth column (Friday), the remaining dates will be placed correctly.
Simple logic like that …
/* Positioning the first day on a Friday */
.date-grid button:first-child {
grid-column: 6;
}
The following is the entire code used:
- Source Code Html
<main> <div class="calendar"> <div class="month-indicator"> <time datetime="2019-02"> February 2019 </time> </div> <div class="day-of-week"> <div>Su</div> <div>Mo</div> <div>Tu</div> <div>We</div> <div>Th</div> <div>Fr</div> <div>Sa</div> </div> <div class="date-grid"> <button> <time datetime="2019-02-01">1</time> </button> <button> <time datetime="2019-02-02">2</time> </button> <button> <time datetime="2019-02-03">3</time> </button> <button> <time datetime="2019-02-04">4</time> </button> <button> <time datetime="2019-02-05">5</time> </button> <button> <time datetime="2019-02-06">6</time> </button> <button> <time datetime="2019-02-07">7</time> </button> <button> <time datetime="2019-02-08">8</time> </button> <button> <time datetime="2019-02-09">9</time> </button> <button> <time datetime="2019-02-10">10</time> </button> <button> <time datetime="2019-02-11">11</time> </button> <button> <time datetime="2019-02-12">12</time> </button> <button> <time datetime="2019-02-13">13</time> </button> <button> <time datetime="2019-02-14">14</time> </button> <button> <time datetime="2019-02-15">15</time> </button> <button> <time datetime="2019-02-16">16</time> </button> <button> <time datetime="2019-02-17">17</time> </button> <button> <time datetime="2019-02-18">18</time> </button> <button> <time datetime="2019-02-19">19</time> </button> <button> <time datetime="2019-02-20">20</time> </button> <button> <time datetime="2019-02-21">21</time> </button> <button> <time datetime="2019-02-22">22</time> </button> <button> <time datetime="2019-02-23">23</time> </button> <button> <time datetime="2019-02-24">24</time> </button> <button> <time datetime="2019-02-25">25</time> </button> <button> <time datetime="2019-02-26">26</time> </button> <button> <time datetime="2019-02-27">27</time> </button> <button> <time datetime="2019-02-28">28</time> </button> </div> </div> </main>
- Source Code Css
:root { --teal-050: #effcf6; --teal-100: #c6f7e2; --teal-200: #8eedc7; --teal-300: #65d6ad; --teal-400: #3ebd93; --teal-500: #27ab83; --teal-600: #199473; --teal-700: #147d64; --teal-800: #0c6b58; --teal-900: #014d40; --blue-grey-050: #f0f4f8; --blue-grey-100: #d9e2ec; --blue-grey-200: #bcccdc; --blue-grey-300: #9fb3c8; --blue-grey-400: #829ab1; --blue-grey-500: #627d98; --blue-grey-600: #486581; --blue-grey-700: #334e68; --blue-grey-800: #243b53; --blue-grey-900: #102a43; } html { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 125%; line-height: 1.4; font-weight: 400; color: var(--blue-grey-900); } body { min-height: 100vh; background: var(--blue-grey-100); } main { max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; margin: 3em auto 0 auto; padding: 1.5em; background-color: #fff; border: 2px solid var(--blue-grey-200); border-radius: 8px; } .month-indicator { color: var(--blue-grey-700); text-align: center; font-weight: 500; } .day-of-week, .date-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .day-of-week { margin-top: 1.25em; } .day-of-week > * { font-size: 0.7em; color: var(--blue-grey-400); font-weight: 500; letter-spacing: 0.1em; font-variant: small-caps; text-align: center; } /* Dates */ .date-grid { margin-top: 0.5em; } /* Positioning the first day */ .date-grid button:first-child { grid-column: 6; } .date-grid button { position: relative; border: 0; width: 4.5ch; height: 4.5ch; border-radius: 50%; background-color: transparent; color: var(--blue-grey-600); } .date-grid button:hover, .date-grid button:focus { outline: none; background-color: var(--blue-grey-050); color: var(--blue-grey-700); } .date-grid button:active, .date-grid button.is-selected { background-color: var(--teal-100); color: var(--teal-900); }
Thanks for reading, The random creative will share another tutorial soon.