Blog
Select Page

Responsive calendar made with simple HTML and CSS

Misc

Responsive calendar made with simple HTML and CSS
Responsive calendar made with simple HTML and CSS

This is a very simple and clean HTML and CSS-based calendar. Currently, there is no functionality to it other than just looks with year, month, and current date active state (green colored background).

DEMO

Open demo in a full window – https://demos.webdevpuneet.com/set1/calendar/index.html

Demo Source Code

<!-- webdevpuneet.com -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Responsive calendar made with simple HTML and CSS</title>
  <meta name="description" content="This is a very simple and clean HTML and CSS-based calendar." />
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
  <meta name="robots" content="INDEX,FOLLOW" />
  <style>
    * {box-sizing: border-box;}
    ul {list-style-type: none;}
    body {font-family: Verdana, sans-serif;}

    .month {
      padding: 70px 25px;
      width: 100%;
      background: #32a8a2;
      text-align: center;
    }

    .month ul {
      margin: 0;
      padding: 0;
    }

    .month ul li {
      color: white;
      font-size: 20px;
      text-transform: uppercase;
      letter-spacing: 3px;
    }

    .month .prev {
      float: left;
      padding-top: 10px;
    }

    .month .next {
      float: right;
      padding-top: 10px;
    }

    .weekdays {
      margin: 0;
      padding: 10px 0;
      background-color: #ddd;
    }

    .weekdays li {
      display: inline-block;
      width: 13.6%;
      color: #666;
      text-align: center;
    }

    .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;
    }

    .days li .active {
      padding: 5px;
      background: #32a8a2;
      color: white !important
    }

    /* Add media queries for smaller screens */
    @media screen and (max-width:720px) {
      .weekdays li, .days li {width: 13.1%;}
    }

    @media screen and (max-width: 420px) {
      .weekdays li, .days li {width: 12.5%;}
      .days li .active {padding: 2px;}
    }

    @media screen and (max-width: 290px) {
      .weekdays li, .days li {width: 12.2%;}
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Responsive calendar made with simple HTML and CSS</h1>

    <div class="demo" style="margin-bottom:20px;">

      <div class="month">
        <ul>
          <li class="prev">&#10094;</li>
          <li class="next">&#10095;</li>
          <li>
            August<br>
            <span style="font-size:18px">2021</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>
        <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>
      </ul>

    </div><!-- End of demo code -->

    <div class="article-link" style="margin-bottom:20px;">
      <a href="" target="_blank" style="display: inline-block; color:blue:!important;text-decoration: none;border:1px solid blue;color:blue;line-height:1;border-radius:25px;font-size:14px;padding:5px 20px;display:inline-block;">View article and source code &raquo;</a>
    </div>
  </div>
</body>
</html>