FullCalendar 中的重復事件

Question

我正在使用 jQuery FullCalendar 作為我的網站中用於可用性議程的日歷。

fullcalendar 中是否有任何功能/方法/選項可以按天處理我的重復事件？ 例如，星期一只到時間 7:00AM 到 9:00AM，星期二 - 4:00PM 到 9:00PM，諸如此類？

Answer 1

簡單的重復事件

為了給此處列出的事件添加一個簡單的替代方案，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
}],

JSFiddle

這在 后台事件中有記錄，但它也適用於常規事件。

將其保存到數據庫並不難。

添加一些限制

如果您不希望它們無限重復，則需要添加一些開始和結束日期。

所以，在數據庫中：

• 讓上面顯示的事件代表父記錄
• 有另一個帶有開始/結束日期的表格。
• 連接表示例：

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*/];

JSFiddle

---

過夜

如果您想要隔夜重復事件（ 如這里），只需超過24:00作為結束時間。 例如：

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

JSFiddle

Answer 2

看看這個網站... 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 等）。

...然后無論何時您編輯該事件，它都會編輯所有事件。 如果您只需要刪除一個事件，您將在邏輯中遇到一系列問題，並且很容易變成一團糟。

第二種選擇是在服務器端完成所有這些工作。 創建兩個表，一個包含父事件，第二個包含所有重復事件。 在父表中，您將存儲一般信息，例如唯一 id、顏色、背景顏色、標題、allDay、isRecurring、頻率、類型等。在子表中，您將使用父表中的唯一 id 來關聯每次重復（請記住，如果您想刪除/編輯單個事件，子表行也需要有自己的唯一 ID 以及標記它所在表的列）。 添加重復性事件時，您需要添加一個枚舉字段，用於標記它是否是重復性事件 AKA...

列：recurring=enum('0','1')---真/假

...然后您需要將每個重復添加到子表中，並帶有其特定信息，例如開始和結束等。當您查詢事件時，您可以從父表中查詢，然后如果事件重復發生，則將這些事件關聯到第二個查詢，或者您可以在一個查詢中對 table1.id=table2.parentID 使用 INNER JOIN。

如您所見，重復事件可以非常快速地變得非常詳細，找出您需要的邏輯，我希望這可以幫助您或至少有人開始。 干杯。

Answer 3

無需在此處建立父子關系是為 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，您可以根據您的要求使用此代碼

Answer 4

對於擁有比 FullCalendar 可以處理的內置事件更復雜的重復事件的人（請參閱 slicedtoad 的答案），您可以使用rSchedule 。

例如，僅周一至上午 7:00 至上午 9:00，周二至下午 4:00 至晚上 9: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 文檔。

Answer 5

目前我正在做項目，我有 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 計算每種類型事件的差異，如果存在，則包括重復事件。

注意：函數 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);

Answer 6

這似乎在 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中創建兩個自定義recur Start和recur Ends。

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)。 正確格式化很重要，以便開始/結束/ recurstart 等所有格式都匹配，即 (YYYY-MM-DD) http://momentjs.com/docs/#/displaying/format/ 。

9) 自定義 recurstart 的變量

10) 自定義遞歸的變量

11) 使用 IF 語句查看 (theDate) 介於 (recurstart) 和 (recurend) 之間的天氣 - 日志結果

12) 使用 ELSE 語句返回 length>0 以隱藏不屬於該參數的其他事件。

13) 非重復事件必須有 moment("match start date").startOf("month") & moment("match start date").endOf("month") 否則它們將不可見。

Answer 7

為了處理復雜的重復規則，我們應該使用 iCal 的 rrule 實現庫。 我們有JS 庫 (rrule) 。 FullCalendar 現在還支持rrule 插件。

Answer 8

