สร้าง ปฏิทิน ด้วย XHTML และ CSS


หน้าแรก AJAX สร้าง ปฏิทิน ด้วย XHTML และ CSS

หา่ยไปนานกับบทความเกี่ยวกับ ajax คราวนี้ผมขอนำเทคนิคมาประยุกต์ใช้ให้ดูครับ
ว่ากันด้วยเรื่องปฏิทินบน Website ดีกว่า ผมเห็นหลายๆ Web โดยเฉพาะพวก Blog จะนำมาประยุกต์ใช้
เพื่อนำเสนอเนื้อหาคราวนี้ผมขอสอนแบบ Step ทีละขั้นให้ดู เริ่มกันเลยครับ

ขึ้นด้วย xhtml + css พอกันทีกับการแสดงผลตารางด้วย html table

คงเลี่ยงไม่ได้แล้วหากจะเอาดีด้านนี้ปัจจุบันการออกแบบ Website จะมาใช้ table กำหนดการแสดงผล
มันไม่ใช่ เทรนสมัยนี้แล้ว ฉะนั้น หัดไว้ครับ ใช้ xhtml กับ CSS นี่แหล่ะ ลุยเลย

calendar.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE> Calendar </TITLE>

<link rel="stylesheet" href="calendar.css" type="text/css" />

</HEAD>
<BODY>

<div id="calendar">
    <div id="c_head">
        <div id="c_back">&lt;&lt;</div>
        <div id="c_month">ธันวาคม 2550</div>
        <div id="c_next">&gt;&gt;</div>
    </div>

<ul>
    <li>จ.</li>
    <li>อ.</li>
    <li>พ.</li>
    <li>พฤ.</li>
    <li>ศ.</li>
    <li>ส.</li>
    <li>อา.</li>


    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</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>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>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>

</ul>

</div>

</BODY>
</HTML>

calendar.css

 #calendar{
    width:350px;
    display:block;
    float:left;
}

#calendar ul{
    display:block;
    width:350px;
    margin:0;
    padding:0;
    list-style-type:none;
}

#calendar li{
    display:block;
    width:50px;
    margin:0;
    padding:0;
    float:left;
    text-align:center;
}

#c_head{
    width:350px;
    display:block;
    float:left;
}
#c_back{
    width:50px;
    display:block;
    float:left;
    text-align:center;
}
#c_month{
    width:250px;
    display:block;
    float:left;
    text-align:center;
}
#c_next{
    width:50px;
    display:block;
    float:left;
    text-align:center;
}

งง กันไปตามทันกันหรือเปล่าครับ ^^ ผมกำหนดกรอบของ div นี้ไว้ที่ 350 px โดยใช้ ul และ li กำหนดข้อมูลวันที่ของ ปฏิทินลงไป 
และใช้ CSS กำหนดขนาดของ li ให้แสดงผลเป็น block ขนาดเท่าๆกัน ทำให้ข้อมูลเรียงออกมาเป็นลักษณะ ตารางได้เหมือนกัน


ตัวอย่างที่ได้ออกมา

Download Step 1

จับแต่งหน้าตาให้สวยงามซะหน่อย

กรุณาดูให้สวยด้วยนะครับ ฮา หัวศิลปะมีแค่นี้ใส่กรอบ Background ให้ดูเป็น Table ซะหน่อย

calendar.css

 #calendar{
    width:350px;
    display:block;
    float:left;
}

#calendar ul{
    display:block;
    width:350px;
    margin:0;
    padding:0;
    list-style-type:none;
}

#calendar li{
    display:block;
    width:45px;
    margin:1px;
    padding:1px;
    float:left;
    text-align:center;
    background-color:#000000;
}

#c_head{
    width:342px;
    display:block;
    float:left;
}
#c_back{
    width:50px;
    display:block;
    float:left;
    text-align:center;
    background-color:#CCFF99;
}
#c_month{
    width:242px;
    display:block;
    float:left;
    text-align:center;
    background-color:#99CC66;
}
#c_next{
    width:50px;
    display:block;
    float:left;
    text-align:center;
    background-color:#CCFF99;
}

.c_h_day{
    display:block;
    width:45px;
    float:left;
    text-align:center;
    background-color:#FF66CC;
}
.c_today{
    display:block;
    width:45px;

    float:left;
    text-align:center;
    background-color:#FFCC00;
}
.c_day{
    display:block;
    width:45px;

    float:left;
    text-align:center;
    background-color:#FFE1F0;
}

เอาล่ะดูดีขึ้นมานิดนึงให้เห็นเป็นปฏิทินแล้วเป็นใช้ได้

Download Step 2

ใส่ Javascript และ PHP ให้สามารถเปลี่ยนวันได้

ผมเพิ่ม calendar.js และ calendar.php เข้าไปเพื่อให้หน้า calendar.html เรียก javascript กลับเข้ามาติดต่อหา Server
เรียก calendar ส่ง html ออกไปตามเดือนที่เรียกมา

Script เขียนและ Comment ไว้ค่อนข้างละเอียดแล้วลองไล่การทำงานดูนะครับ

Download Step 3

ย้าย Javascript และซ่อน Code ให้ชาวบ้านปวดหัวเล่น

เรียบร้อยแล้วแต่หน้า xhtml จะแสดงเดือนเริ่มเป็นธันวาคม ฉะนั้นผมย้ายตำแหน่ง Script ใหม่ให้มันเรียกตัวเอง
และถือเป็นการซ่อน Code ไปในตัว

สรุปสุดท้ายครับ

Download Final 

สรุปสุดท้าย

ตัวปฏิืทินนี้ผมเขียนให้เป็นไอเดียนะครับใครจะเอาไปประยุกต์ต่อทำอะไรก็ตามสะดวก พวกหน้าข่าวสารต่างๆอาจจะนำเสนอด้วย
ปฏิทินแบบนี้ก็เก๋ไปอีกแบบครับ เช่นหน้าของ iStudio

โดยโมดิฟายที่ calendar.php ตรง Loop for ที่วนสร้างปฎิทิน

### วน 42 รอบสร้าง li ##

อาจจะเขียนให้เข้าไปเช็คเงื่อนไขก่อนว่ามีข้อมูลข่าวสารในวันนี้หรือเปล่าถ้ามีก็เปลี่ยนเป็น Link ไปหาหน้าข่าวสารนั้นๆ

อะไรแบบนี้แหล่ะครับ ลองประยุกต์กันดู

 



ขึ้นไปด้านบน