อัพเดทเนื้อหาใหม่ปี 2020 ใช้รูปแบบการกำหนด css โดยใช้
รูปแบบ flex layout
ดูตัวอย่างแนวทางดันี้
ไฟล์ test.html
<!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
.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
<!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>
เนื้อหาที่เกี่ยวข้อง