สอนทำปฏิทิน (Calendar) ด้วย PHP + jQuery (AJAX)
สาเหตุที่ผมสอนทำปฏิทินด้วยภาษาDynamicแบบPHP เพราะว่า มันสามารถประยุกต์ใช้ร่วมกับฐานข้อมูล(Database) หรืออื่นๆได้ครับ อย่างเช่นเว็บนี้-> www.goragod.com ดังนั้นมันจึงมีความยืดหยุ่นมากกว่าปฏิทินที่สร้างด้วยJavascriptครับ
ให้สร้างไฟล์ขึ้นมา 2 ไฟล์ คือ calendarshow.html,calendar.php
ไฟล์ calendarshow.html ->เป็นไฟล์htmlธรรมดาครับ โดยเราจะเขียน CSS และ jQuery (AJAX) ในไฟล์นี้ครับ โดยเราได้กำหนดพื้นที่สำหรับแสดงผลปฏิทินใน tag div ที่มี id ชื่อ calendar_show ให้พิมพ์คำสั่งดังนี้
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>แสดงปฏิทินแบบAJAX</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$_CalendarShow=function(url,area){
$.ajax({
url:url,
type:'GET',
success:function(data){
$('#'+area).html(data);
}
});
}
$(document).ready(function(){
$_CalendarShow('calendar.php','calendar_show');//$_CalendarShow(ไฟล์ที่ร้องขอ,พื้นที่แสดงผล);
$('#go_calendar').live('click',function(){
$_CalendarShow($(this).attr('href'),'calendar_show');
return false;//ให้ลิงค์หยุดการRedirect
});
});
</script>
<style type="text/css">
#calendar{
font-family: Tahoma;
font-size:12px;
color:#666;
border-collapse: collapse;
text-align: center;
background-color:#F0F0F0;
}
#calendar td{
padding:5px;
}
#calendar a{
text-decoration: none;
color:#ccc;
}
#calendar a:hover{
text-decoration:underline;
color:#fff;
}
#tr_month_title,#ft_calendar{
background-color:#666;
color:#ccc;
}
#tr_day_name{
background-color:#555;
color:#fff;
}
.day_calendar{
background-color:#ccc;
}
.holiday_calendar{
background-color:#FC9;
}
.today_calendar{
background-color:#FFCC00;
border:1px solid #FF9933;
}
</style>
</head>
<body>
<div id="calendar_show"><!--แสดงปฏิทินตรงนี้ --></div>
</body>
</html>
คำสั่งที่น่าสนใจในไฟล์นี้คือ
- $_CalendarShow('calendar.php','calendar_show'); เป็นfunctionแสดงผลปฏิทิน โดยการทำงานภายในฟังก์ชั่นนี้จะเป็นแบบ AJAX โดยจะร้องขอไฟล์ calendar.php มาแสดงใน calendar_show ซึ่งเป็นชื่อ id ของ Tag Div ครับ
- $('#go_calendar').live ('click',function(){
$_CalendarShow($(this).attr('href'),'calendar_show');
return false;//ให้linkหยุดการredirect
}); เป็นคำสั่งที่ตรวจจับเหตุการณ์ (Event) จากการคลิก Click ที่เครื่องหมาย << ,>> ,เดือนปัจจุบัน เพื่อส่งค่าURL ($(this).attr(‘href’)) ไปร้องขอไฟล์ปฏิทิน(calendar.php)มาแสดงครับ
ไฟล์ calendar.php ->เป็นไฟล์รับการร้องขอ request จากไฟล์ calendarshow.html แล้วResponseค่าข้อมูลปฏิทินในเดือน/ปีที่ร้องขอ ไปแสดงที่ไฟล์ calendarshow.html
<?php
$dayname=array(0=>'อา.',1=>'จ.',2=>'อ.',3=>'พ.',4=>'พฤ.',5=>'ศ.',6=>'ส.');
$month_name=array(1=>'มกราคม',2=>'กุมภาพันธุ์',3=>'มีนาคม',4=>'เมษายน',5=>'พฤษภาคม',6=>'มิถุนายน',7=>'กรกฎาคม',8=>'สิงหาคม',9=>'กันยายน',10=>'ตุลาคม',11=>'พฤศจิกายน',12=>'ธันวาคม');
$m_y=$_GET['m_y']==''?date('Y-n'):$_GET['m_y'];
$sp_m_y=explode('-',$m_y);//แยกค่าเดือน/ปี ออกจากกันโดยใช้ แบ่งตามเครื่องหมาย "-" จะได้ $sp_m_y[0]=ปี,$sp_m_y[1]=เดือน
$nextMonth=date('Y-n', mktime(0,0,0,($sp_m_y[1]+1),1,$sp_m_y[0]));//หาเดือน/ปีก่อนหน้า
$prevMonth=date('Y-n',mktime(0,0,0,($sp_m_y[1]-1),1,$sp_m_y[0]));//หากเดือน/ปีถัดไป
$fistday=date('w',strtotime( $m_y.'-1' ));//หาวันแรกแรกของเดือนตรงกับวันอะไร(0-6)
$numsday=date('t',strtotime($m_y));//หาจำนวนวันในเดือนใดๆ
$tday1=$fistday+$numsday;//วันที่เหลือ+กับจำนวนวันทั้งหมดของเดือนปีใดๆ
$tday2=ceil($tday1/7)*7;//หาช่องแสดงวันที่ทั้งหมดของปฏิทินในเดือนปีใดๆ
echo '<table id="calendar">';
echo '<colgroup>
<col class="holiday_calendar" />
<col span="5" />
<col class="holiday_calendar" />
</colgroup>';
echo '<tr><td colspan="7" id="tr_month_title">';
echo '<a href="calendar.php?m_y='.$prevMonth.'" title="เดือนก่อนหน้า" id="go_calendar">«</a> ';
echo $month_name[$sp_m_y[1]*1];
echo ' ปี '.($sp_m_y[0]+543);
echo ' <a href="calendar.php?m_y='.$nextMonth.'" title="เดือนถัดไป" id="go_calendar">»</a></td></tr>';
echo '<tr id="tr_day_name">';
foreach($dayname as $val){
echo '<td>'.$val.'</td>';
}
echo '</tr>';
for($i=1;$i <=$tday2;$i++){
if($i%7==1){echo '<tr>';}
$dayreal=($i-$fistday>=1&&$i-$fistday<=$numsday)?$i-$fistday:'';
$today=date('Y-n-j')==$m_y.'-'.($i-$fistday)?'class="today_calendar"':'';
echo '<td '.$today.'>';
echo $dayreal;
echo '</td>';
if($i%7==0){
echo '</tr>';
}
}
echo '<tr><td colspan="7" id="ft_calendar"><a href="calendar.php?m_y='.date('Y-n').'" id="go_calendar">เดือนปัจจุบัน</a></td></tr>';
echo '</table>';
?>
ไฟล์นี้ไม่ต้องอธิบายนะครับ เพราะได้Comment เฉพาะคำสั่งที่สำคัญเอาไว้แล้วครับ เจอกันในบทความหน้าครับ แต่ก็ยังไม่รู้ว่าจะสอนอะไรดี - - ''DEMO->http://pluto.host22.com/calendar/calendarshow.html
เยี่ยมเลยกำลังต้องการพอดี^^ขอบคุณครับ
ตอบลบไฟล์ calendar.php ผมได้เปลี่ยนคำสั่งนิดหน่อยนะครับ จาก date('Y-n-d') เปลี่ยนเป็น date('Y-n-j') (บรรทัดที่ 31)
ลบพอดีว่าเวลารันไฟล์ calendarshow.html แล้วไม่มีปฏิทินขึ้นมาน่ะครับ แต่ถ้ารันไฟล์ calendar.php แล้วจะมีปฏิทินขึ้นมาตามปกติครับ แค่ไม่มีสี ไม่มีเลือกวันที่ปัจจุบันครับ
ตอบลบอ่า ตอนนี้ขึ้นแล้วครับ เป็นที่ path ของ jquery ครับ ผมรู้มาจากบทความของคุณนี่แหละ ยังไงก็ขอบคุณมากครับ ที่แบ่งปันสิ่งดีดี ^^
ตอบลบผมเจอปัญหาแบบเดียวกันครับ มันต้องแก้ยังไงอ่ะครับตัว path ของ JQuery เนี่ย ?
ตอบลบถ้าระบุพาธไม่เป็น วิธีแก้คือ
ลบเอาคำสั่ง <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
ไปแทนที่ คำสั่ง
<script type="text/javascript" src="js/jquery.js"></script>
ในไฟล์ calandarshow.html ครับ แต่ต้องต่อเนตด้วยนะครับ
Notice: Undefined index: m_y ตัวแปรนีใช้ทำไรอ่าครับ
ตอบลบเหมือนมันหาอินเด็กm_yไม่เจออ่าครับ พอผมคลิกเปลี่ยนเดือน มันก็จะเปลี่ยนเพจไปลิ้งที่calendar.php
ลบลองเปลี่ยนคำสั่งใหม่ครับ ปัญหาน่าจะมาจากเวอร์ชั่นของ PHP ครับ
ลบจาก
$m_y=$_GET['m_y']==''?date('Y-n'):$_GET['m_y'];
เป็น
$m_y='';
if(empty($_GET['m_y'])){
$m_y=date('Y-n');
}else{
$m_y=$_GET['m_y'];
}