สาเหตุที่ผมสอนทำปฏิทินด้วยภาษา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'];
}