FullCalendar 使用数据库和谷歌日历

Question

是否可以使用 FullCalendar 同时显示来自数据库的自定义事件和 Google 日历？我已经完成了从数据库中显示我的自定义事件，并且我还想使用 Google 日历显示我所在国家/地区的假期。我的问题是，可以在 FullCalendar 中做到这一点吗？这是我的代码：

googleCalendarApiKey: 'AIzaSyBTYvbg3gKLNi0A8qOXMyk6q-EnzM6DZq4',
events: [ googleCalendarId:'en.philippines#holiday@group.v.calendar.google.com',
  <?php foreach($events as $event): 

    $start = explode(" ", $event['start']);
    $end = explode(" ", $event['end']);
    if($start[1] == '00:00:00'){
      $start = $start[0];
    }else{
      $start = $event['start'];
    }
    if($end[1] == '00:00:00'){
      $end = $end[0];
    }else{
      $end = $event['end'];
    }
  ?>
    {
      id: '<?php echo $event['id']; ?>',
      title: '<?php echo $event['title']; ?>',
      start: '<?php echo $start; ?>',
      end: '<?php echo $end; ?>',
      color: '<?php echo $event['color']; ?>',
    },
  <?php endforeach; ?>

Answer 1

events: [ googleCalendarId:'en.philippines#holiday@group.v.calendar.google.com'...JS 数组不能包含命名项...不确定这甚至可以在浏览器中编译。您是否遇到控制台错误？即使这是有效的 JS，您也不能将谷歌日历指定为事件数组的一项，fullCalendar 期望“事件”是 要么 URL 或对象数组，而不是组合.如果您想将数据库中的数据与外部源中的数据结合起来，例如google 日历，那么您可能正在寻找的是“事件源”（请参阅​​https://fullcalendar.io/docs/eventSources）

通过这种方式，您可以为 fullCalendar 提供获取事件的不同方式的列表。第一个条目可以是您的 PHP 代码生成的数据，第二个可以是您的 Google 日历详细信息，告诉它离开并从 Google 日历下载事件：

从代码中删除events: 选项，改为指定：

eventSources: [
  //first event source:
  [ 
    <?php foreach($events as $event): 

    $start = explode(" ", $event['start']);
    $end = explode(" ", $event['end']);
    if($start[1] == '00:00:00'){
      $start = $start[0];
    }else{
      $start = $event['start'];
    }
    if($end[1] == '00:00:00'){
      $end = $end[0];
    }else{
      $end = $event['end'];
    }
  ?>
    {
      id: '<?php echo $event['id']; ?>',
      title: '<?php echo $event['title']; ?>',
      start: '<?php echo $start; ?>',
      end: '<?php echo $end; ?>',
      color: '<?php echo $event['color']; ?>',
    },
    <?php endforeach; ?>
  ],
  //second event source:
  {
    googleCalendarId:'en.philippines#holiday@group.v.calendar.google.com'
  }
]

注意如果您想合并 Google 日历活动，请确保您还遵循了https://fullcalendar.io/docs/google-calendar中列出的所有步骤

Answer 2

你应该可以用addEventSource做到这一点：

$('#myCal').fullCalendar( ‘addEventSource’, source );

在哪里

Source 可能是 Array/URL/Function，就像在 events 选项中一样。 事件将立即从此源获取并放置在 日历。

所以，source 可以是 Google 网址或包含您的事件的数组。

Answer 3

用途：

eventSources: [{googleCalendarId: 'xxxxxxxxx@gmail.com', className: 'gcal-event'},{url:'events.php',}],