Я использую jQuery FullCalendar, так как мой календарь используется на моем веб-сайте для обеспечения доступности.
Есть ли какие-либо функции/методы/параметры в fullcalendar, которые обрабатывают мои повторяющиеся события по дням? Например, в понедельник только до времени с 7:00 до 9:00, по вторникам - с 16:00 до 21:00, что-то в этом роде?
Чтобы добавить простую альтернативу перечисленным здесь, Fullcalendar теперь (несколько) поддерживает еженедельные повторяющиеся события. Поэтому, если вам нужно только что-то вроде: [Every Monday and Thursday from 10:00am to 02:00pm], вы можете использовать следующее:
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
}],
Это описано в Фоновые события, но оно также работает и для обычных событий.
Сохранение этого в базе данных будет непростым.
Если вы не хотите, чтобы они повторялись бесконечно, вам нужно добавить несколько дат начала и окончания.
Итак, в БД:
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
Передайте это клиенту как 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"},]
}
И клиентская сторона, используйте fullcalendar eventRender только для отображения событий, когда есть один из временных диапазонов. Что-то вроде этого должно работать:
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)
},
Предположим, что ваши события структурированы как:
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*/];
Если вам нужны ночные повторяющиеся события (как здесь), просто перейдите 24:00 в течение времени окончания. Например:
{
start: '10:00', //starts at 10 on monday
end: '27:00', //24+3 is handled correctly.
dow: [1]
}
Взгляните на этот сайт... http://fajitanachos.com/Fullcalendar-and-recurring-events/
Он предлагает много хорошего в повторяющихся событиях. FullCalendar поддерживает повторяющиеся события в отношении идентификатора. Вы можете обрабатывать события как на стороне сервера, так и на стороне клиента, но предпочтительнее будет сервер. Я дам вам некоторые идеи, но это не все включено. Как я узнал, повторяющиеся события - это боль, которую нужно поддерживать.
Если вы хотите обработать их на стороне клиента, вам придется перебирать частоту повторяющегося события и логику того дня. Вам, вероятно, потребуется использовать обратный вызов eventRender, а затем визуализировать каждое зацикленное событие с помощью обратного вызова параметров. Проблема с этим будет заключаться в том, что вам все равно придется сохранять повторяющуюся частоту и логический оператор для вашей частотной опции в вашей базе данных...
(column1: frequency = (int) 8, column2: type = enum (a'b'c), a = ежедневно, b = еженедельно, c = ежемесячно и т.д.).
... и затем в любое время, когда вы редактировали это событие, он редактировал все события. Если вам нужно удалить только одно событие, вы столкнетесь с рядом проблем в своей логике, и это может легко стать беспорядком GIANT.
Второй вариант - сделать всю эту серверную часть. Создание двух таблиц, один с родительским событием, второй - со всеми его повторениями. В родительской таблице вы должны сохранить общую информацию, такую как уникальный идентификатор, цвет, цвет фона, название, allDay, isRecurring, частота, тип и т.д. В дочерней таблице вы должны использовать уникальный идентификатор из родительской таблицы для связывания каждый повтор (помните, если вы хотите удалить/отредактировать отдельные события, строки дочерних таблиц должны иметь свой собственный уникальный идентификатор, а также столбец, в котором будет отображаться таблица, в которой он находится). Когда вы добавляете повторяющееся событие, вам нужно добавить поле перечисления, которое указывает, является ли это повторяющимся событием или нет AKA...
колонка: повторяющиеся = перечисление ( '0', '1') --- истина/ложь
... и затем вам нужно добавить каждый повтор в дочернюю таблицу со своей конкретной информацией, например, как начало и конец. Когда вы запрашиваете событие, вы можете запросить у родителя, а затем, если событие повторяется, получите эти события, связанные во втором запросе, или вы можете использовать INNER JOIN на table1.id = table2.parentID в одном запросе.
Как вы можете видеть, повторяющееся событие может очень быстро стать очень подробным, выяснить, какая логика вам нужна, и я надеюсь, что это поможет вам или кому-то хотя бы начать. Приветствия.
Нет необходимости создавать отношения между родителями и дочерними элементами здесь, это код, который обеспечивает простое решение для повторяющихся событий в jquery. Полный календар использует эти ниже функции в вашем php файле, которые вы используете далее, чтобы вызывать все ваши события.
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;
}
в приведенном выше коде я использовал repeat_desk, в котором я храню код json для частоты повторения 
и jquery для вызова вашего файла
events: {
url: '<?php echo $lgc_plugindir; ?>includes/imagerotator.php',
data: {
action: 'get_events'
},
type: 'POST'
}
Я использовал это для wordpress, вы можете использовать этот код в соответствии с вашим требованием
В настоящий момент я делаю проект, где у меня есть FullCalendar, и мне нужно делать повторяющиеся события. Так вот почему я понимаю, как это можно сделать. Надеюсь, что этот код поможет кому-то:)
У меня есть следующая таблица в базе данных:
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 ;
и я разработал следующий класс php для получения событий с повторяющимися событиями:
<?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;
}
}
Функция get_events получает все события + повторяющиеся события на моем пути существует 4 типа повторяющихся событий: ежедневно, еженедельно, ежемесячно, ежегодно + есть интервал повторения, конец повторной даты и предел повторения.
Функция get_repeat_events вычисляет разницу для каждого типа события и включает событие повторения, если оно существует.
note: функция db_query() может быть заменена на myslq_query или что-то еще
чтобы подготовить события к FullCalendar. Я использую следующий код
$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);
Казалось, что это очень хорошо работает в eventRender: 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) Установите дату и время начала/окончания в JSON.
2) Создайте два пользовательских recur Start и recur Ends в JSON.
3) Используйте time.js для создания продолжительности повтора: http://momentjs.com/docs/#/durations/.
4) Recur Start использует дату начала (start:), чтобы определить начало недели.
5) Recur End использует (конец:), чтобы определить конец недели + добавление 1 недели.
6) Добавление 1, 2, 3 недель может создать предел повтора.
7) Добавление другой части JSON, вызываемой (recurlimit: ""), может управлять пределом повторения.
8) Использование переменных в eventRender - установите дату, в которой используется мой пример (theDate), который является моментом (event.start). Важно правильно отформатировать это так, чтобы начало/конец/рекуррстарт и т.д. Соответствовали форматам, т.е. (YYYY-MM-DD) http://momentjs.com/docs/#/displaying/format/.
9) Переменная для пользовательского recurstart
10) Переменная для пользовательской recurend
11) Используйте оператор IF, чтобы видеть, что погода (theDate) падает между (recurstart) и (recurend) - результат журнала
12) Используйте инструкцию ELSE, чтобы вернуть длину > 0, чтобы скрыть другие события, которые не попадают в этот параметр.
13) Не повторяющиеся события должны иметь момент ( "дата начала матча" ). startOf ( "месяц" ) и момент ( "дата начала матча" ). endOf ( "месяц" ), иначе они не будут видны.
Для людей, которые имеют более сложные повторяющиеся события, чем то, что FullCalendar может обрабатывать встроенным (см. Slictotoad answer), вы можете использовать rSchedule.
Например, с понедельника по 7:00 до 9:00, по вторникам - с 16:00 до 21:00.
import { Schedule } from '@rschedule/rschedule';
import { StandardDateAdapter } from '@rschedule/standard-date-adapter';
const mondayDate = new Date(2019, 6, 15);
const tuesdayDate = new Date(2019, 6, 16);
const schedule = new Schedule({
// add specific dates
dates: [
new StandardDateAdapter(mondayDate, {duration: 1000 * 60 * 60 * 2})
],
// add recurrence rules
rrules: [{
start: tuesdayDate,
duration: 1000 * 60 * 60 * 5, // duration is expressed in milliseconds
frequency: 'WEEKLY'
}],
});
const firstFiveEvents = schedule
.occurrences({ take: 5 })
.toArray()
.map(adapter =>
({title: 'My event title', start: adapter.date, end: adapter.end})
);
// You can then pass 'firstFiveEvents' to fullcalendar for rendering
rSchedule также поддерживает moment/luxon, а также часовые пояса. Для получения дополнительной информации вы можете проверить документы rSchedule.
Теперь есть плагин, который будет делать то, что вы хотите: http://momentjs.com/docs/#/plugins/recur/