Блог

Главная - Вопросы по программированию - Полная синхронизация календаря с Календарем Google — Разрешения

Полная синхронизация календаря с Календарем Google — Разрешения

#jquery #fullcalendar #google-calendar-api

#jquery #полный календарь #google-calendar-api

Вопрос:

Я искал везде.

Я пытаюсь интегрировать полный календарь с календарем Google, используя эту веб-страницу. На первом шаге он попросит вас получить ключ API Google. Я получил свой ключ API и, выполнив все шаги, ничего не получил. После того, как я вернулся к своей консоли API, он отобразил:

введите описание изображения здесь

Итак, я перешел к созданию учетных данных. На странице создания отобразилось следующее:введите описание изображения здесь

Я использовал опцию пользовательских данных, и она не сработала. Что мне делать?

Вот мой код:

 <!DOCTYPE html>
<html>
<link rel='stylesheet' href='fullcalendar/fullcalendar.css'/>
<script src='fullcalendar/lib/jquery-ui.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='/fullcalendar/fullcalendar.js'></script>
<script type='fullcalendar/gcal.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
    $('#calendar').fullCalendar({
        googleCalendarApiKey: '<API-KEY>',
        events: {
            googleCalendarId: '<CALENDAR-ID>'
        }
    });
});

</script>
</html>

Я убедился, что мой календарь общедоступен, а флажок «Делиться только информацией о моем свободном / занятом» снят. LMK, если вам нужна какая-либо другая дополнительная информация.

[ОБНОВЛЕНИЕ] Я нажал на «Если вы хотите, вы можете пропустить этот шаг и создать» ключ API на странице учетных данных, но это не сработало.

Ответ №1:

Я забыл добавить <div id='calendar'></div > в тело моего html-файла. Я чувствую себя невероятно глупо.

Для тех, кто ищет пример кода, вот он:

 <html>
    <head>
        <link rel='stylesheet' href='fullcalendar/fullcalendar.css'/>
        <script src='fullcalendar/lib/jquery.min.js'"></script>
        <script src='fullcalendar/lib/moment.min.js'></script>
        <script src='fullcalendar/fullcalendar.js'></script>
        <script type='text/javascript' src='fullcalendar/gcal.js'></script>
        <script type='text/javascript'>

            $(document).ready(function() {
                $('#calendar').fullCalendar({
                    googleCalendarApiKey: '<API-KEY>',
                    events: {
                        googleCalendarId: '<CALENDAR-ID>'
                    }
                });
            });

        </script>
    </head>

    <body>
        <div id='calendar'></div>
    </body>
</html>

Выполните все другие шаги, упомянутые в вопросе, и все будет готово!

Также не забудьте правильно связать пути к файлам, как сказал @Lahiru.

Извините за путаницу,

Ujjwal

Ответ №2:

исправьте путь .js <script src='/fullcalendar/fullcalendar.js'></script>

удалите КОСУЮ ЧЕРТУ (/)

это должно быть похоже <script src='fullcalendar/fullcalendar.js'></script>

Комментарии:

1. Привет @Lahiru, я обновил свой код правильными путями к файлам после публикации этого вопроса. Нет ошибок, связанных с неправильными путями к файлам. Все функции, похоже, тоже работают. Тем не менее, я получаю пустую страницу и консоль каждый раз!

Метки: