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

09 November 2008 เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee

php calendar flex layout ปฏิทิน css flex

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

UPDATE! อัพเดทล่าสุด 12-02-2020
12-02-2020 | อัพเดทใช้รูปแบบ flex layout

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

DEMO 1

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

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

25 Sep
2008

ปฏิทินอย่างง่ายด้วย php และ css อ่าน 54,723
CSS Code <style type="text/css"> #calendar_css { background-color:#F0F0F
กำลังอ่านเนื้อหานี้อยู่

09 Nov
2008

สร้างปฏิทินด้วย php และ css โดยไม่ต้องใฃ้ตาราง อ่าน 35,538
อัพเดทเนื้อหาใหม่ปี 2020 ใช้รูปแบบการกำหนด css โดยใช้ รูปแบบ flex layout

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

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน