A-AA+then

ปฏิทินเหตุการณ์ แบบที่ใช้กับ blog (AJAX)

<!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]."&amp;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 ).'&amp;y='.$cyear : 'm=1&amp;y='.( $cyear + 1 );
  $bmonth = ( $cmonth > 1 ) ? 'm='.( $cmonth - 1 ).'&amp;y='.$cyear : 'm=12&amp;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">&lt;</a></th>
<th colspan="5"><?=$fullthaimonth[$cmonth - 1]." ".$cyear?></th>
<th><a href="?<?=$nmonth?>" title="เดือนถัดไป" onclick="loadcalendar('<?=$nmonth?>');return false">&gt;</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>&nbsp;</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>&nbsp;</td>";
    $weekday++;
  }
?>

</tr>
</table>

ส่วนนี้คือ carlendar.php เป็นส่วนที่ AJAX เรียกเพื่อสร้างปฏิทินครับ

ส่วนที่ยากหน่อยก็คงจะเป็นการเก็บเหตุการณ์ละครับ ตามตัวอย่าง query ที่เห็นเป็น query ของบล๊อกนี้แหละครับ คงต้องใช้ความสามารถดัดแปลงกันเล็กน้อย (อ่านมาจาก MySQL)

ส่วนหน้าตาผมใช้ CSS ในการควบคุมก็ดัดแปลงเอาตามใจชอบนะครับ

 

Ajax

Relate

^