FullCalendarの定期的なイベント
JQuery FullCalendarを、可用性のアジェンダのために私のWebサイトで使用するカレンダーとして使用しています。
定期的なイベントを日単位で処理する関数/メソッド/オプションがfullcalendarにありますか？たとえば、月曜日は午前7時から午前9時まで、火曜日は午後4時から午後9時までです。
単純な繰り返しイベント
ここにリストされているものに簡単な代替物を追加するために、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
}],
これは 背景イベント で文書化されていますが、通常のイベントでも機能します。
これをデータベースに保存するのは難しくありません。
いくつかの制限を追加する
それらを無限に繰り返したくない場合は、開始日と終了日を追加する必要があります。
だから、DBで：
- 上記のイベントが親レコードを表すとします
- 開始日/終了日を含む別のテーブルがあります。
- 結合されたテーブルの例：
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*/];
一晩
夜通し繰り返しイベントが必要な場合（ like like ）、単に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は、idに関して定期的なイベントをサポートします。イベントはサーバー側でもクライアント側でも処理できますが、設定はサーバー側になります。いくつかのアイデアをお伝えしますが、すべてを網羅しているわけではありません。私が学んだように、定期的なイベントは維持するのが苦痛です。
クライアント側で処理したい場合、繰り返しイベントの頻度とその日のロジックをループする必要があります。おそらくeventRenderコールバックを使用し、オプションコールバックを使用して各ループイベントをレンダリングする必要があります。これに伴う問題は、データベース内の繰り返しオプションと周波数オプションの論理演算子を保存する必要があることです...
（column1：frequency =（int）8、column2：type = enum（a'b'c）、a = daily、b = weekly、c = monthlyなど）。
...そして、そのイベントを編集するたびに、すべてのイベントが編集されます。イベントを1つだけ削除する必要がある場合は、ロジック内で一連の問題が発生し、簡単に巨大な混乱に陥る可能性があります。
2番目のオプションは、このサーバー側をすべて実行することでした。 2つのテーブルを作成します。1つは親イベントを使用し、もう1つはすべての繰り返しを使用します。親テーブルには、一意のID、色、背景色、タイトル、allDay、isRecurring、頻度、タイプなどの一般情報を格納します。子テーブルでは、親テーブルの一意のIDを使用して関連付けます各繰り返し（個々のイベントを削除/編集する場合は、子テーブルの行にも独自の一意のIDと、どのテーブルに配置されているかを示す列が必要です）繰り返しイベントを追加する場合、繰り返しイベントであるかどうかを示す列挙フィールドを追加する必要があります...
column：recurring = enum（ '0'、 '1'）--- true/false
...そして、各繰り返しを、開始や終了などの特定の情報と共に子テーブルに追加する必要があります。 2番目のクエリ、または1つのクエリでtable1.id = table2.parentIDでINNER JOINを使用できます。
ご覧のように、定期的なイベントは非常に詳細に非常にすばやく取得でき、必要なロジックを見つけることができます。これが少なくともあなたや誰かが始めるのに役立つことを願っています。乾杯。
ここで親と子の関係を作成する必要はありません。jqueryFull calenderで定期的なイベントに簡単なソリューションを提供するコードは、すべてのイベントを呼び出すためにさらに使用する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;
}
上記のコードでは、繰り返し頻度のjsonコードを格納するrepeat_deskを使用しました
ファイルを呼び出す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;
}
}
function get_eventsは、すべてのイベントと定期的なイベントを取得します。毎日、毎週、毎月、毎年の4つのタイプの定期的なイベントがあります。
関数get_repeat_eventsは、イベントのタイプごとに差を計算し、存在する場合は繰り返しイベントを含めます。
注：関数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）JSONで2つのカスタム再帰開始と再帰終了を作成します。
3）moment.jsを使用して、再帰期間を作成します： http://momentjs.com/docs/#/durations/ 。
4）Recur Startは（start :)日付を使用して、週の開始を特定します。
5）Recur Endは、（end :)日付を使用して、週の終わりを特定し、1週間を追加します。
6）1、2、3週間を追加すると、再帰制限が作成される場合があります。
7）（recurlimit： ""）というJSONの別の部分を追加すると、再帰制限を管理できます。
8）eventRender内で変数を使用する-この例で使用する日付（theDate）を、moment（event.start）に設定します。 start/end/recurstartなどがすべて形式（つまり、YYYY-MM-DD） http://momentjs.com/docs/#/displaying/format/ と一致するように、これを正しくフォーマットすることが重要です。
9）カスタム再帰開始の変数
10）カスタム再帰の変数
11）IFステートメントを使用して、（theDate）が（recurstart）と（recurend）の間にある天気を確認します-結果を記録します
12）ELSEステートメントを使用してlength> 0を返し、そのパラメーターに該当しない他のイベントを非表示にします。
13）非定期的なイベントには、moment（ "match start date"）。startOf（ "month"）＆moment（ "match start date"）。endOf（ "month"）が必要です。そうでない場合は表示されません。
FullCalendarがビルトインを処理できる（ slicedtoadの答えを参照 ）よりも複雑な繰り返しイベントがある人には、 rSchedule を使用できます。
たとえば、月曜日から午前7時から午前9時まで、火曜日から午後4時から午後9時まで
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 docs をご覧ください。