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

时间：2023-03-26
本文介绍了在 javascript 中使用 API v3 检索 Google 日历事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

去年我使用的是这里找到的代码 http://gdata-javascript-client.googlecode.com/svn/trunk/samples/calendar/simple_sample/simple_sample.html 从公共 Google 日历的现在"检索所有事件，然后显示结果在一个网页中.我修改了该代码以满足我的需要(请参阅下面的代码).

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. I modified that code to match my needs (see the code below).

现在，使用 API v3，代码不再工作，我无法理解哪些代码行已被弃用以及如何更新它们.有人可以帮我处理这段代码吗?

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. Could please someone help me with this code?

非常感谢你:-)

<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 + '
' +
          '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>

推荐答案

已解决 :-) 这是使用 Google Calendar API v3 访问和显示 PUBLIC google Calendars 即将发生的事件的 javascript 代码.

SOLVED :-) here's the javascript code to access and show upcoming events of PUBLIC google Calendars, with 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>

这篇关于在 javascript 中使用 API v3 检索 Google 日历事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！

上一篇：Moment.js 从日期获取日期名称 下一篇：如何通过 Python 使用 Selenium 将日期作为文本直接

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权