显示事件 - 仅显示5下一个

时间:2018-01-18 03:41:55

标签: jquery ajax

好的人我还在努力让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>

0 个答案:

没有答案