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/