2012-03-13 37 views
6

¿Cómo se muestra el evento recurrente en Jquery fullcalender? al igual que el evento comienza en un día determinado y sigue funcionando durante el próximo año, ¿cómo lo mostraría en fullcalender?Evento recurrente de Jquery Fullcalender

Nota: la información del evento proviene de la base de datos

Gracias de antemano

+1

Lectores futuros, hay formas más fáciles de hacer esto ahora (posiblemente, dependa de sus necesidades específicas). Consulte http://stackoverflow.com/questions/15161654/recurring-events-in-fullcalendar – slicedtoad

Respuesta

14

calendario completo no soporta acontecimientos recurrentes fuera de la caja. Aquí esta lo que hice.

Cuando agrego un evento, tengo un cuadro de selección que es para eventos recurrentes. Digamos que un usuario lo selecciona para repetir cada semana. Luego inserto un evento en mi tabla de eventos con un ID padre que será el mismo para todas las instancias de ese evento.

El calendario completo lo hace para que los eventos recurrentes tengan que tener el mismo ID de evento. Por lo tanto, en mi tabla de eventos tengo una columna única de ID de evento y una ID principal, que es la columna que uso para representar eventos.

De todos modos, inmediatamente después de insertar el primer evento, ejecuto un ciclo que selecciona el último evento insertado con el mismo ID principal, le agrego 7 días y lo inserto en la tabla de eventos. Repaso este proceso 50 veces más y luego tengo un evento que ocurre todas las semanas durante un año.

Aquí hay algo de código:

Cuando un usuario selecciona un marco de tiempo abro un diálogo

select: function(start, end){ 

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

En el diálogo, tengo un menú desplegable seleccionar

<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> 

A continuación presento esta información usando AJAX a una página php llamada 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"); 
      } 
     }, 

Aquí viene la parte add_class.php en el que realmente lo inserta en la base de datos

 $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(); 
} 

Así que eso es sólo una idea general de las cosas. Con suerte, no hay demasiados errores tipográficos, ya que traté de editarlo solo a lo esencial para transmitir el mensaje. Hazme saber si tienes alguna pregunta.

EDITAR

Para eventos "Display" en fullcalendar es necesario tener una fuente de eventos.

la salida este enlace

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

En su JSON-events.php repites los datos del evento y luego se muestra en su calendario.

tener algo como esto para mostrar los eventos en su página del calendario

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

En su myfeed.archivo php tiene algo similar 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); 

Si aún tiene preguntas, busque aquí en stackoverflow. Creo que lo he explicado bastante bien y proporcioné muchos códigos. Aquí hay una publicación de blog que hice que también podría ayudarme http://fajitanachos.com/Fullcalendar-and-recurring-events/ Encontré todo lo que necesitaba para ejecutar fullcalendar aquí y en la página de inicio de fullcalendar http://fullcalendar.io/

Espero que esto ayude.

+0

Gracias por responder ... sería de gran ayuda si envía algún código :) – Gautam

+0

Gracias por responder .... esto es todo sobre el ahorro de eventos recurrentes, pero me gustaría saber cómo mostraríamos este evento recurrente en la base de datos y estoy usando Java con este calendario – Gautam

+0

¿Estás utilizando Java o Javscript? Fullcalendar usa Javascript. Con fullcalendar, visualiza los eventos usando un origen de evento. Eso puede ser un Calendario de Google o eventos de una base de datos que extraen de un archivo. Cada evento que represente debe tener el mismo ID de evento. La forma más fácil es tener una fila separada en su base de datos para cada evento con el mismo ID de evento. No conozco una buena forma de repetir un evento cuando solo llamas a un evento desde tu base de datos. – FajitaNachos