[英]Google calendar events not showing up on FullCalendar
我試圖在我的網站上獲得一個日歷,該日歷與我的Google日歷中的數據同步並顯示在網頁上。
為此,我使用了FullCalendar,並遵循了文檔中的步驟。 我得到了日歷,但是它沒有顯示googlecalendar的事件。它只是空白。 我有API和ID,並且未將其設置為private。
<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>
///////// UPDATE ////////////在遵循@Victor Rocheron的建議之后,這就是我的意思:
`
<!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);
});
})();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.