堆栈内存溢出
  简体   繁体   English

在javascript中使用API​​ v3检索Google日历事件

[英]Retrieve Google Calendar events using API v3 in javascript

 原文  2015-02-01 12:22:05  2   2    javascript/ jquery/ calendar/ google-calendar-api

问题描述

last year I was using the code found here http://gdata-javascript-client.googlecode.com/svn/trunk/samples/calendar/simple_sample/simple_sample.html to retrieve all events from "now" of a public Google Calendar and then display the results in a webpage. 去年我使用http://gdata-javascript-client.googlecode.com/svn/trunk/samples/calendar/simple_sample/simple_sample.html中的代码从公共Google日历的“现在”检索所有事件，然后在网页中显示结果。 I modified that code to match my needs (see the code below). 我修改了该代码以满足我的需求（请参阅下面的代码）。

Now, with API v3, the code doesn't work anymore and I'm not able to understand which lines of the code are deprecated and how to update them. 现在，使用API​​ v3，代码不再起作用，我无法理解代码的哪些行已被弃用以及如何更新它们。 Could please someone help me with this code? 请问有人帮我这个代码吗？

Thank you so much :-) 非常感谢 ：-） 

 <body> <script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_KEY_HERE"></script> <script type="text/javascript"> /* Loads the Google data JavaScript client library */ google.load("gdata", "2.x"); function init() { // init the Google data JS client library with an error handler google.gdata.client.init(handleGDError); // load the code.google.com calendar loadMyCalendar(); } /** * Loads the Google Event Calendar */ function loadMyCalendar() { loadCalendarByAddress('MY_ADDRESS@gmail.com'); /* address here } /** * Adds a leading zero to a single-digit number. Used for displaying dates. */ function padNumber(num) { if (num <= 9) { return "0" + num; } return num; } /** * Determines the full calendarUrl based upon the calendarAddress * argument and calls loadCalendar with the calendarUrl value. * * @param {string} calendarAddress is the email-style address for the calendar */ function loadCalendarByAddress(calendarAddress) { var calendarUrl = 'https://www.google.com/calendar/feeds/' + calendarAddress + '/public/full'; loadCalendar(calendarUrl); } function loadCalendar(calendarUrl) { var service = new google.gdata.calendar.CalendarService('gdata-js-client-samples-simple'); var query = new google.gdata.calendar.CalendarEventQuery(calendarUrl); query.setOrderBy('starttime'); query.setSortOrder('ascending'); query.setFutureEvents(true); query.setSingleEvents(true); query.setMaxResults(100); service.getEventsFeed(query, listEvents, handleGDError); } /** * Callback function for the Google data JS client library to call when an error * occurs during the retrieval of the feed. Details available depend partly * on the web browser, but this shows a few basic examples. In the case of * a privileged environment using ClientLogin authentication, there may also * be an e.type attribute in some cases. * * @param {Error} e is an instance of an Error */ function handleGDError(e) { document.getElementById('jsSourceFinal').setAttribute('style', 'display:none'); if (e instanceof Error) { /* alert with the error line number, file and message */ alert('Error at line ' + e.lineNumber + ' in ' + e.fileName + '\\n' + 'Message: ' + e.message); /* if available, output HTTP error code and status text */ if (e.cause) { var status = e.cause.status; var statusText = e.cause.statusText; alert('Root cause: HTTP error ' + status + ' with status text of: ' + statusText); } } else { alert(e.toString()); } } /** * Callback function for the Google data JS client library to call with a feed * of events retrieved. * * Creates an unordered list of events in a human-readable form. This list of * events is added into a div called 'events'. The title for the calendar is * placed in a div called 'calendarTitle' * * @param {json} feedRoot is the root of the feed, containing all entries */ function listEvents(feedRoot) { var entries = feedRoot.feed.getEntries(); var eventDiv = document.getElementById('events'); if (eventDiv.childNodes.length > 0) { eventDiv.removeChild(eventDiv.childNodes[0]); } var ul = document.createElement('ul'); /* set the calendarTitle div with the name of the calendar */ /*document.getElementById('calendarTitle').innerHTML = "Calendar: " + feedRoot.feed.title.$t + "<br/><br/>";*/ /* loop through each event in the feed */ var len = entries.length; for (var i = 0; i < len; i++) { var entry = entries[i]; /* contenuto e titolo sono invertiti */ var cont = entry.getTitle().getText(); var title = entry.getContent().getText(); /* get description notes */ /* only events containing WORD_1 &/or WORD_2 & not containing '?' */ if(cont.indexOf('?') == -1 && (cont.indexOf('WORD_1') > -1 || cont.indexOf('WORD_2') > -1)){ var whereIs = entry.getLocations()[0].getValueString(); var startDateTime = null; var startJSDate = null; var times = entry.getTimes(); if (times.length > 0) { startDateTime = times[0].getStartTime(); startJSDate = startDateTime.getDate(); } var entryLinkHref = null; if (entry.getHtmlLink() != null) { entryLinkHref = entry.getHtmlLink().getHref(); } var day = padNumber(startJSDate.getDate()); var month = padNumber(startJSDate.getMonth() + 1); var dateString = day + "/" + month + "/" + startJSDate.getFullYear(); if (title.indexOf(' - ') > -1) { cont = title.substring(0, title.indexOf(' - ')+3) + cont + " @ " + whereIs; title = title.substring(title.indexOf(' - ')+3); } else cont = "h_:_ - " + cont + " @ " + whereIs; var li = document.createElement('li'); /* if we have a link to the event, create an 'a' element */ if (entryLinkHref != null) { entryLink = document.createElement('a'); entryLink.setAttribute('href', entryLinkHref); li.appendChild(document.createTextNode(dateString + ' - ')); entryLink.appendChild(document.createTextNode(title)); li.appendChild(entryLink); } else { li.appendChild(document.createTextNode(dateString + ' - ' + title)); } var p = document.createElement("p"); var lo = document.createElement('lo'); lo.appendChild(document.createTextNode(cont)); li.style.fontSize = "25px"; lo.style.fontSize = "15px"; /* append the list item onto the unordered list */ ul.appendChild(li); ul.appendChild(lo); ul.appendChild(p); } eventDiv.appendChild(ul); } } google.setOnLoadCallback(init); </script> <p id="events">LOADING CALENDAR . . . . . . . . . .</p> </body>

2 个解决方案

解决方案1
 10 已采纳  2015-02-08 11:59:11

SOLVED :-) here's the javascript code to access and show upcoming events of PUBLIC google Calendars, with Google Calendar API v3. 求助:-)这里是访问和显示PUBLIC谷歌日历即将发生的事件的JavaScript代码，使用Google Calendar API v3。 

 <html> <head> </head> <body bgcolor="black" text="white" link="#00ffff" vlink="green" alink="yellow"> <script> var clientId = 'YOUR_CLIENT_ID HERE'; //choose web app client Id, redirect URI and Javascript origin set to http://localhost var apiKey = 'YOUR_APIKEY_HERE'; //choose public apiKey, any IP allowed (leave blank the allowed IP boxes in Google Dev Console) var userEmail = "YOUR_ADDRESS@gmail.com"; //your calendar Id var userTimeZone = "YOUR_TIME_ZONE_HERE"; //example "Rome" "Los_Angeles" ecc... var maxRows = 10; //events to shown var calName = "YOUR CALENDAR NAME"; //name of calendar (write what you want, doesn't matter) var scopes = 'https://www.googleapis.com/auth/calendar'; //--------------------- Add a 0 to numbers function padNum(num) { if (num <= 9) { return "0" + num; } return num; } //--------------------- end //--------------------- From 24h to Am/Pm function AmPm(num) { if (num <= 12) { return "am " + num; } return "pm " + padNum(num - 12); } //--------------------- end //--------------------- num Month to String function monthString(num) { if (num === "01") { return "JAN"; } else if (num === "02") { return "FEB"; } else if (num === "03") { return "MAR"; } else if (num === "04") { return "APR"; } else if (num === "05") { return "MAJ"; } else if (num === "06") { return "JUN"; } else if (num === "07") { return "JUL"; } else if (num === "08") { return "AUG"; } else if (num === "09") { return "SEP"; } else if (num === "10") { return "OCT"; } else if (num === "11") { return "NOV"; } else if (num === "12") { return "DEC"; } } //--------------------- end //--------------------- from num to day of week function dayString(num){ if (num == "1") { return "mon" } else if (num == "2") { return "tue" } else if (num == "3") { return "wed" } else if (num == "4") { return "thu" } else if (num == "5") { return "fri" } else if (num == "6") { return "sat" } else if (num == "0") { return "sun" } } //--------------------- end //--------------------- client CALL function handleClientLoad() { gapi.client.setApiKey(apiKey); checkAuth(); } //--------------------- end //--------------------- check Auth function checkAuth() { gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult); } //--------------------- end //--------------------- handle result and make CALL function handleAuthResult(authResult) { if (authResult) { makeApiCall(); } } //--------------------- end //--------------------- API CALL itself function makeApiCall() { var today = new Date(); //today date gapi.client.load('calendar', 'v3', function () { var request = gapi.client.calendar.events.list({ 'calendarId' : userEmail, 'timeZone' : userTimeZone, 'singleEvents': true, 'timeMin': today.toISOString(), //gathers only events not happened yet 'maxResults': maxRows, 'orderBy': 'startTime'}); request.execute(function (resp) { for (var i = 0; i < resp.items.length; i++) { var li = document.createElement('li'); var item = resp.items[i]; var classes = []; var allDay = item.start.date? true : false; var startDT = allDay ? item.start.date : item.start.dateTime; var dateTime = startDT.split("T"); //split date from time var date = dateTime[0].split("-"); //split yyyy mm dd var startYear = date[0]; var startMonth = monthString(date[1]); var startDay = date[2]; var startDateISO = new Date(startMonth + " " + startDay + ", " + startYear + " 00:00:00"); var startDayWeek = dayString(startDateISO.getDay()); if( allDay == true){ //change this to match your needs var str = [ '<font size="4" face="courier">', startDayWeek, ' ', startMonth, ' ', startDay, ' ', startYear, '</font><font size="5" face="courier"> @ ', item.summary , '</font><br><br>' ]; } else{ var time = dateTime[1].split(":"); //split hh ss etc... var startHour = AmPm(time[0]); var startMin = time[1]; var str = [ //change this to match your needs '<font size="4" face="courier">', startDayWeek, ' ', startMonth, ' ', startDay, ' ', startYear, ' - ', startHour, ':', startMin, '</font><font size="5" face="courier"> @ ', item.summary , '</font><br><br>' ]; } li.innerHTML = str.join(''); li.setAttribute('class', classes.join(' ')); document.getElementById('events').appendChild(li); } document.getElementById('updated').innerHTML = "updated " + today; document.getElementById('calendar').innerHTML = calName; }); }); } //--------------------- end </script> <script src='https://apis.google.com/js/client.js?onload=handleClientLoad'></script> <div id='content'> <h1 id='calendar' style="color:grey">LOADING . . . .</h1> <ul id='events'></ul> </div> <p id='updated' style="font-size:12; color:grey">updating . . . . .</p> </body> </html>

