2009-11-03 137 views
11

我想將jQuery fullcalendar整合到我的PHP網站中,但我不知道如何處理該事件以及如何使用MySQL中的JSON數據。將jQuery fullcalendar集成到PHP網站

任何意見,將不勝感激。

+0

這是你指的這個日曆嗎? http://www.redredred.com.au/projects/jquery-week-calendar/ – elzapp 2009-11-03 09:14:23

+0

如果真的很緊急,你應該嘗試IRC頻道http://blog.jquery.com/2007/02/17/the- jquery-irc-channel/... – chakrit 2009-11-03 09:21:26

+11

爲什麼我們會在乎任務是否緊急?對我來說,這通常是回答這個問題的原因。如果您需要快速完成某些工作,請找到一些有償支持。 – Duroth 2009-11-03 09:23:56

回答

14

確保您的PHP可以輸出的F ollowing HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 

    <script> 
    $(document).ready(function(){ 
    $('#example').calendar(); 
    }); 
    </script> 

</head> 
<body> 
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)"> 
<script src="http://dev.jquery.com/view/trunk/plugins/calendar/jquery-calendar.js"></script> 
<input type="text" id="example" value="Click inside me to see a calendar" style="width:300px;"/> 
</body> 
</html> 

這裏是a sample你如何能做到這一點,通過使用json_encode:

$(document).ready(function() { 

     $('#calendar').fullCalendar({ 
     draggable: true, 
     events: "json_events.php", 
     eventDrop: function(event, delta) { 
      alert(event.title + ' was moved ' + delta + ' days\n' + 
       '(should probably update your database)'); 
     }, 
     loading: function(bool) { 
      if (bool) $('#loading').show(); 
      else $('#loading').hide(); 
     } 
     }); 

    }); 

而這裏的PHP代碼:

<?php 

    $year = date('Y'); 
    $month = date('m'); 

    echo json_encode(array( 

     array( 
     'id' => 1, 
     'title' => "Event1", 
     'start' => "$year-$month-10", 
     'url' => "http://yahoo.com/" 
    ), 

     array( 
     'id' => 2, 
     'title' => "Event2", 
     'start' => "$year-$month-20", 
     'end' => "$year-$month-22", 
     'url' => "http://yahoo.com/" 
    ) 

    )); 

?> 
+1

非常感謝您的評論。但我認爲你有一些誤解,或者我沒有很清楚地描述它。 我想添加jquery weekcalendar插件,並有一個示例。一切都在那裏。但我想使它與MySQL數據庫一起工作。 非常感謝!!!!!!! – 2009-11-03 09:29:40

+0

取決於服務器確保你有'date_default_timezone_set('America/YOUR_TZ');'在日期(XXX)'之前'呼叫 – roberthuttinger 2012-10-16 20:11:02

0

我不熟悉jquery。但我認爲問題是你沒有考慮到Ajax的異步性質。

除非fullCalendar()做了一些非常奇怪的事情(觸發Ajax請求並等待響應),那麼您將無法以該方式在​​函數中使用外部源,因爲fullCalendar將完成運行從服務器返回響應的時間。

似乎沒有一個清楚的例子,你在星期日曆網頁上試圖做什麼,但我確定你需要的是創建沒有事件的日曆,但是定義了一個回調事件;然後以某種方式解除外部電話。

+0

感謝您的發佈。你有點表示我的問題。實際上,我無法添加/編輯/刪除事件,也無法以json的方式從mysql獲取數據。我會盡量安排和解決它。謝謝。 – 2009-11-03 14:30:15

0

我覺得你有和我一樣的問題。我在網上搜索瞭解如何設置DateTime,以便fullCalendar JavaScript將正確解釋它。 (這個頁面有一些很好的線索:http://blog.stevenlevithan.com/archives/date-time-format)。

我發佈在fullCalendar問題頁面上,希望創作者或任何其他人都能對這個主題有所瞭解。

==================== ISSUE說明====================

哪些步驟將重現該問題?

  1. 使用JSON
  2. 使用取此事件的JSON字符串:

 

[{"id":2, "title":"title of 2","start":"2009-11-17T10:00:00" ,"end":"2009-11-17T11:01:00","url":"?eventID=2"}] 

什麼是預期的輸出?你看到了什麼呢?

  • 我認爲這個事件會在日曆中顯示,開始時間爲 10:00,結束時間爲11:01。
  • 它顯示爲一整天的事件。

您使用的是什麼版本的產品?在什麼操作系統上?

  • FullCalendar v1.4。1
  • 的Windows XP

請在下面提供任何其他信息。

我正在使用aspx頁面來獲取日曆事件。我的猜測是, 我在JSON中返回的JavaScript DateTime對象 的格式有問題,並且這導致fullcalendar至 將事件解釋爲fullDayEvents。我在 JSON中發送的格式是:2009-11-17T11:01:00

3

我有同樣的問題,只是發現如何使它工作。 下面是你應該在你的PHP文件中使用的代碼:

$query = "select * from events where accountNo = '$accountNo'"; 
$res = mysql_query($query) or die(mysql_error()); 
$events = array(); 
while ($row = mysql_fetch_assoc($res)) { 
    $start = "2010-01-08T08:30"";//Here you have to format data from DB like this. 
    $end = "2010-01-08T08:30";//This format works fine 
    $title = $row['firstName']." ".$row['lastName']; 
    $eventsArray['id'] = $row['id']; 
    $eventsArray['title'] = $title; 
    $eventsArray['start'] = $start; 
    $eventsArray['end'] = $end; 
    $eventsArray['allDay'] = ""; 
    $events[] = $eventsArray; 
} 


echo json_encode($events); 

我希望它能幫助:)。

9

「2010-02-11 11:00:00」格式可以很好地爲我指定時間(裏面沒有「T」), 解決方案的關鍵是將事件的「allDay」屬性設置爲空字符串。

+0

噢謝謝夥計它救了我 – chhameed 2013-01-08 12:46:38

0

嘿,我沒有使用你的代碼之上,但在json_events.php默認的,有 「[」在PHP輸出的開始「]」就結束

0

這個例子的工作原理:

$sql= "SELECT id, title, start, DATE_FORMAT(start, '%Y-%m-%dT%H:%i') AS startDate 
FROM kalender 
ORDER BY startDate DESC"; 
$res = mysql_db_query($db, $sql, $conn) or die(mysql_error()); 

$events = array(); 
//important ! $start = "2010-05-10T08:30"; iso8601 format !! 
while ($row = mysql_fetch_assoc($res)) { 
    $eventArray['id'] = $row['id']; 
    $eventArray['title'] = $row['title']; 
    $eventArray['start'] = $row['startDate']; 
    $events[] = $eventArray; 
} 
echo json_encode($events); 
1

輸出呼應的事件應該是這種格式:

$('#calendar').fullCalendar({ 
    events: [{ 
    title: 'Awesome Event Title', 
    start: new Date($start_year, $start_month, $start_day),  or end: new Date(y, m, d), 
    end: new Date($end_year, $end_month, $end_day) or end: new Date(y, m, d) 
    }] 
}); 
1

實現這種方式,它工作正常

$result = mysql_query("SELECT * FROM eventoform",$conexion); 
     $array = array(); 
     $i = 0; 
     while ($row = mysql_fetch_array($result)) { 
      $array[$i]=array("id"=>$row["id_evento"],"title"=>$row["NombreEvento"],"start"=>$row["FechaInicio"]." ".$row["HoraInicio"],"allDay"=>false,"description"=>$row["description"],"editable"=>true); 
      $i++; 
     } 

echo json_encode($array); 
3

在PHP - JSON:

$eventsArray['allDay'] = "false"; //doesn't work 

$eventsArray['allDay'] = false; //did the trick to have a NON FULL DAY correctly rendered!! 
0

以防萬一有一個人使用導軌與JBuilder中生成JSON提要...你必須添加阿迪屬性 ...

json.array!(@resubmissions) do |object| 
    json.id object.id 
    json.title "WVL - #{object.to_s}" 
    json.start object.resubmission_at.to_i 
    json.allDay false 
end 

然而,由於對PHP的解決方案!