สร้างปฏิทินด้วย php และ css โดยไม่ต้องใฃ้ตาราง

เขียนเมื่อ 11 ปีก่อน โดย Ninenik Narkdee
ปฏิทิน css php flex layout calendar flex

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ปฏิทิน css php flex layout calendar flex





อัพเดทเนื้อหาใหม่ปี 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>




กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