解决方案2
 1  2019-06-07 15:03:27

Here's a simplified, annotated, and updated script based on Max's original that makes use of Moment.js and JQuery. 这是一个基于Max原创的简化，注释和更新的脚本，它使用了Moment.js和JQuery。 Read the full blog post here for details (including how to get your API key), or just replace YOUR_CALENDAR_ID and YOUR_API_KEY in the script below: 阅读完整的博客文章了解详细信息（包括如何获取API密钥），或者只需在下面的脚本中替换YOUR_CALENDAR_ID和YOUR_API_KEY： 

<script>
    /* This solution makes use of "simple access" to google, providing only an API Key.
    * This way we can only get access to public calendars. To access a private calendar,
    * we would need to use OAuth 2.0 access.
    *
    * "Simple" vs. "Authorized" access: https://developers.google.com/api-client-library/javascript/features/authentication
    * Examples of "simple" vs OAuth 2.0 access: https://developers.google.com/api-client-library/javascript/samples/samples#authorizing-and-making-authorized-requests
    *
    * We will make use of "Option 1: Load the API discovery document, then assemble the request."
    * as described in https://developers.google.com/api-client-library/javascript/start/start-js
    */
    function printCalendar() {
        // The "Calendar ID" from your calendar settings page, "Calendar Integration" secion:
        var calendarId = 'YOUR_CALENDAR_ID@group.calendar.google.com';

        // 1. Create a project using google's wizzard: https://console.developers.google.com/start/api?id=calendar
        // 2. Create credentials:
        //    a) Go to https://console.cloud.google.com/apis/credentials
        //    b) Create Credentials / API key
        //    c) Since your key will be called from any of your users' browsers, set "Application restrictions" to "None",
        //       leave "Website restrictions" blank; you may optionally set "API restrictions" to "Google Calendar API"
        var apiKey = 'YOUR_API_KEY';
        // You can get a list of time zones from here: http://www.timezoneconverter.com/cgi-bin/zonehelp
        var userTimeZone = "Europe/Budapest";

        // Initializes the client with the API key and the Translate API.
        gapi.client.init({
            'apiKey': apiKey,
            // Discovery docs docs: https://developers.google.com/api-client-library/javascript/features/discovery
            'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest'],
        }).then(function () {
            // Use Google's "apis-explorer" for research: https://developers.google.com/apis-explorer/#s/calendar/v3/
            // Events: list API docs: https://developers.google.com/calendar/v3/reference/events/list
            return gapi.client.calendar.events.list({
                'calendarId': calendarId,
                'timeZone': userTimeZone,
                'singleEvents': true,
                'timeMin': (new Date()).toISOString(), //gathers only events not happened yet
                'maxResults': 20,
                'orderBy': 'startTime'
            });
        }).then(function (response) {
            if (response.result.items) {
                var calendarRows = ['<table class="wellness-calendar"><tbody>'];
                response.result.items.forEach(function(entry) {
                    var startsAt = moment(entry.start.dateTime).format("L") + ' ' + moment(entry.start.dateTime).format("LT");
                    var endsAt = moment(entry.end.dateTime).format("LT");
                    calendarRows.push(`<tr><td>${startsAt} - ${endsAt}</td><td>${entry.summary}</td></tr>`);
                });
                calendarRows.push('</tbody></table>');
                $('#wellness-calendar').html(calendarRows.join(""));
            }
        }, function (reason) {
            console.log('Error: ' + reason.result.error.message);
        });
    };

    // Loads the JavaScript client library and invokes `start` afterwards.
    gapi.load('client', printCalendar);
