javascript - eventos - full calendar example

Eventos recurrentes en FullCalendar

Question

Estoy usando jQuery FullCalendar como mi calendario utilizado en mi sitio web para la agenda de disponibilidad.

¿Hay alguna función / método / opción en fullcalendar que maneje mis eventos recurrentes por días? Por ejemplo, el lunes solo hasta las 7:00 a.m. a las 9:00 a.m., los martes - 4:00 p.m. a 9:00 p.m., ¿algo así?

Answer 1

Eventos repetitivos simples

Para agregar una alternativa simple a las enumeradas aquí, Fullcalendar ahora (un tanto) admite eventos recurrentes semanales. Por lo tanto, si solo necesita algo como: [Every Monday and Thursday from 10:00am to 02:00pm] , puede usar lo siguiente:

events: [{
title:"My repeating event",
start: ''10:00'', // a start time (10am in this example)
end: ''14:00'', // an end time (2pm in this example)
dow: [ 1, 4 ] // Repeat monday and thursday
}],

JSFiddle

Esto está documentado en eventos de fondo pero también funciona para eventos regulares.

Guardar esto en una base de datos no sería difícil.

Agrega algunas restricciones

Si no desea que se repitan infinitamente, deberá agregar algunas fechas de inicio y finalización.

Entonces, en el DB:

• Deje que el evento que se muestra arriba represente el registro principal
• Tener otra mesa con fechas de inicio / finalización.
• Ejemplo de tabla unida:

eventId timeStart timeEnd dow dateStart dateEnd
1 10:00 12:00 [1,4] 2015/03/01 2015/04/01 // Month of March
1 10:00 12:00 [1,4] 2015/05/01 2015/06/01 // Month of May
1 10:00 12:00 [1,4] 2016/01/01 2017/01/01 // Year of 2017

Pase esto al cliente como JSON:

{ id:1, start:"10:00", end:"12:00", dow:[1,4],
ranges[{start:"2015/03/01", end:"2015/04/01"},
{start:"2015/05/01", end:"2015/06/01"},
{start:"2016/01/01", end:"2017/01/01"},]
}

Y del lado del cliente, use eventRender de eventRender para solo renderizar eventos cuando hay dentro de uno de los rangos de tiempo. Algo como esto debería funcionar:

eventRender: function(event){
return (event.ranges.filter(function(range){ // test event against all the ranges
return (event.start.isBefore(range.end) &&
event.end.isAfter(range.start));
}).length)>0; //if it isn''t in one of the ranges, don''t render it (by returning false)
},

Eso es suponiendo que tus eventos estén estructurados como:

var repeatingEvents = [{
title:"My repeating event",
id: 1,
start: ''10:00'',
end: ''14:00'',
dow: [ 1, 4 ],
ranges: [{ //repeating events are only displayed if they are within at least one of the following ranges.
start: moment().startOf(''week''), //next two weeks
end: moment().endOf(''week'').add(7,''d''),
},{
start: moment(''2015-02-01'',''YYYY-MM-DD''), //all of february
end: moment(''2015-02-01'',''YYYY-MM-DD'').endOf(''month''),
},/*...other ranges*/],
},/*...other repeating events*/];

JSFiddle

Durante la noche

En caso de que desee eventos repetitivos durante la noche ( como aquí ), simplemente pase más de las 24:00 para la hora de finalización. Por ejemplo:

{
start: ''10:00'', //starts at 10 on monday
end: ''27:00'', //24+3 is handled correctly.
dow: [1]
}

JSFiddle

Answer 2

Ahora hay un complemento que hará lo que quieras: http://momentjs.com/docs/#/plugins/recur/

Answer 3

Echa un vistazo a este sitio ... http://fajitanachos.com/Fullcalendar-and-recurring-events/

Ofrece muchos buenos insite en eventos recurrentes. FullCalendar admite eventos recurrentes con respecto a la identificación. Puede manejar los eventos del lado del servidor o del lado del cliente, pero la preferencia sería del lado del servidor. Le daré algunas ideas, pero no es todo incluido. Como he aprendido, los eventos recurrentes son difíciles de mantener.

