PHP Calendar : สร้างปฏิทินมุมมองแบบสัปดาห์

ได้เพิ่มมาแล้วกับปฏิทินอีกหนึ่งมุมมอง หลังจากที่สร้างปฏิทินมุมมองแบบเดือน ทิ้งไว้หลายเดือน ก็ถึงเวลาซะทีสำหรับเริ่มจัดการกับมุมมองที่เหลือ และคงจะมีอีกหลายๆส่วนตามมาเรื่อยๆครับ

รู้สึกจะผูกพันธ์กับการเขียนโค๊ดปฏิทินอย่างบอกไม่ถูก อาจจะเป็นเพราะก้าวแรกของการเป็นโปรแกรมเมอร์ของผมเริ่มทดลองงานด้วยโปรเจ็กต์ Todolist ก็เป็นได้

และหลังจากนั้นงานที่ได้รับมอบหมายก็มักจะเกี่ยวกับปฏิทินอยู่ตลอด เช่นการติดตามลูกค้า ทั้งลูกค้าเป้าหมาย และบริการหลังการขาย และงานลูกค้าสัมพันธ์ ก่อนที่จะไปไกลถึงเรื่องอื่น เรามาเริ่มกันต่อที่ปฏิทินมุมมองแบบสัปดาห์กันเลยครับ

เริ่มจากสร้างไฟล์ template สำหรับเก็บโค๊ด HTML view/week_calendar.php

<div id="nav">
<button class="navLeft" onclick="loadWeekCalendar('{prevWeek}');"><< สัปดาห์ที่แล้ว</button>
<br />
<div class="title">
{title}</div>
<button class="navRight" onclick="loadWeekCalendar('{nextWeek}');">สัปดาห์ต่อไป >></button>
</div>
<div style="clear: both;">
</div>
{thead_day}

{/thead_day}

{hour_list}

{/hour_list}
<table border="1" id="tb_calendar">
<tbody>
<tr>
<th></th><th>{day_of_week}<br />
{date_month}</th></tr>
<tr>
<td>{hr}</td>
<td>{d1}</td>
<td>{d2}</td>
<td>{d3}</td>
<td>{d4}</td>
<td>{d5}</td>
<td>{d6}</td>
<td>{d7}</td>
</tr>
</tbody></table>

ไฟล์ themes/example/js/calendar.js เป็นตัวรับส่งข้อมูลแบบ Ajax ผ่าน jQuery

var ajaxURL = 'ajax_service.php?source=calendar';

var tplWeekCalen = loadContent('week_calendar.php');

/*-------- WEEK ----------*/
function successWeekCalen(data){
 var htmlData = parseHtml(tplWeekCalen, data);
 $('#my_calendar').html(htmlData);
}
function loadWeekCalendar(date){
 var param = '';
 if(date != undefined) param = '&date=' + date;
 getJSON(ajaxURL, 'action=week_calen' + param, successWeekCalen);
}

ไฟล์ ajax_service/calendar_ajax.php ทำหน้าที่สร้างข้อมูลตามการร้องขอของผู้ใช้งาน

<?php
function createWeekLink($rs){
 return ''. $rs[2] . '';
}
function getDayIndex($value, $dayOfWeek){
 foreach($dayOfWeek as $index=>$arr){
  if($value == $arr['date_month']){
   return $index+1;
  }
 }
}
function genWeekCalenForJS()
{
 $weekDay = array( 'อาทิตย์', 'จันทร์', 'อังคาร', 'พุธ', 'พฤหัสฯ', 'ศุกร์', 'เสาร์');
 $date = isset($_GET['date']) ? $_GET['date'] : date('Y-m-d');
 
 $currentTime  = strtotime($date);
 $currentPoint  = date('w', $currentTime);       //ลำดับวันประจำสัปดาห์ 0-6 ถ้าวันที่ 2013-10-02 ได้เท่ากับ 3 
 $startTime   = strtotime("-$currentPoint day", $currentTime);//-3 วัน เท่ากับ  คือวันที่ 2013-09-29 จะได้ 1380412800
 
 //ลดเวลาลง 1 สัปดาห์
 $prevWeekTime = strtotime( '-7 day' , $currentTime  );
 $prevWeek = date('Y-m-d', $prevWeekTime);

 //เพิ่มเวลาขึ้น 1 สัปดาห์
 $nextWeekTime = strtotime( '+7 day' , $currentTime  );
 $nextWeek = date('Y-m-d', $nextWeekTime);

 //thead
 $dateWeek = array();
 for($i=0; $i<=6; $i++){
  $dateWeek[$i] = array(
      'day_of_week' => $weekDay[$i], 
      'date_month' => date('d/m', strtotime("+$i day", $startTime)) 
     );
 }

 //tbody
 //------ Database Query Current Month Only ------//
 //$data[{time}] = $rs;
 $data = array();
 $data['09'][] = array('tb_event', '120', 'กิจกรรม 1', '10/11');
 $data['09'][] = array('tb_follow', '875', 'ติดตาม 2', '10/11');
 $data['08'][] = array('tb_follow', '875', 'ติดตาม 2', '12/11');
 $data['10'][] = array('tb_follow', '11045', 'ติดตาม 1', '13/11');
 $data['12'][] = array('tb_news', '1054', 'ข่าวสาร 3', '14/11');
 $data['14'][] = array('tb_news', '1114', 'ข่าวสาร 4', '15/11');
 $data['15'][] = array('tb_news', '1114', 'ข่าวสาร 5', '16/11');
 $data['16'][] = array('tb_event', '1145', 'กิจกรรม 4', '12/11');
 //--- end db query ----//
 
 $dataList = array();
 $arr = array();
 for($hr=0;$hr<24 data-blogger-escaped-.="createWeekLink($rs);" data-blogger-escaped-arr="array(" data-blogger-escaped-as="" data-blogger-escaped-d1="" data-blogger-escaped-d2="" data-blogger-escaped-d3="" data-blogger-escaped-d4="" data-blogger-escaped-d5="" data-blogger-escaped-d6="" data-blogger-escaped-d7="" data-blogger-escaped-d="" data-blogger-escaped-data="" data-blogger-escaped-dateweek="" data-blogger-escaped-foreach="" data-blogger-escaped-hr="" data-blogger-escaped-if="" data-blogger-escaped-isset="" data-blogger-escaped-key="" data-blogger-escaped-rs="" data-blogger-escaped-strlen=""> "$hr:00", 
     'd1' => $d1,
     'd2' => $d2,
     'd3' => $d3,
     'd4' => $d4,
     'd5' => $d5,
     'd6' => $d6,
     'd7' => $d7,
    );
  $dataList[] = $arr;
 }
 //------ Database Query ------//
 
 $title = "";
 $json = array(
    'prevWeek'  => $prevWeek, 
    'nextWeek'  => $nextWeek,
    'title' => $title,
    'hour_list' => $dataList,
    'thead_day' => $dateWeek,
   );
 echo json_encode($json);
 //echo '', print_r($data, true), '';//ดูผลลัพธ์

}
?>

ดูตัวอย่างการทำงานได้ที่ DEMO

PHP สร้างเว็บไซต์ให้เป็นเรื่องง่ายๆ

ค้นหาบล็อกนี้