Question

我有一项任务，需要将我的网站的完整日历与Google日历私人数据同步。我能够从谷歌中提取数据，但在尝试将其显示给Jquery完整日历时，它显示错误 TypeError：$（...）。fullCalendar不是函数 ，但是当页面加载完整日历时正确加载。我只是在从谷歌获取数据后刷新日历时才收到此错误。

以下是我使用的代码：

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>Google Calendar API Quickstart</title>
    <meta charset='utf-8' />
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css' />
</head>
<body>
    <button id="authorize-button" style="display: none;">Authorize</button>
    <button id="signout-button" style="display: none;">Sign Out</button>

    <pre id="content"></pre>

    <div id='calendar'></div>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.js'></script>
    <script type="text/javascript">
        var events = [];

        $('#calendar').fullCalendar({
            eventSources: [
            // your event source
            {
                events: events,
                color: 'black',     // an option!
                textColor: 'yellow' // an option!
            }

            // any other event sources...

            ]

        });



        var CLIENT_ID = 'My Id';

        var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];

        var SCOPES = "https://www.googleapis.com/auth/calendar.readonly";

        var authorizeButton = document.getElementById('authorize-button');
        var signoutButton = document.getElementById('signout-button');
        function handleClientLoad() {
            gapi.load('client:auth2', initClient);
        }

        function initClient() {
            gapi.client.init({
                discoveryDocs: DISCOVERY_DOCS,
                clientId: CLIENT_ID,
                scope: SCOPES
            }).then(function () {
                gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

                updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
                authorizeButton.onclick = handleAuthClick;
                signoutButton.onclick = handleSignoutClick;
            });
        }

        function updateSigninStatus(isSignedIn) {
            if (isSignedIn) {
                authorizeButton.style.display = 'none';
                signoutButton.style.display = 'block';
                listUpcomingEvents();
            } else {
                authorizeButton.style.display = 'block';
                signoutButton.style.display = 'none';
            }
        }
        function handleAuthClick(event) {
            gapi.auth2.getAuthInstance().signIn();
        }

        function handleSignoutClick(event) {
            gapi.auth2.getAuthInstance().signOut();
        }

        function appendPre(message) {
            var pre = document.getElementById('content');
            var textContent = document.createTextNode(message + '\n');
            pre.appendChild(textContent);
        }

        function refreshCalander(eventData) {
            $('#calendar').fullCalendar({
                eventSources: [
                // your event source
                {
                    events: eventData,
                    color: 'black',     // an option!
                    textColor: 'yellow' // an option!
                }
                // any other event sources..
                ]

            });
        }

        function listUpcomingEvents() {
            gapi.client.calendar.events.list({
                'calendarId': 'primary',
                'timeMin': (new Date()).toISOString(),
                'showDeleted': false,
                'singleEvents': true,
                'maxResults': 10,
                'orderBy': 'startTime'
            }).then(function (response) {
                var googleEvents = response.result.items;
                if (googleEvents.length > 0) {
                    for (i = 0; i < googleEvents.length; i++) {
                        var event = googleEvents[i];
                        var when = event.start.dateTime;
                        if (!when) {
                            when = event.start.date;
                        }
                        events.push({ "title": event.summary, "start": when });
                    }
                    refreshCalander(events);
                }
            });
        }
    </script>

    <script async defer src="https://apis.google.com/js/api.js"
            onload="this.onload=function(){};handleClientLoad()"
            onreadystatechange="if (this.readyState === 'complete') this.onload()">
    </script>


</body>
</html>

＆＃13;

将数据从Google日历同步到Jquery完整日历时遇到错误

0 个答案: