Question

我希望通过FullCalendar v2.9.0找到一些帮助来检索Google日历附件fileId。

Google日历专用于此项目，并且是公共的，Drive文件夹包含作为附件的图像文件 - 每个事件一个图像。我是Javascript的细节新手，但我搜索和研究了很多。我无法找到一个足够接近我想要做的事情的示例或教程，我能理解。

我的项目涉及一个月视图FullCalendar，其中用户点击事件，事件背景突出显示，侧栏div填充标题，日期时间，描述，位置和附件图像文件。用户可以浏览多个事件，并相应地更新侧边栏。

这是我到目前为止所做的：

除了图片附件外，Google日历元素正在填充和更新。

我可以使用附加了附件fileId的URL在gcal.html中对HTML进行硬编码，并获取侧边栏中的图像。当然，图像是静态的。

使用Google API Explorer calendar.events.get并输入calendarId，eventId和简单的API密钥，所有这些都可以从FullCalendar中检索，API Explorer会返回附件fileId，（请注意，下面的fileUrl在浏览器中工作，提取查看器，但在我的HTML中不起作用。但这可以：“https://drive.google.com/uc?export=view&id=0B5Nk_tOCzCISaWdqYy1DYnF6SzA”）

来自API Explorer

Execute without OAuth
calendar.events.get executed 16 minutes ago time to execute: 282 ms
Request


GET https://www.googleapis.com/calendar/v3/calendars/c6kag4dlhqs7m160s3t3lfggak%40group.calendar.google.com/events/u9a5fuoqkfmkm2c20vpn75krf4?fields=attachments(fileId%2CfileUrl)&key={YOUR_API_KEY}


Response


200

- Show headers -

{
 "attachments": [
  {
   "fileUrl": "https://drive.google.com/file/d/0B5Nk_tOCzCISaWdqYy1DYnF6SzA/view?usp=drive_web",
   "fileId": "0B5Nk_tOCzCISaWdqYy1DYnF6SzA"
  }
 ]
}

我在gcal.html eventClick函数中使用正确的语法尝试了无穷无尽的语句组合，基本上是猜测。我也一直在尝试将代码添加到gcal.js中的events.push。这是我可以找到其他引用的事件元素的唯一地方。

我当前设置为“alert（event.fileid）;”在eventClick ingcal.html和gcal.js中events.push下的“attachments：entry.fileid”下，返回一个警告“undefined”。在gcal.js中，我注意到“successArgs = [ events ].concat(Array.prototype.slice.call(arguments, 1)); //转发其他jq args”。我想知道FullCalendar是否返回事件的所有字段？

gcal.html（head）

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <link href='../fullcalendar.css' rel='stylesheet' />
  <link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
  <script src='../lib/moment.min.js'></script>
  <script src='../lib/jquery.min.js'></script>
  <script src='../fullcalendar.min.js'></script>
  <script src='../gcal.js'></script>
  <script>

  $(document).ready(function() {

    $('#calendar').fullCalendar({
      eventLimit: 4,

      googleCalendarApiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',

      events: {
        googleCalendarId: 'c6kag4dlhqs7m160s3t3lfggak@group.calendar.google.com'
      },

      //$('#calendar'.fullCalendar( 'clientEvents' [, filter ] )  
      // Need to highlight next upcoming event on page load
      //        var filter = (events, event.start > getdate(new))   

      eventClick: function(event, events ) {

        alert(event.fileid);

        //eventRender: function(event, element, view) {
        // Need to reset highlight on prevoiusly clicked event
        //      element.css('background-color', '#5777c8');
        //}
        //$('#calendar').fullCalendar( 'updateEvents' );

        $( "#sidebar2" ).html(event.title);
        $( "#sidebar3" ).html(event.start.format('dddd MMM. Do'));
        $( "#sidebar4" ).html(event.start.format('h:mm a'));
        $( "#sidebar5" ).html(event.description);
        $( "#sidebar6" ).html(
          '<a style= color:#a2cadc; href=http://' + 
          event.location + ' target="_blank">' + 
          "More Band Info" + '</a>'
        );
        $(this).css('background-color', '#5777c8');
        return false;
        console.log

      },        

      loading: function(bool) {
        $('#loading').toggle(bool);
      }     

    });

  });

</script>

gcal.js（第122行到结尾）

return $.extend({}, sourceOptions, {
  googleCalendarId: null, // prevents source-normalizing from happening again
  url: url,
  data: data,
  startParam: false, // `false` omits this parameter. we already included it above
  endParam: false, // same
  timezoneParam: false, // same
  success: function(data) {
    var events = [];
    var successArgs;
    var successRes;

    if (data.error) {
      reportError('Google Calendar API: ' + data.error.message, data.error.errors);
    }
    else if (data.items) {
      $.each(data.items, function(i, entry) {
        var url = entry.htmlLink || null;

        // make the URLs for each event show times in the correct timezone
        if (timezoneArg && url !== null) {
          url = injectQsComponent(url, 'ctz=' + timezoneArg);
        }

        events.push({
          id: entry.id,
          title: entry.summary,
          start: entry.start.dateTime || entry.start.date, 
     // try timed. will fall back to all-day
          end: entry.end.dateTime || entry.end.date, // same
          url: url,
          location: entry.location,
          description: entry.description,
          attachments: entry.fileid  // tryiing to find the attachment reference
        });
      });

      // call the success handler(s) and allow it to return a new events array
      successArgs = [ events ].concat(Array.prototype.slice.call(arguments, 1)); 
      // forward other jq args
      successRes = applyAll(success, this, successArgs);
      if ($.isArray(successRes)) {
        return successRes;
      }
    }

    return events;
  }
});
}

// Injects a string like "arg=value" into the querystring of a URL
function injectQsComponent(url, component) {
  // inject it after the querystring but before the fragment
  return url.replace(/(\?.*?)?(#|$)/, function(whole, qs, hash) {
    return (qs ? qs + '&' : '?') + component + hash;
  });
}
});

非常感谢任何有助于实现这一目标的帮助。

FullCalendar - 在Google日历中检索附件的fileId

0 个答案: