如何将谷歌美国假期添加到我的日历中？答案

【问题标题】：How to add google US holidays to my calendar?如何将谷歌美国假期添加到我的日历中？
【发布时间】：2017-03-06 22:47:32
【问题描述】：

我有一个完美运行的 fullCalendar，可以在日历上显示休假时间（通过我的 ColdFusion .cfc）

<html>

<head> 
<link rel="stylesheet" href="../fullcalendar-3.1.0/fullcalendar.min.css" />
<script src="../fullcalendar-3.1.0/lib/jquery.min.js"></script>
<script src="../fullcalendar-3.1.0/lib/moment.min.js"></script>
<script src="../fullcalendar-3.1.0/fullcalendar.min.js"></script>
<script src="../fullcalendar-3.1.0/gcal.js"></script>
<script> 
$(document).ready(function() {

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        var calendar = $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            selectable: true,
            selectHelper: true,
            select: function(start, end, allDay) {
                var title = prompt('Event Title:');
                if (title) {
                    calendar.fullCalendar('renderEvent',
                        {
                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay
                        },
                        true // make the event "stick"
                    );
                }
                calendar.fullCalendar('unselect');
            },
            editable: true,
            googleCalendarApiKey:'my_api_key',
            url: 'https://www.googleapis.com/calendar/v3/calendars/usa__en%40holiday.calendar.google.com/events?key=my_api_key',
            events: "getLeaveRequests_byDept.cfc?method=getMyData",
            timeFormat: ' ', // uppercase H for 24-hour clock
            eventDrop: function(event, delta) {
                alert(event.title + ' was moved ' + delta + ' days\n' +
                    '(should probably update your database)');


            }           
        });

    });
</script> 

<title>Calendar</title></head>

<body>

<div id='calendar'>
</div>

</body> 
</html>

如您所见，我添加了以下内容：gcal.js 文件（谷歌日历 javascript）和以下两行尝试添加假期以及我的其他日期：

googleCalendarApiKey:'my_api_key',
url: 'https://www.googleapis.com/calendar/v3/calendars/usa__en%40holiday.calendar.google.com/events?key=my_api_key',

我的日期仍然显示正常，但日历上没有显示节假日？有什么想法吗？

这是我尝试使用“eventSources”而不是“events”

<html>

<head> 
<link rel="stylesheet" href="../fullcalendar-3.1.0/fullcalendar.min.css" />
<script src="../fullcalendar-3.1.0/lib/jquery.min.js"></script>
<script src="../fullcalendar-3.1.0/lib/moment.min.js"></script>
<script src="../fullcalendar-3.1.0/fullcalendar.min.js"></script>
<script src="../fullcalendar-3.1.0/gcal.js"></script>
<script> 
$(document).ready(function() {

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        var calendar = $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            selectable: true,
            selectHelper: true,
            select: function(start, end, allDay) {
                var title = prompt('Event Title:');
                if (title) {
                    calendar.fullCalendar('renderEvent',
                        {
                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay
                        },
                        true // make the event "stick"
                    );
                }
                calendar.fullCalendar('unselect');
            },
            editable: true,
            googleCalendarApiKey: 'my_api_key',
        eventSources: [
        {
            "getLeaveRequests_byDept.cfc?method=getMyData"
        },
        {
            googleCalendarId: 'efgh5678@group.calendar.google.com'
        }
    ]
});

    });
</script> 

<title>Calendar</title></head>

<body>

<div id='calendar'>
</div>

</body> 
</html>

这是最终的有效代码：

<html>

<head> 
<link rel="stylesheet" href="../fullcalendar-3.1.0/fullcalendar.min.css" />
<script src="../fullcalendar-3.1.0/lib/jquery.min.js"></script>
<script src="../fullcalendar-3.1.0/lib/moment.min.js"></script>
<script src="../fullcalendar-3.1.0/fullcalendar.min.js"></script>
<script src="../fullcalendar-3.1.0/gcal.js"></script>
<script> 
$(document).ready(function() {

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        var calendar = $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            selectable: true,
            selectHelper: true,
            select: function(start, end, allDay) {
                var title = prompt('Event Title:');
                if (title) {
                    calendar.fullCalendar('renderEvent',
                        {
                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay
                        },
                        true // make the event "stick"
                    );
                }
                calendar.fullCalendar('unselect');
            },
            editable: true,
            nextDayThreshold:'00:00:00',
            // display Leave Requests plus Holidays from Google calendar
            googleCalendarApiKey: '* my api key *',
            eventSources: [ 'getLeaveRequests.cfc?method=getMyData', 'en.usa#holiday@group.v.calendar.google.com' ],
            timeFormat: ' ', // uppercase H for 24-hour clock
            eventDrop: function(event, delta) {
                alert(event.title + ' was moved ' + delta + ' days\n' +
                    '(should probably update your database)');
            }           
        });

    });
</script> 

<title>Calendar</title></head>

<body>

<div id='calendar'>
</div>

</body> 
</html>

我必须添加 gcal.js，添加我的 google api 密钥，将“events”更改为“eventSources”，并使用“[]”括号而不是“{}”

【问题讨论】：

此答案可能有助于稍后添加源stackoverflow.com/a/35442698/5360631 和/或尝试 eventSources: { 'getLeaveRequests_byDept.cfc?method=getMyData', 'en.usa#holiday@group.v .calendar.google.com' } 与事件 fullcalendar.io/docs/event_data/eventSources

标签： coldfusion fullcalendar

【解决方案1】：

添加 google 凭据是不够的 - 您已经定义了“事件”，因此 fullCalendar 将使用这些凭据。实际上，您在这里得到的是多个事件源，因此请使用该功能：

 $('#calendar').fullCalendar({
    //...all your other config...then:
    googleCalendarApiKey: '<YOUR API KEY>',
    eventSources: [
        {
            "getLeaveRequests_byDept.cfc?method=getMyData"
        },
        {
            googleCalendarId: 'efgh5678@group.calendar.google.com'
        }
    ]
});

请参阅文档：https://fullcalendar.io/docs/google_calendar/，了解有关如何使用 fullCalendar 配置 Google 日历的更多详细信息，包括多个事件源的示例。

另外，我不知道您从哪里得到可以提供“url”属性的想法 - 它没有在文档中的任何地方定义，并且没有任何效果。对于 Google 日历，API 密钥和日历 ID 就足够了。如果日历实际上不是您的，那么您需要刮掉 ID - 我没有尝试过，但 cmets 中提到的答案（full calendar, events holidays and own events 记录）建议了一种发现公共日历 ID 的方法。

【讨论】：

我尝试了多种方式添加您的建议，但日历显示空白页？（请参阅上面我编辑的条目，显示我尝试过的内容）我不确定如何更新我的代码以使用“eventSources”而不是“events”？ ps：这是使用url的链接：fullcalendar.io/docs/event_data/addEventSource
您完全按照我展示的方式进行操作 - 将您的“events”属性替换为我展示的结构的“eventSources”。 eventSources 数组中的每个项目都应解析为事件列表，就好像您直接使用“事件”指定它一样。你所展示的看起来应该没问题。附言如果您使用的是已链接到的 addEventSource 方法，则应将“url”指定为该方法的参数，而不是日历原始设置的属性。而且您的代码不会调用该方法。
仍然卡在空白页上？不知道还有什么可以尝试的。我上面显示的更新代码给了我一个空白页。无论如何，感谢您的帮助。
您的浏览器控制台有错误吗？您可以创建一个 JSFiddle 来演示您的问题吗？我无法重现它。
@jlig - 如果您认为最终/完整代码对其他人有帮助，请将其作为单独的“答案”发布，而不是编辑。所以它对未来的搜索者来说更明显。如果它帮助您解决了问题，您仍然可以接受和/或投票赞成这个答案。

【解决方案2】：

以下是最终有效的代码：我必须添加 gcal.js，添加我的 google api 密钥，将“events”更改为“eventSources”，并使用“[]”括号而不是“{}”

<html>

<head> 
<link rel="stylesheet" href="../fullcalendar-3.1.0/fullcalendar.min.css" />
<script src="../fullcalendar-3.1.0/lib/jquery.min.js"></script>
<script src="../fullcalendar-3.1.0/lib/moment.min.js"></script>
<script src="../fullcalendar-3.1.0/fullcalendar.min.js"></script>
<script src="../fullcalendar-3.1.0/gcal.js"></script>
<script> 
$(document).ready(function() {

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        var calendar = $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            selectable: true,
            selectHelper: true,
            select: function(start, end, allDay) {
                var title = prompt('Event Title:');
                if (title) {
                    calendar.fullCalendar('renderEvent',
                        {
                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay
                        },
                        true // make the event "stick"
                    );
                }
                calendar.fullCalendar('unselect');
            },
            editable: true,
            nextDayThreshold:'00:00:00',
            // display Leave Requests plus Holidays from Google calendar
            googleCalendarApiKey: '* my api key *',
            eventSources: [ 'getLeaveRequests.cfc?method=getMyData', 'en.usa#holiday@group.v.calendar.google.com' ],
            timeFormat: ' ', // uppercase H for 24-hour clock
            eventDrop: function(event, delta) {
                alert(event.title + ' was moved ' + delta + ' days\n' +
                    '(should probably update your database)');
            }           
        });

    });
</script> 

<title>Calendar</title></head>

<body>

【讨论】：