อัพเดทเนื้อหาใหม่ปี 2020 ใช้รูปแบบการกำหนด css โดยใช้
รูปแบบ flex layout
ดูตัวอย่างแนวทางดันี้
ไฟล์ test.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="app.css"></head><body> <h1>Calendar</h1> <div class="wrap-calendar-lev-1"> <div class="wrap-month-year"> มกราคม 2563 </div> <ul class="wrap-dayname-list"> <li>อา</li> <li>จ</li> <li>อ</li> <li>พ</li> <li>พฤ</li> <li>ศ</li> <li>ส</li> </ul> <ul class="wrap-day-list"> <li class="no-date"></li> <li class="no-date"></li> <li class="no-date"></li> <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 class="current">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></body></html> |
ไฟล์ app.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | .wrap-calendar-lev-1{ width: 200px;}/* ส่วนของเดือนและปี */.wrap-month-year{ display: flex; justify-content: center; background-color: #bb5105; color: #FFFFFF; }/* ส่วนที่คุลมวันที่ และชื่อวัน */.wrap-day-list,.wrap-dayname-list{ display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; background: #EAEAEA; align-content: flex-start; box-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.1);}/* ส่วนของรายการวันที่ และวัน */.wrap-day-list li,.wrap-dayname-list li{ width: calc(100% / 7); /* background-color: yellow; */ height: 25px; display: flex; align-items: center; margin-top: 1px; justify-content: center;}/* ช่องรายชื่อวันในสัปดาห์ */.wrap-dayname-list li{ background-color: chocolate; color: #FFFFFF;}/* ช่องวันที่ปกติ */.wrap-day-list li{ background-color: yellow;}/* ช่องที่ไม่มีวันที่ */.wrap-day-list li.no-date{ background-color: transparent;}/* ส่วนของการกำหนดวันที่ปัจจุบัน */.wrap-day-list li.current{ color: yellow; background-color: red;} |
ดูตัวอย่างที่ DEMO 1
กรณีประขุกต์ใช้งานร่วมกับ PHP
ไฟล์ test.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="app.css"></head><body><?php$thai_month_arr=array( "1"=>"มกราคม", "2"=>"กุมภาพันธ์", "3"=>"มีนาคม", "4"=>"เมษายน", "5"=>"พฤษภาคม", "6"=>"มิถุนายน", "7"=>"กรกฎาคม", "8"=>"สิงหาคม", "9"=>"กันยายน", "10"=>"ตุลาคม", "11"=>"พฤศจิกายน", "12"=>"ธันวาคม" );//$current_month = "2008-11-01";$current_month = date("Y-m-01"); // เดือนปัจจุบัน หากต้องการเป็นเดือนอื่นก็เปลี่ยน เช่น Y-02-01$mk_time = strtotime($current_month); // สร้างรูปแบบวันที่มาตรฐาน Timestamp$current_date = date("j"); // วันที่ปัจจุบัน $total_day_in_month = date("t",$mk_time); // จำนวนวันในเดือนนี้$first_day_in_month = date("w",$mk_time); // หาวันที่ 1 ตรงกับวันอะไร วันอาทิตย์เท่ากับ 0$total_list_day = $total_day_in_month + $first_day_in_month; // จำนวนรายการวันที่ี่$rows_week = ceil($total_list_day / 7); // คำนวนหาจำนวนสัปดาห์$total_box = $rows_week * 7; // จำนวนรายการวันที่ทั้งหมด// ฟังก์ชั่นสร้างวันที่ กำหนด เริ่มต้น (เริ่มต้น 1, วันที่ 1 ตรงกัลวันที่ , วันที่ปัจจุบัน, จำนวนวันวในเดือนนั้นๆ)function drawDate($no_day, $first_day_in_month, $current_date, $total_day_in_month){ $wan_tee = $no_day - $first_day_in_month; if($wan_tee <= 0){ return '<li class="no-date"></li>'; }else{ if($wan_tee <= $total_day_in_month){ if($wan_tee == $current_date){ return '<li class="current">'.$wan_tee.'</li>'; }else{ return '<li>'.$wan_tee.'</li>'; } }else{ return ""; } }}?> <h1>Calendar</h1> <div class="wrap-calendar-lev-1"> <div class="wrap-month-year"> <?=$thai_month_arr[intval(date("m"))]?> <?=date("Y")+543?> </div> <ul class="wrap-dayname-list"> <li>อา</li> <li>จ</li> <li>อ</li> <li>พ</li> <li>พฤ</li> <li>ศ</li> <li>ส</li> </ul> <ul class="wrap-day-list"> <?php for($i = 1; $i <= $total_box; $i++){ // วนลูปสร้างวันที่ echo drawDate($i, $first_day_in_month, $current_date, $total_day_in_month); } ?> </ul> </div> </body></html> |
เนื้อหาที่เกี่ยวข้อง