CSS से कैलेंडर कैसे बनाएं?

CSS कैलेंडर में महीना हेडर, दिन नाम पंक्ति, और तारीख ग्रिड होता है। ग्रिड display: inline-block और width: 13.6% (100%/7) से 7 कॉलम बनाता है। आज की तारीख हाइलाइटेड होती है।

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    * { box-sizing: border-box; }
    .calender { border: 1px solid darkorchid; }
    .month {
      padding: 50px; width: 100%; background: #874de6;
      text-align: center; border: 1px solid rgba(139, 0, 139, 0.671);
    }
    .month ul { margin: 0; padding: 0; list-style-type: none; }
    .month ul li { font-size: 30px; text-transform: uppercase; letter-spacing: 6px; color: yellow; }
    .month .lastMonth { float: left; padding-top: 10px; }
    .month .nextMonth { float: right; padding-top: 10px; }
    .Days {
      margin: 0; padding: 10px 0;
      background-color: rgb(169, 210, 248);
      border: 1px solid rgba(0, 0, 139, 0.514);
    }
    .Days li {
      font-weight: bold; display: inline-block;
      width: 13.6%; color: rgb(0, 0, 0); text-align: center;
    }
    .daysNumber {
      padding: 10px 0; background: rgb(235, 255, 182);
      margin: 0; font-weight: bold;
    }
    .daysNumber li {
      list-style-type: none; display: inline-block;
      width: 13.6%; text-align: center; margin-bottom: 5px;
      font-size: 12px; color: rgb(0, 0, 0);
    }
    .daysNumber li .today {
      padding: 5px; background: #17003b;
      font-weight: bolder; border-radius: 50%;
      color: rgb(229, 255, 0) !important;
    }
  </style>
</head>
<body>
  <h1 style="text-align: center;">CSS Calendar Example</h1>
  <div class="calender">
    <div class="month">
      <ul>
        <li class="lastMonth">❮</li>
        <li class="nextMonth">❯</li>
        <li>March<br/><span>2020</span></li>
      </ul>
    </div>
    <ul class="Days">
      <li>Mo</li><li>Tu</li><li>We</li><li>Th</li><li>Fr</li><li>Sa</li><li>Su</li>
    </ul>
    <ul class="daysNumber">
      <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>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><span class="today">22</span></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>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

मुख्य बिंदु

• इनलाइन-ब्लॉक ग्रिड - 7 कॉलम, प्रत्येक 13.6% (≈100%/7)
• महीना नेविगेशन - फ्लोट लेफ्ट/राइट तीर
• दिन नाम पंक्ति - Mo से Su, बोल्ड, हल्का नीला बैकग्राउंड
• आज की तारीख - .today क्लास, गोल, पीला टेक्स्ट, गहरा बैकग्राउंड
• बॉक्स-साइजिंग - पैडिंग/बॉर्डर चौड़ाई में शामिल
• नोट - यह स्टेटिक कैलेंडर है, JS से डायनामिक बनाएं