您可以使用下面的代碼來顯示一天、每天、每周、每兩周和每月的事件，並帶有鼠標懸停事件的工具提示。

 /*This is js*/ document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { //NOTE MUST HAVE REFERENCE rrule javascript and plugin 'rrule', not rrPlugin like docs //if using scripts, not import/build method defaultDate: "2021-08-25", plugins: ['interaction', 'dayGrid', 'timeGrid', 'rrule'], timeZone: 'UTC', defaultView: 'dayGridMonth', header: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay' }, editable: true, eventClick: function(arg) { console.log(arg); if (confirm('Are you sure you want to delete this event?')) { arg.event.remove() } }, eventMouseEnter: function(info) { var tis=info.el; var popup=info.event.extendedProps.popup; var tooltip = '<div class="tooltipevent" style="top:'+($(tis).offset().top-5)+'px;left:'+($(tis).offset().left+($(tis).width())/2)+'px"><div>' + popup.title + '</div><div>' + popup.description + '</div></div>'; var $tooltip = $(tooltip).appendTo('body'); }, eventMouseLeave: function(info) { $(info.el).css('z-index', 8); $('.tooltipevent').remove(); }, events: [ { title: 'One Day', popup: { title: 'One Day', description: 'This is the description', }, backgroundColor: '#c1391c', rrule: { dtstart: '2021-08-01T10:30:00', until: '2021-08-01T19:30:00', }, }, { title: 'Daily', popup: { title: 'Daily', description: 'This is Daily the description', }, backgroundColor: '#bcc11c', rrule: { freq: 'daily', dtstart: '2021-08-02T10:30:00', until: '2021-08-05T19:30:00', }, }, { title: 'Weekly Event', popup: { title: 'Daily', description: 'This is Daily the description', }, backgroundColor: '#1cc1ab', rrule: { freq: 'weekly', dtstart: '2021-08-06T10:30:00', until: '2021-08-20T19:30:00', }, }, { title: 'Two Weekly Event', popup: { title: 'Daily', description: 'This is Daily the description', }, backgroundColor: '#1c60c1', rrule: { interval: 2, freq: 'weekly', dtstart: '2021-08-07T10:30:00', until: '2021-08-30T19:30:00', }, }, { title: 'Four Weekl Event', popup: { title: 'Daily', description: 'This is Daily the description', }, backgroundColor: '#c11cbc', rrule: { interval: 4, freq: 'weekly', dtstart: '2021-08-01T10:30:00', until: '2021-12-30T19:30:00', }, }, ] }); calendar.render(); });

 html, body { margin: 0; padding: 0; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 14px; } #calendar { max-width: 900px; margin: 40px auto; } .tooltipevent{ width:200px;/* height:100px;*/ background:#ccc; position:absolute; z-index:10001; transform:translate3d(-50%,-100%,0); font-size: 0.8rem; box-shadow: 1px 1px 3px 0px #888888; line-height: 1rem; } .tooltipevent div{ padding:10px; } .tooltipevent div:first-child{ font-weight:bold; color:White; background-color:#888888; border:solid 1px black; } .tooltipevent div:last-child{ background-color:whitesmoke; position:relative; } .tooltipevent div:last-child::after, .tooltipevent div:last-child::before{ width:0; height:0; border:solid 5px transparent;/* box-shadow: 1px 1px 2px 0px #888888;*/ border-bottom:0; border-top-color:whitesmoke; position: absolute; display: block; content: ""; bottom:-4px; left:50%; transform:translateX(-50%); } .tooltipevent div:last-child::before{ border-top-color:#888888; bottom:-5px; }

 <!-- Required js and css with url --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/rrule@2.6.3/dist/es5/rrule.min.js"></script> <script type="text/javascript" src="https://unpkg.com/@fullcalendar/core@4.3.1/main.min.js"></script> <script type="text/javascript" src="https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.js"></script> <script type="text/javascript" src="https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.js"></script> <script type="text/javascript" src="https://unpkg.com/@fullcalendar/interaction@4.3.0/main.min.js"></script> <script type="text/javascript" src="https://unpkg.com/@fullcalendar/rrule@4.3.0/main.min.js"></script> <script type="text/javascript" src="https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js"></script> <script type="text/javascript" src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="https://unpkg.com/@fullcalendar/core@4.3.1/main.min.css"> <link rel="stylesheet" type="text/css" href="https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.css"> <link rel="stylesheet" type="text/css" href="https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.css"> <div id='calendar'></div>

Answer 9

現在有一個插件可以做你想做的事： http : //momentjs.com/docs/#/plugins/recur/