将Google Calendar事件结束时间添加到脚本中

Question

I have a script which lists Google Calendar events with the start time, name and description but I would like to have the end time too so it reads;

5:00pm - 6:00pm - Event title - event description

Rather than just what it has at the moment which is just the start time and not the end time.

This is the script I have:

$(document).ready(GCalEvents());

function GCalEvents() {
    var datenow = new Date();
    var curyear = datenow.getFullYear();
    var curmonth = datenow.getMonth() + 1;
    var curdate = datenow.getDate();
    var curhour = datenow.getHours();
    var curmin = datenow.getMinutes();
    var curtz = datenow.getTimezoneOffset();
    //curtz = -480;
    var plusmin = "-";
    if (curtz <= 0) {
        plusmin = "%2B";
    }
    curtz = Math.abs(curtz);
    var curtzmin = curtz % 60;
    curtz = parseInt(curtz / 60);
    if (curtzmin < 10) { curtzmin = "0" + curtzmin; }
    if (curtz < 10) { curtz = "0" + curtz; }

    datenow = curyear + "-" + curmonth + "-" + curdate + "T" + curhour + "%3A" + curmin + "%3A00" + plusmin + curtz + "%3A" + curtzmin;

    var url =  "https://www.googleapis.com/calendar/v3/calendars/{calendarid}/events?alwaysIncludeEmail=false&maxResults=2&orderBy=startTime&showDeleted=false&showHiddenInvitations=false&singleEvents=true&timeMin=" + datenow + "&fields=items(start%2Csummary%2Cdescription)%2CtimeZone&key={key}";
//    var url =  "https://www.googleapis.com/calendar/v3/calendars/{calendarid}/events?alwaysIncludeEmail=false&maxResults=2&orderBy=startTime&showDeleted=false&showHiddenInvitations=false&singleEvents=true&timeMin=" + datenow + "&fields=items(start%2Csummary%2Cdescription)%2CtimeZone&key={key}";

    $.getJSON(url, function(data) {
    var event_start_date_new = new Date();
    event_start_date_new.setDate(event_start_date_new.getDate() - 1);

    for(i in data['items']) {
            item = data['items'][i];

        // event title
            var event_title = item.summary;
            var event_description = item.description;

        // event start date/time
            var event_start_date = new Date(item.start.dateTime);

        // format the date and time
            var month = event_start_date.getMonth();
            var day = event_start_date.getDay();
            var date = event_start_date.getDate();

            var daysArr = new Array();
            daysArr[0] = "Sunday";
            daysArr[1] = "Monday";
            daysArr[2] = "Tuesday";
            daysArr[3] = "Wednesday";
            daysArr[4] = "Thursday";
            daysArr[5] = "Friday";
            daysArr[6] = "Saturday";

            var monthsArr = new Array();
            monthsArr[0] = "January";
            monthsArr[1] = "February";
            monthsArr[2] = "March";
            monthsArr[3] = "April";
            monthsArr[4] = "May";
            monthsArr[5] = "June";
            monthsArr[6] = "July";
            monthsArr[7] = "August";
            monthsArr[8] = "September";
            monthsArr[9] = "October";
            monthsArr[10] = "November";
            monthsArr[11] = "December";

            var hour = event_start_date.getHours();
            var min = event_start_date.getMinutes();
            if (min < 10) { min = "0" + min; }
            if (hour < 11) {
        var ampm = "am";
        if (hour == 0) { hour = 12; }
            } else {
        var ampm = "pm";
        if (hour > 12) { hour = hour - 12; }
            }
            if (hour < 10) { hour = "&nbsp;&nbsp;" + hour; }

            var event_start_str = daysArr[day] + ", " + monthsArr[month] + " " + date;
            var event_time_str = hour + ":" + min + " " + ampm;

            if (event_start_date.getDate() != event_start_date_new.getDate()) {
        event_start_str = "<div class=\"calendar_date\"><strong>" + event_start_str + "</strong></div>";
        event_start_date_new = event_start_date;
            } else {
        event_start_str = "";
            };



            // Render the event
            $("#gcal-events").last().before("<div class=\"calendar_item\"><li>" + event_time_str + "&nbsp;-&nbsp;" + event_title + "<p><small>" + event_description + "</small></p></ul>" + "</li></div>");
    }
    });
};

If anyone is able to help with that to reversion the current script, that would be great.

Answer 1

The Events resource returns start and end dates as well (JSON format that has date , dateTime , timeZone attributes).

Based on your code, you're not using the end attribute which is why you're not having any values for the end date displayed. Your code for the start date is alright, so you can just re-implement it for the end attribute.

Hope this helps!