</script>

You will also need to include Moment.JS and the Google JS API somewhere in your page: 您还需要在页面中的某处包含Moment.JS和Google JS API： 

<script src="https://cdn.jsdelivr.net/npm/moment@2/moment.min.js"></script>
<script src="https://apis.google.com/js/api.js"></script>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用带有JavaScript的Google Calendar api v3在Google Calendar中创建记录事件（jquery ajax POST） - Creating reccuring events in Google Calendar using Google Calendar api v3 with javascript (jquery ajax POST) 谷歌日历api v3 calendar.events.list并在javascript中使用timeMax，timeMin - google calendar api v3 calendar.events.list and using timeMax,timeMin in javascript 在JavaScript中使用API​​ v3检索单个日历事件 - Retrieve single Calendar Event using API v3 in javascript Google Calendar API v3 JavaScript格式 - Google calendar API v3 javascript format 如何使用JavaScript从Google Calendar API检索所有事件 - How to retrieve all events from Google Calendar API, using JavaScript 使用JavaScript Google Calendar API V3获取特定日期的事件 - Get events from a certain day with the javascript google calendar api v3 Google Calendar API v3：特定星期的事件 - Google Calendar API v3 : events from a particular week 使用 Google Calendar API v3 获取重复事件的下一个实例 - Get the next instance of recurring events with the Google Calendar API v3 从Google Calendar API v2到V3-Javascript - From Google Calendar API v2 to V3 - Javascript 如何使用 Google Calendar API v3 (JavaScript) 删除事件通知 - How to remove event notification using Google Calendar API v3 (JavaScript)
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM