好的人我还在努力让Google Calendar Events列在我网站的底部,但没有运气。当我第一次开始这个项目的目的是按日期按时间顺序列出最近的5个即将发生的事件。我的日历确实包含每周二晚发生的一个事件,如果显示的下5个事件相同则那么好。但是如果下周一恰好有一个事件,那么它也应该按照时间顺序按日期顺序显示为即将发生的5个事件之一。即01/01/2018,01 / 04/201等...
以下是查看结果如何在页面底部显示的网站。 http://eaa309.club/index.html
正如您可以看到它显示较旧的事件,我希望将来只显示事件。
最初有人在这个论坛上帮助我创建代码,因为我对AJAX等一无所知。但是这里有我所拥有的(在代码块下面)。在修改此代码以显示我正在寻找的内容时,将非常感谢任何帮助。
注意:我使用了一些可以在API GET方法中使用的现成变量,但我不确定目前是否有效。它几乎就像它根据get方法的结果提取数据一样,它恰好是所有日历事件(没有过滤器)而不是最重要的5。我通过以下网址验证了这一点:网址:https://www.googleapis.com/calendar/v3/calendars/eaachapter309@gmail.com/events?singleEvents=true&maxResults=5&orderBy=startTime&key=AIzaSyBZilw_M3Jk14gkmGk_bBuQUcBr_EW5RI4
有道理我不相信有os代码来过滤掉这种类型的标准。
<p id="myList"></p>
<!--JQuery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
//Jquery's ajax request
$.ajax({
type:'GET',
url:'https://www.googleapis.com/calendar/v3/calendars/eaachapter309@gmail.com/events?singleEvents=true&maxResults=5&orderBy=startTime&key=AIzaSyBZilw_M3Jk14gkmGk_bBuQUcBr_EW5RI4',
dataType: 'json',
async:true
}).done(function(data){
//once we get a successful response this callback function
//gets fired, and "data" contains the parsed json file .
//here we iterate over the object array
$.each(data.items, function(i, item){
//I do this to later format these timestamps
//set options for date.toLocaleDateString() function
var options = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
let start = new Date(item.start.dateTime).toLocaleDateString('en-US', options);
let end = new Date(item.end.dateTime).toLocaleDateString('en-US', options);
let end_splt = end.split(',');
//append data to the list.
if(item.status != "cancelled"){
$('#myList').append(`
<font class='mbr-text mbr-fonts-style foot-text display-7'><a href='calendar.html'>~ ${item.summary} - ${start} - ${end_splt[1]} </a></font><br>
`);
}
});
}).fail(function(e){
error(e);
});
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
</script>