ปฏิทินเหตุการณ์ ด้วย Ajax
ปฏิทินเหตุการณ์ แบบที่ใช้กับ blog (AJAX)
ข้างบนคือโค้ดหน้าหลักครับ ส่วนที่เป็น CSS และ Javascript (AJAX) ครับ มีคำอธิบายอยู่ในโค้ดแล้ว สามารถแยกเอา Javascript ออกเป็นไฟล์ได้ตามสะดวกครับ ส่วนหน้าตาก็ออกมาคล้ายๆกับปฏิทินของบล๊อกนี้แหละครับ (แก้ไขเอาที่ CSS)
ส่วนนี้คือ carlendar.php เป็นส่วนที่ AJAX เรียกเพื่อสร้างปฏิทินครับ
ส่วนที่ยากหน่อยก็คงจะเป็นการเก็บเหตุการณ์ละครับ ตามตัวอย่าง query ที่เห็นเป็น query ของบล๊อกนี้แหละครับ คงต้องใช้ความสามารถดัดแปลงกันเล็กน้อย (อ่านมาจาก MySQL)
ส่วนหน้าตาผมใช้ CSS ในการควบคุมก็ดัดแปลงเอาตามใจชอบนะครับ
<!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>AJAX Calendar demo by g-O-r-a-g-o-d.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
table.calendar {
border:1px solid navy;
}
table.calendar * {
font-family:Tahoma;
color:#000000;
font-size:9pt;
}
table.calendar th {
color:#666666;
background-color:#F5F5F5;
padding:2px;
}
table.calendar td {
width:30px;
text-align:center;
line-height:30px;
}
table.calendar a {
text-decoration:none;
font-weight:bold;
color:maroon;
}
table.calendar td.today {
background-color:#BBBBBB;
}
</style>
<script type="text/javascript">
function Inint_AJAX()
{
try
{
return new ActiveXObject( "Msxml2.XMLHTTP" ); //IE
}
catch( e )
{
}
try
{
return new ActiveXObject( "Microsoft.XMLHTTP" ); //IE
}
catch( e )
{
}
try
{
return new XMLHttpRequest(); //Native Javascript
}
catch( e )
{
}
alert( "XMLHttpRequest not supported" );
return null;
};
function loadcalendar( query )
{
var req = Inint_AJAX();
req.open( "POST" , "calendar.php" , true );
req.onreadystatechange = function()
{
if ( req.readyState == 4 )
{
if ( req.status == 200 )
{
document.getElementById( 'calendar' ).innerHTML = req.responseText;
};
};
};
req.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
req.send( query );
};
</script>
</head>
<!-- โหลดปฏิทินครั้งแรกตอนเริ่มต้นตามค่าที่ส่งมา
สามารถเรียกได้โดยใช้ query ?m=1&y=1
m=เดือน 1-12
y=ปี พศ.
ถ้าไม่กำหนดจะใช้เดือน-ปี ปัจจุบัน -->
<body onload="loadcalendar('<?="m=".$_GET[m]."&y=".$_GET[y]?>')">
<div id="calendar">กำลังโหลด...</div>
</body>
</html>ข้างบนคือโค้ดหน้าหลักครับ ส่วนที่เป็น CSS และ Javascript (AJAX) ครับ มีคำอธิบายอยู่ในโค้ดแล้ว สามารถแยกเอา Javascript ออกเป็นไฟล์ได้ตามสะดวกครับ ส่วนหน้าตาก็ออกมาคล้ายๆกับปฏิทินของบล๊อกนี้แหละครับ (แก้ไขเอาที่ CSS)
<?
header( "Expires: Sat, 1 Jan 2005 00:00:00 GMT" );
header( "Last-Modified: ".gmdate( "D, d M Y H:i:s" )."GMT" );
header( "Cache-Control: no-cache, must-revalidate" );
header( "Pragma: no-cache" );
header( "content-type: application/x-javascript; charset=UTF-8" );
//ปรับเวลาให้ตรงกับเวลาเมืองไทย กรณีที่ server อยู่ที่เมืองนอก โดยความสำคัญอยู่ที่ตัวแปร $hour และ $min
$hour = +0; //ปรับให้ตรงตามต้องการ เช่น เป็นค่าบวก หรือค่าลบ เพื่อให้เวลาของ server ตรงกับเวลาจริง
$min = 0; //ปรับให้ตรงตามต้องการ
$thaimonth = array( "มค." , "กพ." , "มีค." , "เมย." , "พค." , "มิย." , "กค." , "สค." , "กย." , "ตค." , "พย." , "ธค." );
$fullthaimonth = array( "มกราคม" , "กุมภาพันธ์" , "มีนาคม" , "เมษายน" , "พฤษภาคม" , "มิถุนายน" , "กรกฎาคม" , "สิงหาคม" , "กันยายน" , "ตุลาคม" , "พฤศจิกายน" , "ธันวาคม" );
//เวลา mmktime
$mmktime = mktime( date( "H" ) + $hour, date( "i" ) + $min );
$year = date( 'Y' , $mmktime ) + 543; //ปีปัจจุบัน ปี พศ.
$cyear = ( (int)$_POST[y] != 0 ) ? $_POST[y] : $year; //ปีในปฏิทิน ค่าที่ส่งมาเป็นปี พศ.
$month = date( 'm' , $mmktime ); //เดือนปัจจุบัน
$cmonth = ( (int)$_POST[m] != 0 ) ? $_POST[m] : $month; //เดือนในปฏิทิน ค่าที่ส่งมา 1=มกรา,12=ธันวาคม
$mkdate = mktime( 0 , 0 , 0 , $cmonth , 1 , $cyear - 543 ); //คำนวณวันแรกของเดือนนี้ (คำนวณเป็น ปีคศ.)
$weekday = date( 'w' , $mkdate );
$last_days = date( 't' , $mkdate );
$day = 1;
$nmonth = ( $cmonth < 12 ) ? 'm='.( $cmonth + 1 ).'&y='.$cyear : 'm=1&y='.( $cyear + 1 );
$bmonth = ( $cmonth > 1 ) ? 'm='.( $cmonth - 1 ).'&y='.$cyear : 'm=12&y='.( $cyear - 1 );
//อ่านอีเวนต์ ถ้ามีอีเว้นต์
//ถ้ามีอีเวนต์ รายการวันที่นั้นๆจะเป็นลิงค์
//ตัวอย่างนี้เป็นการแสดงอีเวนต์เหตุการณ์ของ GBlog
//$sql = "SELECT `id`,DAY(`create`) as date FROM `$db_blogs` ";
//$sql .= "WHERE `userid`='$user' AND MONTH(`create`)='$cmonth' AND YEAR(`create`)=".$cyear.";";
//$query = @mysql_query( $sql );
//$rows = @mysql_num_rows( $query );
//$blog_month_array = array(); //แอเรย์เก็บข้อมูล id ตามวันที่
//เอาข้อมูลอีเว้นต์ในเดือนใส่ลง array $blog_month_array ตามวันที่
//for ( $i = 0 ; $i < $rows ; $i++ )
//{
// $result = @mysql_fetch_array( $query );
// $blog_month_array[$result[date]] = $result [id];
//};
?>
<table cellpadding="0" cellspacing="0" class="calendar">
<tr>
<th><a href="?<?=$bmonth?>" title="เดือนก่อน" onclick="loadcalendar('<?=$bmonth?>');return false"><</a></th>
<th colspan="5"><?=$fullthaimonth[$cmonth - 1]." ".$cyear?></th>
<th><a href="?<?=$nmonth?>" title="เดือนถัดไป" onclick="loadcalendar('<?=$nmonth?>');return false">></a></th>
</tr>
<tr>
<th>อา.</th>
<th>จ.</th>
<th>อ.</th>
<th>พ.</th>
<th>พฤ.</th>
<th>ศ.</th>
<th>ส.</th>
</tr>
<tr>
<?
$start = 1;
while( $start <= $weekday )
{
echo "<td> </td>";
$start++;
}
$weekday++;
while( $day <= $last_days )
{
if ( isset( $blog_month_array[$day] ) ) //ถ้ามีเหตุการณ์จะแสดงวันที่เป้นลิงค์
{
$date = "<a href=\"?d=".$day.'-'.$month.'-'.$year."\">$day</a>";
}
else //แสดงวันที่เป็นตัวหนังสือปกติ
{
$date = $day;
};
if( date( 'j' ) == $day && $month == $cmonth && $year == $cyear ) //วัน-เดือน-ปี ปัจจุบัน
{
echo "<td class='today'>$date</td>";
}
else //วันอื่นๆ
{
echo "<td>$date</td>";
}
if( $weekday == 7 && $day != $last_days )
{
echo '</tr><tr>';
$weekday = 0;
}
$day++;
$weekday++;
}
while( $weekday <= 7 )
{
echo "<td> </td>";
$weekday++;
}
?>
</tr>
</table>ส่วนนี้คือ carlendar.php เป็นส่วนที่ AJAX เรียกเพื่อสร้างปฏิทินครับ
ส่วนที่ยากหน่อยก็คงจะเป็นการเก็บเหตุการณ์ละครับ ตามตัวอย่าง query ที่เห็นเป็น query ของบล๊อกนี้แหละครับ คงต้องใช้ความสามารถดัดแปลงกันเล็กน้อย (อ่านมาจาก MySQL)
ส่วนหน้าตาผมใช้ CSS ในการควบคุมก็ดัดแปลงเอาตามใจชอบนะครับ