Create Calendar Using HTML and CSS (Source Code)

Hey Guys, Welcome To Our Codewithrandom Blog, In Today's Blog We Are Going To See How To Create An Calendar Using HTML and CSS. A calendar is nothing but the representation of dates with days with the year and month on top.

So Now Let's create this project by adding source codes. For that first, we added the HTML Code.

First of all, we have to know a little bit about HTML. If you don't know about HTML and CSS, you will be not able to make a better calendar. This article mostly used HTML and CSS.

Html Code For Calendar:-

<div class="calendar-wrapper">
  <h1>December 2020</h1>
  <ol class="calendar">

    <li class="day-name">Sun</li>
    <li class="day-name">Mon</li>
    <li class="day-name">Tue</li>
    <li class="day-name">Wed</li>
    <li class="day-name">Thu</li>
    <li class="day-name">Fri</li>
    <li class="day-name">Sat</li>

    <li class="first-day">1</li>

    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
  </ol>
</div>

First We create a div class with the name calendar-wrapper then with a header tag, we are adding month and year.

Secondly, we opened the order list tag for days to be added and those days were added with separate class names.

Third, We added a separate class name for one list class that contains the first number of the month's date. and next by next we add the dates until the end of the number per month. and lastly, we closed the div and ol tag.

So, We have successfully completed our HTML code. Now We move on to CSS code.

CSS Code For Calendar:-

.calendar-wrapper {
  max-width: 280px;
  font: 100% system-ui;
}
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.first-day {
  grid-column-start: 3;
}


.day-name {
  background: #eee;
}

h1 {
  text-align: center;
}
ol {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
li {
  padding: 2px;
}

Step1: In the first step of CSS , We calling out the first div class name and adding max-width and font size for aligning the whole content to required number.

.calendar-wrapper {
  max-width: 280px;
  font: 100% system-ui;
}
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

Step2: Second Step Involves Making the dates and days to look as like a real calendar and for that we using the grid properties like display; grid and the column alignment and space for each number with grid-template-column.

.first-day {
  grid-column-start: 3;
}


.day-name {
  background: #eee;
}

Step3: Third Step is about making the header to center of content (days and dates) with text align property and then we adding simple margin and padding , list style etc...

h1 {
  text-align: center;
}
ol {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
li {
  padding: 2px;
}

Now we have completed the CSS code successfully. So We can move to the Output of the project given below.

Now We have Successfully created our Calendar Project Using HTML and CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen section above.

This is basic CSS Calendar, you can add your own features and options. This calendar is made for functionality.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Thanks for reading!!!

REFER CODE - Chris Coyier

WRITTEN BY - Ragunathan S