Question

我在发布这个问题之前整天都在研究，并且没有运气。因此，我现在正在寻求帮助！

我无法使用FullCalendar在我的网站上显示任何Google日历活动。不仅我的活动没有显示，我甚至无法像在FullCalendar的演示中那样显示美国假期日历。

我希望我错过了一些非常小的东西，而且有人能够很快抓住它。日历本身显示正确，但没有显示任何事件。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <title>tegIdeas - Course Schedule</title>
  <meta name="description" content="">
  <link rel="icon" type="image/x-icon" href="favicon.ico"/>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/font-awesome.min.css" rel="stylesheet">
  <link href="css/prettyPhoto.css" rel="stylesheet">
  <link href="css/animate.css" rel="stylesheet">
  <link href="css/fullcalendar.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">
  <link href="css/responsive.css" rel="stylesheet">
  <link href="css/shame.css" rel="stylesheet">
  <script src="js/jquery.min.js"></script> 
  <script src="js/bootstrap.min.js"></script> 
  <script src="js/jquery.isotope.min.js"></script> 
  <script src="js/moment.min.js"></script>
  <script src="js/main.js"></script>
  <script src="js/fullcalendar.min.js"></script>
  <script src="js/gcal.js"></script>
  <script type='text/javascript'>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
            header: {
              left: 'prev,next today',
              center: 'title',
              right: 'month,agendaWeek,agendaDay'
              },
            eventSources: {
              googleCalendarApiKey: 'myApiKey',
              googleCalendarId: 'myCalendarId',
              className: 'fc-event-email'
              },
            selectable: true,
            selectHelper: true,
            editable: false,  
        });
    });
  </script>
  <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
  <![endif]-->
</head>

Answer 1

这可能是一个虚假的问题 - 你使用正确的apiKey和calendarId而不是'myApiKey'和'myCalendarId'吗？

此外，如果'myApiKey'和'myCalendarId'是您之前在代码中设置的变量，则'不应对其进行变形。

eventSources: {
    googleCalendarApiKey: myApiKey,
    googleCalendarId: myCalendarId
}

Answer 2

您可以重新编写日历功能，如下所示：

只是代替eventSources的事件
请注意editable: false

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    googleCalendarApiKey: 'API_Key',
    events: {
        googleCalendarId: 'Calendar_Id'
    },
    selectable: true,
    selectHelper: true,
    editable: false  
});

这对我有用。

完整日历未显示任何Google日历活动

2 个答案: