谷歌 Calendar

　

google calendar

Fullcalendar可以显示公开Goog​​le日历中的活动。 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密钥。它可能需要二或两个开始工作。

公开你的Google Calendar：

1、在Google日历界面中，找到左侧的“我的日历”区域。

2、将鼠标悬停在您需要的日历上，然后点击向下箭头。

3、将出现一个菜单。点击“共享此日历”。

4、选中“公开此日历”。

5、确保“仅共享我的忙/闲信息”未选中。

6、点击“保存”。

获取您的Google日历ID：

1、在Google日历界面中，找到左侧的“我的日历”区域。

2、将鼠标悬停在您需要的日历上，然后点击向下箭头。

3、将出现一个菜单。点击“日历设置”。

4、在屏幕的“日历网址”部分，您将看到您的日历ID。它看起来像“[email protected]”。

依赖

接下来，您必须具有所有必需的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: '[email protected]'
        }
    });
});

</script>

如果要指定某些“事件源”选项，可以将它们包括在events对象中：

<script type='text/javascript'>

$(document).ready(function() {
    $('#calendar').fullCalendar({
        googleCalendarApiKey: '<YOUR API KEY>',
        events: {
            googleCalendarId: '[email protected]',
            className: 'gcal-event' // an option!
        }
    });
});

</script>

时区

Google日历插件符合时区参数。如果为false（默认值），则会使用Google日历的时区设置（如Google界面中所定义）。如果指定，这将被忽略，并且时区将被强制。

多个Google日历

您可以使用eventSources选项指定多个Google日历：

<script type='text/javascript'>

$(document).ready(function() {
    $('#calendar').fullCalendar({
        googleCalendarApiKey: '<YOUR API KEY>',
        eventSources: [
            {
                googleCalendarId: '[email protected]'
            },
            {
                googleCalendarId: '[email protected]',
                className: 'nice-event'
            }
        ]
    });
});

</script>

优势

如果每个日历需要不同的API密钥，则可以在以扩展形式写入时，为每个单独的事件源设置一个googleCalendarApiKey选项。

如果您需要使用Google API检测错误，则无法使用jQuery的AJAX错误处理程序。您需要使用FullCalendar的googleCalendarERROR回调，该回调可作为常规选项或每个事件源选项使用。

相关阅读

calendar.js插件使用

jQuery日历插件编写(jquery.calendar.js)：目前比较难解决的问题是：1、皮肤问题，虽然可以自定义皮肤，但是使用起来还是有一定的困难。