Si quisiera manejar su lado del cliente, tendría que recorrer la frecuencia del evento repetitivo y la lógica de qué días. Probablemente necesites usar la devolución de llamada eventRender, luego renderizar cada evento en bucle usando la devolución de llamada de opciones. El problema con esto será que todavía tiene que guardar la frecuencia recurrente y un operador lógico para su opción de frecuencia en su base de datos ...

(columna 1: frecuencia = (int) 8, columna 2: tipo = enum (a''b''c), a = diario, b = semanal, c = mensual, etc.).

... y luego, en cualquier momento que edites ese evento, editará todos los eventos. Si necesita eliminar solo un evento, se encontrará con una serie de problemas dentro de su lógica y podría convertirse fácilmente en un desastre GIGANTE.

La segunda opción fue hacer todo este lado del servidor. Creando dos tablas, una con el evento padre y la segunda con todas sus repeticiones. En la tabla principal, debe almacenar la información general, como un ID único, color, color de fondo, título, día completo, frecuencia recurrente, frecuencia, tipo, etc. En la tabla secundaria, debe usar el ID único de la tabla padre para asociar cada repetición (tenga en cuenta que si desea eliminar / editar eventos individuales, las filas de la tabla secundaria también deben tener su propia identificación única y una columna que indique en qué tabla se encuentra). Cuando agrega un evento recurrente, necesita agregar un campo de enumeración que indique si es un evento recurrente o no, o no, como AKA ...

column: recurring = enum (''0'', ''1'') --- verdadero / falso

... y luego necesita agregar cada repetición, en la tabla secundaria con su información específica como inicio y final, etc. Cuando consulta el evento, puede consultar desde el padre y luego, si el evento es recurrente, obtener los eventos asociados en una segunda consulta, o puede usar INNER JOIN en table1.id = table2.parentID en una sola consulta.

Como puede ver, el evento recurrente puede ser muy detallado muy rápido, descubrir qué lógica necesita y espero que esto lo ayude a usted o a alguien, al menos, a comenzar. Aclamaciones.

Answer 4

En este momento estoy haciendo un proyecto donde tengo FullCalendar y tengo que hacer eventos recurrentes. Así que este es mi por qué cómo se puede hacer. Espero que este código ayude a alguien :)

Tengo la siguiente tabla en la base de datos:

CREATE TABLE IF NOT EXISTS `app_ext_calendar_events` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`users_id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`description` text,
`start_date` int(11) NOT NULL,
`end_date` int(11) NOT NULL,
`event_type` varchar(16) NOT NULL,
`is_public` tinyint(1) DEFAULT NULL,
`bg_color` varchar(16) DEFAULT NULL,
`repeat_type` varchar(16) DEFAULT NULL,
`repeat_interval` int(11) DEFAULT NULL,
`repeat_days` varchar(16) DEFAULT NULL,
`repeat_end` int(11) DEFAULT NULL,
`repeat_limit` int(11) DEFAULT NULL,
PRIMARY KEY (`id`),
KEY `idx_users_id` (`users_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=18 ;

y desarrollé la próxima clase php para obtener eventos con eventos repetidos:

