Question

我有一个完美的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',

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

这是我尝试使用＆＃34; eventSources＆＃34;而不是＆＃34;事件＆＃34;

<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密钥，更改＆＃34;事件＆＃34;到＆＃34; eventSources＆＃34;，并使用＆＃34; []＆＃34;括号而不是＆＃34; {}＆＃34;

Answer 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'
        }
    ]
});

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

此外，我不知道您在哪里可以提供“url”属性 - 它没有在文档中的任何位置定义，也没有效果。对于Google日历，API密钥和日历ID就足够了。如果日历实际上不是您的日历，那么您需要抓取ID - 我还没有尝试过，但评论中提到的答案（记录的full calendar, events holidays and own events）提供了一种发现公共日历ID的方法。

Answer 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>

如何将Google美国假期添加到我的日历中？

2 个答案: