Question

我正在尝试在我的网站上获取与我的Google日历上的数据同步的日历，并将其显示在网页上。

为此，我使用了FullCalendar并按照文档中的步骤操作。我得到了日历，但它没有显示来自googlecalendar的事件。它只是空白。我有API，ID，并没有设置为私有。

<html>
<head>
  <title>calendario fiscal</title>
  <!--Fullcalendar Dependencies-->
  <link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
  <link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print'/>

  <script src='fullcalendar/gcal.js'></script>

  <!--jQuery-->
  <script src='jquery/jquery-1.9.1.min.js'></script>
  <script src='jquery/jquery-ui-1.10.2.custom.min.js'></script>

  <!--FullCalendar-->
  <script src='fullcalendar/fullcalendar.min.js'></script>

  <script type="text/javascript">

  $(document).ready(function()
  {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var calendar = $('#calendar').fullCalendar(
    {
      googleCalendarApiKey: 'mykey',

      header:
      {
        left: "prev,next today",
        center: "title",
        right: "month,agendaWeek,agendaDay"
      },

      defaultView: "month",

      selectable: false,
      selectHelper: false,

      events: {
            googleCalendarId: "myid"
        }

  });
    });

  </script>
</head>


  <body>
  <div id="calendar">
  </div>

  </body>
  </html>

///////// UPDATE //////////// 按照@Victor Rocheron的建议，这就是我所拥有的：

`
<!DOCTYPE html>
<html>
<title>calendario fiscal</title>
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print'/>

<script src='fullcalendar/gcal.js'></script>
<script src='jquery/jquery-1.9.1-min.js'></script>
<script src='jquery/jquery-ui-1.10.2.custom.min.js'></script>


    <script type="text/javascript">

    function doRequest(options, printResult){
    var x = new XMLHttpRequest();
    x.open(options.method, options.url);
    x.onload = x.onerror = function(){
        printResult(
            (x.responseText || '')
        );
    };
    x.send(options.data);
    }

    (function(){
        doRequest({
            method:'GET',
            url: 'https://www.google.apis.com/calendars/myid@group.calendar.google.com/events?key=mykey',
        }, function printResult(result){

        result = JSON.parse(result);
        var i;
        var str,end;
        eventsList = {
            events: []
        }
        for(i=0;i < result.items.length;i++) {

            str = result.items[i].start.dateTime;
            end = result.items[i].end.dateTime;

            eventsList.events.push({
                "title": result.items[i].summary,
                "start":str,
                "end":end,
                "description": result.items[i].description
            });
        }

                var myEvents = eventsList.events;
                $('#calendar').fullCalendar({

                header: {
                left: 'prev,next today controle',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
                },
                defaultView: 'agendaWeek',
                timezone: "Europe/Paris",
                selectable:true,
                selectHelper:true,
                minTime:"07:00:00",
                maxTime:"21:00:00",
                contentHeight: 685,
                lang: 'fr',
                select: function(start, end) {
                var title = prompt('Event Title:');
                var eventData;

                if(title) {
                eventData = {
                    title: title,
                    start: start,
                    end: end,
                    description: description
                    };
                $('#calendar').fullCalendar('renderEvent', eventData, true); //stick?=true
            }
            $('#calendar').fullCalendar('unselect');
            },
            editable:true,
            eventLimit: true, //allow "more" link when too many eventsevents: myEvents

            });

        setTimeout("$('.fc-today-button').click();", 50);



    </script>

    <style type="text/css">

        body{
            margin-top: 40px;
            text-align: center;
            font-size: 14px;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        }

        #calendar{
            width:  900px;
      height: auto;
            margin: 0 auto;
        }

    </style>

<body>
<div id="calendar">
</body>

</html>

`

我不是在理解问题所在。

Answer 1

这是我几个月前做过的一个实现，只需替换＆lt; - YOURID - ＆gt;和＆lt; - YOURKEY - ＆gt;由你的，告诉我它是否有效

https://jsfiddle.net/cw48ssyn/

Javascript：

function doRequest(options, printResult) {
    var x = new XMLHttpRequest();
    x.open(options.method, options.url);
    x.onload = x.onerror = function() {
      printResult(
        (x.responseText || '')
      );
    };
    x.send(options.data);
  }


 (function() {
    doRequest({
        method: 'GET',
        url: 'https://www.googleapis.com/calendar/v3/calendars/<---YOURID-->/events?key=<--YOURKEY-->',
    }, function printResult(result) {

    result = JSON.parse(result);
    var i;
    var str,end;
    eventsList = {
        events: []
    }
    for(i=0;i < result.items.length;i++) {

        str = result.items[i].start.dateTime;
        end = result.items[i].end.dateTime;

        eventsList.events.push({
            "title": result.items[i].summary,
            "start": str,
            "end": end,
            "description": result.items[i].description
        });
    }
                    var myEvents = eventsList.events;
                      $('#calendar').fullCalendar({

                      header: {
                        left: 'prev,next today controle',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                      },
                      defaultView: 'agendaWeek',
                       timezone: "Europe/Paris",
                      selectable: true,
                      selectHelper: true,
                      minTime:"07:00:00",
                      maxTime:"21:00:00",
                      contentHeight: 685, 
                      lang: 'fr',
                      select: function(start, end) {
                        var title = prompt('Event Title:');
                        var eventData;

                        if (title) {
                          eventData = {
                            title: title,
                            start: start,
                            end: end,
                            description: description
                          };
                          $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                        }
                        $('#calendar').fullCalendar('unselect');
                      },
                      editable: true,
                      eventLimit: true, // allow "more" link when too many events
                      events: myEvents

                    });

                setTimeout("$('.fc-today-button').click();", 50);
    });
})();

Google日历活动未在FullCalendar上显示

1 个答案: