我正在尝试在我的网站上获取一个日历，该日历与我的谷歌日历上的数据同步并将其显示在网页上。
为此，我使用了FullCalendar并按照文档上的步骤进行操作。我得到日历，但它不显示来自谷歌日历的事件。它只是空白的。我有API，ID，并且它没有设置为私有。
<html>
<head>
<title>calendario fiscal</title>
<!--Fullcalendar Dependencies-->
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print'/>
<script src='fullcalendar/gcal.js'></script>
<!--jQuery-->
<script src='jquery/jquery-1.9.1.min.js'></script>
<script src='jquery/jquery-ui-1.10.2.custom.min.js'></script>
<!--FullCalendar-->
<script src='fullcalendar/fullcalendar.min.js'></script>
<script type="text/javascript">
$(document).ready(function()
{
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar(
{
googleCalendarApiKey: 'mykey',
header:
{
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
},
defaultView: "month",
selectable: false,
selectHelper: false,
events: {
googleCalendarId: "myid"
}
});
});
</script>
</head>
<body>
<div id="calendar">
</div>
</body>
</html>
/////////更新////////////根据@Victor罗切隆的建议，以下是我所拥有的：
`
<!DOCTYPE html>
<html>
<title>calendario fiscal</title>
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print'/>
<script src='fullcalendar/gcal.js'></script>
<script src='jquery/jquery-1.9.1-min.js'></script>
<script src='jquery/jquery-ui-1.10.2.custom.min.js'></script>
<script type="text/javascript">
function doRequest(options, printResult){
var x = new XMLHttpRequest();
x.open(options.method, options.url);
x.onload = x.onerror = function(){
printResult(
(x.responseText || '')
);
};
x.send(options.data);
}
(function(){
doRequest({
method:'GET',
url: 'https://www.google.apis.com/calendars/myid@group.calendar.google.com/events?key=mykey',
}, function printResult(result){
result = JSON.parse(result);
var i;
var str,end;
eventsList = {
events: []
}
for(i=0;i < result.items.length;i++) {
str = result.items[i].start.dateTime;
end = result.items[i].end.dateTime;
eventsList.events.push({
"title": result.items[i].summary,
"start":str,
"end":end,
"description": result.items[i].description
});
}
var myEvents = eventsList.events;
$('#calendar').fullCalendar({
header: {
left: 'prev,next today controle',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
timezone: "Europe/Paris",
selectable:true,
selectHelper:true,
minTime:"07:00:00",
maxTime:"21:00:00",
contentHeight: 685,
lang: 'fr',
select: function(start, end) {
var title = prompt('Event Title:');
var eventData;
if(title) {
eventData = {
title: title,
start: start,
end: end,
description: description
};
$('#calendar').fullCalendar('renderEvent', eventData, true); //stick?=true
}
$('#calendar').fullCalendar('unselect');
},
editable:true,
eventLimit: true, //allow "more" link when too many eventsevents: myEvents
});
setTimeout("$('.fc-today-button').click();", 50);
</script>
<style type="text/css">
body{
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar{
width: 900px;
height: auto;
margin: 0 auto;
}
</style>
<body>
<div id="calendar">
</body>
</html>
`
我不明白问题是什么。
这是我
几个月前做的一个实现，只需将<--YOURID-->和<--YOURKEY--替换为您的>并告诉我它是否有效
https://jsfiddle.net/cw48ssyn/
Javascript ：
function doRequest(options, printResult) {
var x = new XMLHttpRequest();
x.open(options.method, options.url);
x.onload = x.onerror = function() {
printResult(
(x.responseText || '')
);
};
x.send(options.data);
}
(function() {
doRequest({
method: 'GET',
url: 'https://www.googleapis.com/calendar/v3/calendars/<---YOURID-->/events?key=<--YOURKEY-->',
}, function printResult(result) {
result = JSON.parse(result);
var i;
var str,end;
eventsList = {
events: []
}
for(i=0;i < result.items.length;i++) {
str = result.items[i].start.dateTime;
end = result.items[i].end.dateTime;
eventsList.events.push({
"title": result.items[i].summary,
"start": str,
"end": end,
"description": result.items[i].description
});
}
var myEvents = eventsList.events;
$('#calendar').fullCalendar({
header: {
left: 'prev,next today controle',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
timezone: "Europe/Paris",
selectable: true,
selectHelper: true,
minTime:"07:00:00",
maxTime:"21:00:00",
contentHeight: 685,
lang: 'fr',
select: function(start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end,
description: description
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: myEvents
});
setTimeout("$('.fc-today-button').click();", 50);
});
})();