Question

我正试图在我使用fullcalendar框架开发的网页中显示谷歌日历中的一些数据。

但我有一个叫做同域原点的问题......我不知道如何解决它。在文档中，fullcalendar说：

<script type='text/javascript'>

$(document).ready(function() {
$('#calendar').fullCalendar({
    events: 'http://www.google.com/your_feed_url/'
});
});

</script>

但是通过我的公共日历这样做只会给我带来麻烦。

我尝试使用服务器中的php以json格式读取日历，但结果非常相似。没有收到关于域的问题但没有显示事件。我收到一个关于formatDate没有被初始化的错误，所以我想我不是在读事件。

有关如何解决此问题的任何想法？我想，如果fullcalendar允许使用gcalendar执行此操作，则意味着可以完成此操作。

我在json中添加了一些事件：

{"version":"1.0","encoding":"UTF-8","feed":    {"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-    /spec/opensearchrss/1.0/","xmlns$gCal":"http://schemas.google.com/gCal/2005","id":    {"$t":"http://www.google.com/calendar/feeds/aristeidhsxr%40gmail.com/public/basic"},"update    d":{"$t":"2013-08-22T09:47:26.000Z"},"category":    [{"scheme":"http://schemas.google.com/g/2005#kind","term":"http://schemas.google.com/g/2005    #event"}],"title":{"$t":"aristeidhsxr@gmail.com","type":"text"},"subtitle":    {"$t":"aristeidhsxr@gmail.com","type":"text"},"link":    [{"rel":"alternate","type":"text/html","href":"http://www.google.com/calendar/embed?    src=aristeidhsxr%40gmail.com"},{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http://www.google.com/calendar/feeds/aristeidhsxr%40gmail.com/public/basic"},{"rel":"http://schemas.google.com/g/2005#batch","type":"application/atom+xml","href":"http://www.google.com/calendar/feeds/aristeidhsxr%40gmail.com/public/basic/batch"},{"rel":"self","type":"application/atom+xml","href":"http://www.google.com/calendar/feeds/aristeidhsxr%40gmail.com/public/basic?alt=json&max-results=25"}],"author":[{"name":{"$t":"Î‘ÏÎ¹ÏƒÏ„ÎµÎ¯Î´Î·Ï‚ Î§ÏÎ®ÏƒÏ„Î¿Ï…"},"email":{"$t":"aristeidhsxr@gmail.com"}}],"generator":{"$t":"Google Calendar","version":"1.0","uri":"http://www.google.com/calendar"},"openSearch$totalResults":{"$t":19},"openSearch$startIndex":{"$t":1},"openSearch$itemsPerPage":{"$t":25},"gCal$timezone":{"value":"Europe/Madrid"},"gCal$timesCleaned":{"value":0},"entry":[{"id":{"$t":"http://www.google.com/calendar/feeds/aristeidhsxr%40gmail.com/public/basic/2gh1aqf61krdvgr85eseoclr64"},"published":{"$t":"2013-08-22T09:47:26.000Z"},"updated":{"$t":"2013-08-22T09:47:26.000Z"},"category":[{"scheme":"http://schemas.google.com/g/2005#kind","term":"http://schemas.google.com/g/2005#event"}],"title":{"$t":"dghhfdg","type":"html"},"summary":{"$t":"CuÃ¡ndo: vie 30 de ago de 2013 21:30 al 22:30 \nCEST\u003cbr\u003e\n\n\n\u003cbr\u003eEstado del evento: bekrÃ¤ftad","type":"html"},"content":{"$t":"CuÃ¡ndo: vie 30 de ago de 2013 21:30 al 22:30Â \nCEST\u003cbr /\u003e\n\n\n\u003cbr /\u003eEstado del evento: bekrÃ¤ftad","type":"html"},"link":[{"rel":"alternate","type":"text/html","href":"http://www.google.com/calendar/event?eid=MmdoMWFxZjYxa3JkdmdyODVlc2VvY2xyNjQgYXJpc3RlaWRoc3hyQG0","title":"alternate"}

这是json文件的一部分，不完整。

我尝试直接输入几个事件，其中一个用户说：

$(document).on('pageshow','#agenda',function(){    

       $('#calendar').fullCalendar({
         events: [{
                  title: 'Event 1', start: '2013-08-26T19:10:00Z', 
                  end: '2013-08-28T19:20:00Z'
                  },{
                  title: 'Event 2', start: '2013-08-27T16:25:00Z',
                  end: '2013-08-27T18:45:00Z'
                }]
      });
    });

但是我说错了：

Uncaught TypeError: Cannot read property 'formatDate' of undefined gcal.js:11
(anonymous function) gcal.js:11
(anonymous function) gcal.js:107

Answer 1

你确定你在php中从http://www.google.com/your_feed_url/更正了解析事件吗？活动开始日期和结束日期必须采用ISO 8601格式，例如2013-07-09T19:10:00-04:00。您可以使用fullcalendar $.fullCalendar.formatDate(from, format);转换日期和时间。

您也可以使用Google Calendar Api来举办活动。

事件必须如下所示：

events: [{
    title: 'Event 1', start: '2013-07-09T19:10:00-04:00', 
    end: '2013-07-09T19:20:00-04:00', allDay: false
    },{
    title: 'Event 2', start: '2013-08-22T16:25:00-04:00',
        end: '2013-08-22T18:45:00-04:00', allDay: true
}]

对于公共谷歌日历，您可以执行以下操作：

var url = 'http://google.com/calendar/feeds/test@group.calendar.google.com/public/full?alt=json';
$.ajax({
    url: url,
    dataType: 'jsonp',
    success: function(response){
        var googleEvents = new Array();
        for(var i = 0; i < response.feed.entry.length; i ++){
            googleEvents[i] = {
                title : response.feed.entry[i].title.$t,
                start: response.feed.entry[i].gd$when[0].startTime,
                end: response.feed.entry[i].gd$when[0].endTime
            };
        }
        //init events
        calendar = $('#calendar-container').fullCalendar({
            events: googleEvents
        });
    }
});

参数alt指定响应格式。

具有fullcalendar和谷歌日历的同域

1 个答案: