FullCalendar可以显示公开Google日历中的活动。 Google日历可以用作管理并持久存储事件数据(FullCalendar目前缺少的功能)的后端。
在2014年11月17日,Google关闭了他们的日历API的V1和V2,这是FullCalendar所依赖的。请升级到最新版本的FullCalendar或至少用此文件替换gcal.js(将工作到FullCalendar v2.0.0)。此外,现在还需要您自己的Google日历API密钥。
你必须要拥有一个Google Calendar API Key:
1、转到Google开发者控制台并创建一个新项目(可能需要一秒钟)。 2、进入项目后,请转到侧边栏上的API和验证> API。 3、在列表中找到“日历API”,然后将其打开。 4、在侧栏上,按一下[API和验证]> [凭证]。 5、在“公共API访问”部分中,点击“创建新密钥”。 6、选择“浏览器键”。 7、如果您知道哪些域将托管您的日历,请将其输入框中。否则,将其留空。您可以随时更改它。 8、将显示新的API密钥。它可能需要二或两个开始工作。
1、在Google日历界面中,找到左侧的“我的日历”区域。 2、将鼠标悬停在您需要的日历上,然后点击向下箭头。 3、将出现一个菜单。点击“共享此日历”。 4、选中“公开此日历”。 5、确保“仅共享我的忙/闲信息”未选中。 6、点击“保存”。
1、在Google日历界面中,找到左侧的“我的日历”区域。 2、将鼠标悬停在您需要的日历上,然后点击向下箭头。 3、将出现一个菜单。点击“日历设置”。 4、在屏幕的“日历网址”部分,您将看到您的日历ID。它看起来像“abcd1234@group.calendar.google.com”。
接下来,您必须具有所有必需的js / css文件。这包括标准fullcalendar.js和fullcalendar.css,除了gcal.js:
<script type='text/javascript' src='fullcalendar/gcal.js'></script>现在是时候用JavaScript初始化你的日历了。这是最小的例子:
<script type='text/javascript'> $(document).ready(function() { $('#calendar').fullCalendar({ googleCalendarApiKey: '<YOUR API KEY>', events: { googleCalendarId: 'abcd1234@group.calendar.google.com' } }); }); </script>如果要指定某些“事件源”选项,可以将它们包括在events对象中:
<script type='text/javascript'> $(document).ready(function() { $('#calendar').fullCalendar({ googleCalendarApiKey: '<YOUR API KEY>', events: { googleCalendarId: 'abcd1234@group.calendar.google.com', className: 'gcal-event' // an option! } }); }); </script>Google日历插件符合时区参数。如果为false(默认值),则会使用Google日历的时区设置(如Google界面中所定义)。如果指定,这将被忽略,并且时区将被强制。
您可以使用eventSources选项指定多个Google日历:
<script type='text/javascript'> $(document).ready(function() { $('#calendar').fullCalendar({ googleCalendarApiKey: '<YOUR API KEY>', eventSources: [ { googleCalendarId: 'abcd1234@group.calendar.google.com' }, { googleCalendarId: 'efgh5678@group.calendar.google.com', className: 'nice-event' } ] }); }); </script>如果每个日历需要不同的API密钥,则可以在以扩展形式写入时,为每个单独的事件源设置一个googleCalendarApiKey选项。
如果您需要使用Google API检测错误,则无法使用jQuery的AJAX错误处理程序。您需要使用FullCalendar的googleCalendarError回调,该回调可作为常规选项或每个事件源选项使用。