2012-03-13 6 views
6

Làm thế nào để hiển thị sự kiện lặp lại trong Jquery fullcalender ?? như sự kiện bắt đầu vào ngày cụ thể và tiếp tục chạy trong một năm tới, sau đó làm thế nào tôi sẽ hiển thị điều này trong fullcalender.Jquery Fullcalender định kỳ sự kiện

Lưu ý: thông tin sự kiện is Coming từ cơ sở dữ liệu

Cảm ơn trước

+1

Người đọc trong tương lai, có những cách dễ dàng hơn để thực hiện việc này ngay bây giờ (có thể, nó phụ thuộc vào nhu cầu cụ thể của bạn). Xem http://stackoverflow.com/questions/15161654/recurring-events-in-fullcalendar – slicedtoad

Trả lời

14

Lịch đầy đủ không hỗ trợ hoạt động định kỳ ra khỏi hộp. Đây là những gì tôi đã làm.

Khi tôi thêm sự kiện, tôi có hộp chọn dành cho các sự kiện định kỳ. Giả sử người dùng chọn nó lặp lại hàng tuần. Sau đó tôi chèn một sự kiện vào bảng sự kiện của tôi với một ID cha mẹ sẽ giống nhau cho tất cả các trường hợp của sự kiện đó.

Toàn bộ lịch làm cho nó để các sự kiện định kỳ phải có cùng một ID sự kiện. Vì vậy, trong bảng sự kiện của tôi, tôi có cột ID sự kiện duy nhất và ID cha là cột tôi sử dụng để hiển thị sự kiện. Vì vậy, dù sao, ngay sau khi tôi chèn sự kiện đầu tiên, tôi chạy vòng lặp chọn sự kiện được chèn cuối cùng với cùng một ID cha, thêm 7 ngày vào nó và chèn nó vào bảng sự kiện. Tôi lặp lại quá trình này 50 lần và sau đó tôi có một sự kiện diễn ra hàng tuần trong một năm.

Dưới đây là một số mã:

Khi người dùng chọn một khung thời gian tôi mở một hộp thoại

select: function(start, end){ 

      $("#add_class").dialog("open"); 
    }, 

Trên hộp thoại, tôi có một danh sách thả xuống chọn

<div id="add_class" title="Add New Class"> 

    <form action=""> 
    <div id="recurring_event"> 
     <label for = "recurring">Recurring </label> 
     <input type="checkbox" name="recurring" id="recurring" /> 
     <div id = "recurring_options" > 
      Repeat every <select name = "repeat_frequency" id = "repeat_frequency"> 
      <option value ="1">Day</option> 
      <option value="7" selected="selected">Week</option> 
      <option value = "28">Month</option> 
      </select> 
     </div> 
     </div> 
     </form> 
</div> 

Sau đó tôi gửi thông tin này sử dụng AJAX cho trang php có tên là add_class.php

$("#add_class").dialog({ 

    "Save Class": function() { 
      var repeat_frequency = $("#repeat_frequency").val(); 
      $.ajax({ 
       type:"POST", 
       url: "add_class.php", 
       data: "repeat_frequency=" + repeat_frequency, 
       async: false, 
      }); 
       $('#calendar').fullCalendar('refetchEvents'); 
       $(this).dialog("close"); 

      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     }, 

Ở đây có phần add_class.php nơi tôi thực sự nhập nó vào cơ sở dữ liệu

 $repeat_frequency = $_POST['repeat_frequency']; 

     $dbh = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password); 
     $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION, PDO::MYSQL_ATTR_USE_BUFFERED_QUERY); 
     $stmt = $dbh->prepare(
        "INSERT INTO events (start, end) //whatever variables you received from the AJAX post on the dialog form 
        VALUES (:start, :end)"); 

     $stmt->bindParam(':start', $start); 
     $stmt->bindParam(':end', $end); 
     $stmt->execute(); 

     $id = $dbh->lastInsertId(); 

     for($x = 0; $x < "51"; $x++) { 

     $stmt = $dbh->prepare(" 
         SELECT start, end 
         FROM events 
         WHERE event_id = :event_id "); 

     $stmt->bindParam(':event_id', $event_id, PDO::PARAM_STR); 
     $stmt->execute(); 
     $result = $stmt->fetch(PDO::FETCH_ASSOC); 
     $start = $result['start']; 
     $end = $result['end']; 

     $start_date= strtotime($start . '+' . $repeat_frequency . 'DAYS'); 
     $end_date= strtotime($end . '+' . $repeat_frequency . 'DAYS'); 
     $start = date("Y-m-d H:i", $start_date); 
     $end = date("Y-m-d H:i", $end_date); 
     unset($stmt); 
     $stmt = $dbh->prepare(
        "INSERT INTO events (start, end) //and whatever other columns you need 
        VALUES (:start, :end)"); 


     $stmt->bindParam(':start', $start, PDO::PARAM_STR); 
     $stmt->bindParam(':end', $end, PDO::PARAM_STR); 
     $stmt->execute(); 
     $event_id = $dbh->lastInsertId(); 
} 

Vì vậy, đó chỉ là một ý chính nói chung của sự vật. Hy vọng rằng không có quá nhiều lỗi chính tả như tôi đã cố gắng chỉnh sửa nó xuống chỉ là yếu tố cần thiết để có được điểm trên. Hãy cho tôi biết nếu bạn có bất kỳ câu hỏi.

EDIT

Để "hiển thị" các sự kiện trên fullcalendar bạn cần phải có một nguồn sự kiện.

kiểm tra liên kết này

http://fullcalendar.io/docs/event_data/events_json_feed/

Trong json-events.php của bạn bạn echo dữ liệu sự kiện và sau đó nó sẽ được hiển thị trên lịch của bạn.

Có một cái gì đó như thế này để hiển thị các sự kiện trên trang lịch của bạn

$('#calendar').fullCalendar({ 
events: '/myfeed.php' 
}); 

Trong myfeed của bạn.tệp php có nội dung nào đó dọc theo dòng của

$dbh = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password); 
     $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // set the error mode to excptions 
     $stmt = $dbh->prepare("SELECT 
           event_id, title, start, end 
           FROM events 


           ORDER BY start"); 

     $stmt->execute(); 

     $events = array(); 

     while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){ //important ! $start = "2010-05-10T08:30"; iso8601 format !! 

      $eventArray['id'] = $row['event_id']; 
      $eventArray['title'] = $row['title']; 
      $eventArray['start'] = $row['start']; 
      $eventArray['end'] = $row['end']; 

      $events[] = $eventArray; 
      echo json_encode($events); 

Nếu bạn vẫn còn câu hỏi thì hãy tìm kiếm tại đây trên lưu lượng truy cập stackoverflow. Tôi nghĩ rằng tôi đã giải thích nó khá tốt và cung cấp nhiều mã. Đây là bài đăng trên blog mà tôi đã thực hiện cũng có thể giúp http://fajitanachos.com/Fullcalendar-and-recurring-events/ Tôi tìm thấy mọi thứ tôi cần để có được toàn bộ lịch chạy trên đây và trên trang chủ fullcalendar http://fullcalendar.io/

Tôi hy vọng điều này sẽ hữu ích.

+0

Cảm ơn bạn đã trả lời .... sẽ rất hữu ích nếu bạn gửi một số mã :) – Gautam

+0

Cảm ơn bạn đã trả lời .... đây là tất cả về tiết kiệm sự kiện định kỳ nhưng tôi muốn biết làm thế nào chúng ta sẽ hiển thị sự kiện định kỳ này trong Cơ sở dữ liệu và sử dụng Java với lịch này – Gautam

+0

Bạn đang sử dụng Java hoặc Javscript? Fullcalendar sử dụng Javascript. Với fullcalendar, bạn hiển thị các sự kiện bằng nguồn sự kiện. Đó có thể là Lịch Google hoặc các sự kiện từ cơ sở dữ liệu lấy từ tệp. Mỗi sự kiện mà bạn kết xuất phải có cùng một ID sự kiện. Cách dễ nhất là phải có một hàng riêng biệt trong cơ sở dữ liệu của bạn cho mỗi sự kiện với cùng một ID sự kiện. Tôi không biết cách tốt để lặp lại một sự kiện khi bạn chỉ gọi một sự kiện từ cơ sở dữ liệu của mình. – FajitaNachos