<?php
class calendar
{
static public function get_events($date_from, $date_to,$calendar_type)
{
global $app_user;
$list = array();
$events_query = db_query("select * from app_ext_calendar_events where FROM_UNIXTIME(start_date,''%Y-%m-%d'')>=''" . $date_from . "'' and FROM_UNIXTIME(end_date,''%Y-%m-%d'')<=''" . $date_to . "'' and event_type=''" . $calendar_type . "'' and users_id=''" . db_input($app_user[''id'']) . "''");
while($events = db_fetch_array($events_query))
{
$list[] = $events;
}
if(count($repeat_events_list = calendar::get_repeat_events($date_to,$calendar_type)))
{
$list = array_merge($list,$repeat_events_list);
}
return $list;
}
public static function weeks_dif($start, $end)
{
$year_start = date(''Y'',$start);
$year_end = date(''Y'',$end);
$week_start = date(''W'',$start);
$week_end = date(''W'',$end);
$dif_years = $year_end - $year_start;
$dif_weeks = $week_end - $week_start;
if($dif_years==0 and $dif_weeks==0)
{
return 0;
}
elseif($dif_years==0 and $dif_weeks>0)
{
return $dif_weeks;
}
elseif($dif_years==1)
{
return (42-$week_start)+$week_end;
}
elseif($dif_years>1)
{
return (42-$week_start)+$week_end+(($dif_years-2)*42);
}
}
public static function months_dif($start, $end)
{
// Assume YYYY-mm-dd - as is common MYSQL format
$splitStart = explode(''-'', date(''Y-n'',$start));
$splitEnd = explode(''-'', date(''Y-n'',$end));
if (is_array($splitStart) && is_array($splitEnd))
{
$startYear = $splitStart[0];
$startMonth = $splitStart[1];
$endYear = $splitEnd[0];
$endMonth = $splitEnd[1];
$difYears = $endYear - $startYear;
$difMonth = $endMonth - $startMonth;
if (0 == $difYears && 0 == $difMonth)
{ // month and year are same
return 0;
}
else if (0 == $difYears && $difMonth > 0)
{ // same year, dif months
return $difMonth;
}
else if (1 == $difYears)
{
$startToEnd = 13 - $startMonth; // months remaining in start year(13 to include final month
return ($startToEnd + $endMonth); // above + end month date
}
else if ($difYears > 1)
{
$startToEnd = 13 - $startMonth; // months remaining in start year
$yearsRemaing = $difYears - 2; // minus the years of the start and the end year
$remainingMonths = 12 * $yearsRemaing; // tally up remaining months
$totalMonths = $startToEnd + $remainingMonths + $endMonth; // Monthsleft + full years in between + months of last year
return $totalMonths;
}
}
else
{
return false;
}
}
public static function get_repeat_events($date_to,$calendar_type)
{
global $app_user;
//convert date to timestamp
$date_to_timestamp = get_date_timestamp($date_to);
$list = array();
//get all events that already started (start_date<=date_to)
$events_query = db_query("select * from app_ext_calendar_events where length(repeat_type)>0 and FROM_UNIXTIME(start_date,''%Y-%m-%d'')<=''" . $date_to . "'' and event_type=''" . $calendar_type . "'' and users_id=''" . db_input($app_user[''id'']) . "''");
while($events = db_fetch_array($events_query))
{
$start_date = $events[''start_date''];
//set repeat end
$repeat_end = false;
if($events[''repeat_end'']>0)
{
$repeat_end = $events[''repeat_end''];
}
//get repeat events by type
switch($events[''repeat_type''])
{
case ''daily'':
//check repeat events day bay day
for($date = $start_date; $date<=$date_to_timestamp; $date+=86400)
{
if($date>$start_date)
{
$dif = round(abs($date-$start_date)/86400);
if($dif>0)
{
$event_obj = $events;
$event_obj[''start_date''] = strtotime(''+'' . $dif . '' day'',$event_obj[''start_date'']);
$event_obj[''end_date''] = strtotime(''+'' . $dif . '' day'',$event_obj[''end_date'']);
if(calendar::check_repeat_event_dif($dif,$event_obj,$repeat_end))
{
$list[] = $event_obj;
}
}
}
}
break;
case ''weekly'':
//check repeat events day bay day
for($date = $start_date; $date<=$date_to_timestamp; $date+=86400)
{
if($date>$start_date)
{
//find days dif
$dif = round(abs($date-$start_date)/86400);
//find week dif
$week_dif = calendar::weeks_dif($start_date, $date);
if($dif>0 and (in_array(date(''N'',$date),explode('','',$events[''repeat_days'']))))
{
$event_obj = $events;
$event_obj[''start_date''] = strtotime(''+'' . $dif . '' day'',$event_obj[''start_date'']);
$event_obj[''end_date''] = strtotime(''+'' . $dif . '' day'',$event_obj[''end_date'']);
if(calendar::check_repeat_event_dif($week_dif,$event_obj,$repeat_end))
{
$list[] = $event_obj;
}
}
}
}
break;
case ''monthly'':
/**
*in calendar we display 3 month in one view
*so we have to check difference for each month
*/
//check 1
$date_to_timestamp2 = strtotime(''-2 month'',$date_to_timestamp);
$dif = calendar::months_dif($start_date, $date_to_timestamp2);
if($dif>0)
{
$event_obj = $events;
$event_obj[''start_date''] = strtotime(''+'' . $dif . '' month'',$event_obj[''start_date'']);
$event_obj[''end_date''] = strtotime(''+'' . $dif . '' month'',$event_obj[''end_date'']);
if(calendar::check_repeat_event_dif($dif,$event_obj,$repeat_end))
{
$list[] = $event_obj;
}
}
//check 2
$date_to_timestamp1 = strtotime(''-1 month'',$date_to_timestamp);
$dif = calendar::months_dif($start_date, $date_to_timestamp1);
if($dif>0)
{
$event_obj = $events;
$event_obj[''start_date''] = strtotime(''+'' . $dif . '' month'',$event_obj[''start_date'']);
$event_obj[''end_date''] = strtotime(''+'' . $dif . '' month'',$event_obj[''end_date'']);
if(calendar::check_repeat_event_dif($dif,$event_obj,$repeat_end))
{
$list[] = $event_obj;
}
}
//check 3
$dif = calendar::months_dif($start_date, $date_to_timestamp);
if($dif>0)
{
$event_obj = $events;
$event_obj[''start_date''] = strtotime(''+'' . $dif . '' month'',$event_obj[''start_date'']);
$event_obj[''end_date''] = strtotime(''+'' . $dif . '' month'',$event_obj[''end_date'']);
if(calendar::check_repeat_event_dif($dif,$event_obj,$repeat_end))
{
$list[] = $event_obj;
}
}
break;
case ''yearly'':
$dif = date(''Y'',$date_to_timestamp)-date(''Y'',$start_date);
if($dif>0)
{
$events[''start_date''] = strtotime(''+'' . $dif . '' year'',$events[''start_date'']);
$events[''end_date''] = strtotime(''+'' . $dif . '' year'',$events[''end_date'']);
if(calendar::check_repeat_event_dif($dif,$events,$repeat_end))
{
$list[] = $events;
}
}
break;
}
}
return $list;
}
static public function check_repeat_event_dif($dif,$events,$repeat_end)
{
$check = true;
if($dif>0)
{
//check interval
if($dif/$events[''repeat_interval'']!=floor($dif/$events[''repeat_interval''])) $check=false;
//check repeat limit
if($events[''repeat_limit'']>0)
if(floor($dif/$events[''repeat_interval''])>$events[''repeat_limit'']) $check=false;
}
else
{
$check=false;
}
//check repeat end date
if($repeat_end>0)
{
if($repeat_end<$events[''start_date''])
{
$check=false;
}
}
return $check;
}
}

function get_events obtener todos los eventos + eventos recurrentes en mi camino hay 4 tipos de eventos recurrentes: diario, semanal, mensual, anual + hay intervalo de repetición, finalización de fecha de repetición y límite de repetición.

function get_repeat_events calcule la diferencia para cada tipo de evento e incluya el evento repeat si existe.

nota: la función db_query () puede reemplazarse por myslq_query o alguna otra cosa

para preparar eventos para FullCalendar, estoy usando el siguiente código

$list = array();
foreach(calendar::get_events($_GET[''start''],$_GET[''end''],''personal'') as $events)
{
$start = date(''Y-m-d H:i'',$events[''start_date'']);
$end = date(''Y-m-d H:i'',$events[''end_date'']);
$list[] = array(''id'' => $events[''id''],
''title'' => addslashes($events[''name'']),
''description'' => str_replace(array("/n/r","/n","/r"),''<br>'',$events[''description'']),
''start'' => str_replace('' 00:00'','''',$start),
''end'' => str_replace('' 00:00'','''',$end),
''color''=> $events[''bg_color''],
''allDay''=>(strstr($start,''00:00'') and strstr($end,''00:00'')),
''url'' => url_for(''ext/calendar/personal_form'',''id='' . $events[''id''])
);
}
echo json_encode($list);

Answer 5

Esto pareció funcionar muy bien dentro del eventoRender: function (event, element) {}

 EXAMPLE JSON:
var json = [{title: "All Day Event",
start: "2015-12-22T00:00",
end: "2015-12-22T23:55",
dow: [2,4],
recurstart: moment("2015-12-22").startOf("week"),
recurend: moment("2015-12-22").endOf("week").add(1,''w'')},{
title: "Long Event",
start: "2015-12-21T00:00",
end: "2015-12-24T23:55",
recurstart: moment("2015-12-21").startOf("month"),
recurend: moment("2015-12-24").endOf("month"),
}];
eventRender: function(event, element){
var theDate = moment(event.start).format("YYYY-MM-DD");
var startDate = event.recurstart;
var endDate = event.recurend;
if (startDate < theDate && theDate < endDate) {
console.log(theDate);
}
else {
return event.length>0;
}
}, /* End eventRender */

1) Establezca una fecha y hora de inicio / finalización en el JSON.

2) Cree dos extremos recurrentes y recurrentes personalizados en el JSON.

3) Use moment.js para crear las duraciones recurrentes: http://momentjs.com/docs/#/durations/ .

4) Recur Start utiliza la fecha (inicio :) para identificar el comienzo de la semana.

5) Recur End usa (fin :) fecha para señalar el final de la semana + agregar 1 semana.

6) Agregar 1, 2, 3 semanas puede crear el límite de recurrencia.

7) Agregar otra parte de JSON llamada (recurlimit: "") podría administrar el límite de recurrencia.

8) Usar variables dentro del eventRender: establezca la fecha que usa mi ejemplo (theDate) que es moment (event.start). Es importante formatear esto correctamente para que todos los formatos de inicio / final / recurrente, etc. coincidan, es decir, (YYYY-MM-DD) http://momentjs.com/docs/#/displaying/format/ .

9) Variable para el recurstart personalizado

10) Variable para el recurend personalizado

11) Use una instrucción IF para ver si el tiempo (theDate) cae entre (recurstart) y (recurend) - log result

12) Use la instrucción ELSE para devolver la longitud> 0 para ocultar otros eventos que no estén dentro de ese parámetro.

13) Los eventos no recurrentes deben tener un momento ("fecha de comienzo del partido"). StartOf ("mes") y momento ("fecha de inicio del partido"). EndOf ("mes") de lo contrario no serán visibles.

Answer 6

No es necesario hacer una relación entre padres e hijos aquí, es el código que proporciona una solución simple para los eventos recurrentes en jquery. Calendario completo use estas funciones a continuación en su archivo php que usa aún más para llamar a todos sus eventos.

function render_fccalendar_events() {
$_POST[''start''] = strtotime(''2013-05-01'');
$_POST[''end''] = strtotime(''2013-05-31'');
$start = date(''Y-m-d'',$_POST[''start'']);
$end = date(''Y-m-d'', $_POST[''end'']);
$readonly = (isset($_POST[''readonly''])) ? true : false;
$events = fcdb_query_events($start, $end);
render_json(process_events($events, $start, $end, $readonly));
}
function process_events($events, $start, $end, $readonly) {
if ($events) {
$output = array();
foreach ($events as $event) {
$event->view_start = $start;
$event->view_end = $end;
$event = process_event($event, $readonly, true);
if (is_array($event)) {
foreach ($event as $repeat) {
array_push($output, $repeat);
}
} else {
array_push($output, $event);
}
}
return $output;
}
}
function process_event($input, $readonly = false, $queue = false) {
$output = array();
if ($repeats = generate_repeating_event($input)) {
foreach ($repeats as $repeat) {
array_push($output, generate_event($repeat));
}
} else {
array_push($output, generate_event($input));
}
if ($queue) {
return $output;
}
render_json($output);
}
function generate_event($input) {
$output = array(
''id'' => $input->id,
''title'' => $input->name,
''start'' => $input->start_date,
''end'' => $input->end_date,
''allDay'' => ($input->allDay) ? true : false,
//''className'' => "cat{$repeats}",
''editable'' => true,
''repeat_i'' => $input->repeat_int,
''repeat_f'' => $input->repeat_freq,
''repeat_e'' => $input->repeat_end
);
return $output;
}
function generate_repeating_event($event) {
$repeat_desk = json_decode($event->repeat_desk);
if ($event->repeat == "daily") {
$event->repeat_int =0;
$event->repeat_freq = $repeat_desk->every_day;
}
if ($event->repeat == "monthly") {
$event->repeat_int =2;
$event->repeat_freq = $repeat_desk->every_month;
}
if ($event->repeat == "weekly") {
$event->repeat_int =1;
$event->repeat_freq = $repeat_desk->every_weak;
}
if ($event->repeat == "year") {
$event->repeat_int =3;
$event->repeat_freq = $repeat_desk->every_year;
}
if ($event->occurrence == "after-no-of-occurrences") {
if($event->repeat_int == 0){
$ext = "days";
}
if($event->repeat_int == 1){
$ext = "weeks";
}
if($event->repeat_int == 2){
$ext = "months";
}
if($event->repeat_int == 3){
$ext = "years";
}
$event->repeat_end = date(''Y-m-d'',strtotime("+" . $event->repeat_int . " ".$ext));
} else if ($event->occurrence == "no-end-date") {
$event->repeat_end = "2023-04-13";
} else if ($event->occurrence == "end-by-end-date") {
$event->repeat_end = $event->end_date;
}
if ($event->repeat_freq) {
$event_start = strtotime($event->start_date);
$event_end = strtotime($event->end_date);
$repeat_end = strtotime($event->repeat_end) + 86400;
$view_start = strtotime($event->view_start);
$view_end = strtotime($event->view_end);
$repeats = array();
while ($event_start < $repeat_end) {
if ($event_start >= $view_start && $event_start <= $view_end) {
$event = clone $event; // clone event details and override dates
$event->start_date = date(AEC_DB_DATETIME_FORMAT, $event_start);
$event->end_date = date(AEC_DB_DATETIME_FORMAT, $event_end);
array_push($repeats, $event);
}
$event_start = get_next_date($event_start, $event->repeat_freq, $event->repeat_int);
$event_end = get_next_date($event_end, $event->repeat_freq, $event->repeat_int);
}
return $repeats;
}
return false;
}
function get_next_date($date, $freq, $int) {
if ($int == 0)
return strtotime("+" . $freq . " days", $date);
if ($int == 1)
return strtotime("+" . $freq . " weeks", $date);
if ($int == 2)
return get_next_month($date, $freq);
if ($int == 3)
return get_next_year($date, $freq);
}
function get_next_month($date, $n = 1) {
$newDate = strtotime("+{$n} months", $date);
// adjustment for events that repeat on the 29th, 30th and 31st of a month
if (date(''j'', $date) !== (date(''j'', $newDate))) {
$newDate = strtotime("+" . $n + 1 . " months", $date);
}
return $newDate;
}
function get_next_year($date, $n = 1) {
$newDate = strtotime("+{$n} years", $date);
// adjustment for events that repeat on february 29th
if (date(''j'', $date) !== (date(''j'', $newDate))) {
$newDate = strtotime("+" . $n + 3 . " years", $date);
}
return $newDate;
}
function render_json($output) {
header("Content-Type: application/json");
echo json_encode(cleanse_output($output));
exit;
}
function cleanse_output($output) {
if (is_array($output)) {
array_walk_recursive($output, create_function(''&$val'', ''$val = trim(stripslashes($val));''));
} else {
$output = stripslashes($output);
}
return $output;
}
function fcdb_query_events($start, $end) {
global $wpdb;
$limit = ($limit) ? " LIMIT {$limit}" : "";
$result = $wpdb->get_results("SELECT id, name,start_date,end_date,repeat_desk,`repeat`,occurrence,occurrence_desk
FROM " .
$wpdb->prefix . "lgc_events
WHERE (
(start_date >= ''{$start}'' AND start_date < ''{$end}'')
OR (end_date >= ''{$start}'' AND end_date < ''{$end}'')
OR (start_date <= ''{$start}'' AND end_date >= ''{$end}'')
OR (start_date < ''{$end}'' AND (`repeat`!= ''''))
)
ORDER BY start_date{$limit};");
return return_result($result);
}
function return_result($result) {
if ($result === false) {
global $wpdb;
$this->log($wpdb->print_error());
return false;
}
return $result;
}

en el código anterior utilicé repeat_desk en el que guardo el código json para la frecuencia de repetición

y jquery para llamar a su archivo

 events: {
url: ''<?php echo $lgc_plugindir; ?>includes/imagerotator.php'',
data: {
action: ''get_events''
},
type: ''POST''
}

Utilicé esto para wordpress puedes usar este código según tu requisito