Di bawah ini kita akan belajar cara membuat Kalender dengan CSS
<!DOCTYPE html> <html> <head> <style> * {box-sizing: border-box;} ul {list-style-type: none;} body {font-family: Verdana, sans-serif;} .month { padding: 70px 25px; width: 100%; background: #FF1493; 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: #FF1493; color: white !important } /* Tambahkan kueri media untuk layar yang lebih kecil */ @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> <h1>CSS Calendar</h1> <div class="month"> <ul> <li class="prev">❮</li> <li class="next">❯</li> <li> Februari<br> <span style="font-size:18px">2021</span> </li> </ul> </div> <ul class="weekdays"> <li>Senin</li> <li>Selasa</li> <li>Rabu</li> <li>Kamis</li> <li>Jum'at</li> <li>Sabtu</li> <li>Minggu</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>10</li> <li>11</li> <li>12</li> <li>13</li> <li><span class="active">14</span></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> </body> </html>
Cara Membuat Tata Letak Kalender
Langkah 1) Tambahkan HTML
Contoh
<div class="month"> <ul> <li class="prev">❮</li> <li class="next">❯</li> <li> Februari<br> <span style="font-size:18px">2021</span> </li> </ul> </div> <ul class="weekdays"> <li>Senin</li> <li>Selasa</li> <li>Rabu</li> <li>Kamis</li> <li>Jum'at</li> <li>Sabtu</li> <li>Minggu</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>10</li> <li>11</li> <li>12</li> <li>13</li> <li><span class="active">14</span></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>_
Langkah 2) Tambahkan CSS
Contoh
ul {list-style-type: none;} body {font-family: Verdana, sans-serif;} /* header bulan */ .month { padding: 70px 25px; width: 100%; background: #1abc9c; text-align: center; } /* list bulan */ .month ul { margin: 0; padding: 0; } .month ul li { color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 3px; } /* Previous button header di dalam bulan */ .month .prev { float: left; padding-top: 10px; } /* Next button */ .month .next { float: right; padding-top: 10px; } /* Minggu (Mon-Sun) */ .weekdays { margin: 0; padding: 10px 0; background-color:#ddd; } .weekdays li { display: inline-block; width: 13.6%; color: #666; text-align: center; } /* Hari (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; } /* Sorot hari "saat ini" */ .days li .active { padding: 5px; background: #1abc9c; color: white !important }
kalenderCara