Program To Create a Calendar Layout With HTML and CSS.

How to create a Calendar Layout with the help of HTML and CSS..as well as in this article we will be discuss about create a Calendar Layout…Create Calendar Layout With The Help of HTML And CSS

Program Of Calendar

 <div class="month"> 
  <UL>
    <li class="prev"> </li>
     <li class="next"> </li>
    <li>August<br><span  style="font-size:18px">2018</span></li>
  </UL>
 </div>

<ul class="weekdays">
  <li>Mo</li>
  <li>Tu</li>
   <li>We</li>
  <li>Th</li>
  <li>Fr</li>
   <li>Sa</li>
  <li>Su</li>
</ul>

<ul class="days"> 
   <li>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><span class="active">10</span></li>
   <li>11</li>
  .....etc
</ul>  

Create CSS File

 ul 
{
list-style-type: none;}
 body {font-family: Verdana, sans-serif;}
 
 /* Month header */
 .month {
   padding: 70px 25px;
   width: 100%;
   background: #1abc9c;
  text-align:center;
 }
 
 /* Month list */
 .month ul {
   margin: 0;
   padding: 0;
 }
 
 .month ul li {
   color: white;
   font-size: 20px;
     text-transform: uppercase;
   letter-spacing: 3px;
 }
 
 /* Previous button inside month header */
 .month .prev {
   float: left;
   padding-top: 10px;
 }
 
 /* Next button */
 .month .next {
   float: right;
   padding-top: 10px;
 }
 
 /* Weekdays (Mon-Sun) */
 .weekdays {
     margin: 0;
     padding: 10px 0;
     background-color:#ddd;
 }
 
 .weekdays li {
     display: inline-block;
     width: 13.6%;
     color: #666;
     text-align: center;
 }
 
 /* Days (1-31) */
 .days {
     padding: 10px 0;
     background: #eee;
   margin: 0;
 }
 
 .days li {
   list-style-type: none;
     display: inline-block;
     width: 13.6%;
     text-align: center;
     margin-bottom: 5px;
     font-size:12px;
   color: #777;
 }
 
 /* Highlight the "current" day */
 .days li .active {
     padding: 5px;
     background: #1abc9c;
   color: white !important
 }