—»     —»   Интегрируем Google-календарь в собственный веб-сайт
  Раздел: Руководства   Комментариев: 5  

Интегрируем Google-календарь в собственный веб-сайт

Google Calendar – это отличный инструмент, который можно встроить в собственный веб-сайт, и его чрезвычайно просто использовать посредством iframe.

Перед тем как удариться в оформление календаря, давайте сначала быстренько научимся интегрировать его в любую область вашего сайта.

Вы можете встроить интерактивный календарь, чтобы каждый мог редактировать его, либо запретить свободное редактирование, и самостоятельно вносить изменения, тем самым оповещая посетителей.

Весь процесс установки происходит под эгидой простоты в использовании, которой добилась компания Google. Тем не менее, если вам захочется использовать CSS для дальнейшего внешнего оформления календаря, вам придется потратить немного времени, чтобы добиться желаемого результата.

Для начала, вам нужно выбрать календарь, который вы хотите встроить в веб-сайт. Это можно сделать во вкладке Calendars на странице ваших настроек.

Интегрируем Google-календарь в собственный веб-сайт

iFrame-код будет доступен на следующей странице (как показано на изображении ниже), но при этом вы можете самостоятельно оформить календарь в пределах сервиса Google.

Интегрируем Google-календарь в собственный веб-сайт

В предложенном вам интерфейсе вы сможете выставить основные настройки, такие как: заголовок, цвета и необходимые к отображению элементы. Выше приведенный iFrame-код будет обновляться по мере того, как вы будете вносить изменения в настройки. Как только вы будете довольны выставленными настройками, вы можете скопировать предоставленный код куда-угодно в код вашей страницы, так как предложен он в простеньком HTML.

Интегрируем Google-календарь в собственный веб-сайт

Предложенные Google настройки являются самыми основными, и для того чтобы календарь вписался в дизайн вашего веб-сайта, вам понадобятся некоторые навыки в разработке. К сожалению, у нас не получится внести дополнительные CSS-правила в родительский документ, даже если добавлять их с пометкой !important. К этому есть двоякая причина:

1. Размещаемый документ и документ, представленный в iframe – это не одно и то же. Это кажется довольно очевидным, чтобы об этом говорить, но все же.

2. Документ в iframe размещен на отдельном домене (Google.com), что, конечно же, означает, что большинство браузеров будут блокировать попытку изменить содержимое данного документа, совершаемые с других доменов.

Глядя на вышеприведенный iframe-код, можно увидеть отрывок кода, схожий со следующим:

https://www.google.com/calendar/embed?src=u3o22apdee61g5k1qised1d56k%40group.calendar.google.com&ctz=Europe/London

Именно здесь ваш iframe указывает на расположение основного документа вашего календаря. Используя ваш браузер или любое другое предпочитаемое приложение, пройдите по представленному URL-адресу и посмотрите на исходный код. Создайте новую страницу на сайте с кодом, полученным по URL до исходника – там будет всего 2 строки кода, которые нужно будет обновить:

<link type="text/css" rel="stylesheet" href="969ff39784188d8d017a0c60c8f2558aembedcompiled_fastui.css">

<script type="text/javascript" src="969ff39784188d8d017a0c60c8f2558aembedcompiled__en_gb.js"></script>

Как видно, оба тэга содержат относительные URL-адреса, которые нужно подкрепить префиксом «https://www.google.com/calendar/», чтобы они выглядели следующим образом:

https://www.google.com/calendar/969ff39784188d8d017a0c60c8f2558aembedcompiled_fastui.css

https://www.google.com/calendar/969ff39784188d8d017a0c60c8f2558aembedcompiled__en_gb.js

Это перенаправит ваш iframe на новую страницу на вашем домене вместо домена Google, что означает, что данный документ размещен вами. Следующий этап заключается в добавлении пользовательских CSS-объявлений в новый документ, которые заменят элементы в календаре от Google.

Вам нужно будет создать 2 новых PHP-файла, первый из которых, custom_calendar.php, представляет собой сам файл календаря, и второй, custom_calendar.css – CSS-файл для оформления этого самого календаря. Первый файл является основным, он отвечает за функционирование, а второй позволяет вам изменять любые CSS-параметры. Немного поколдовав с CSS, у вас появится возможность оформить календарь таким образом, чтобы он полноценно вписывался в дизайн!

* Пользовательский код календаря

CSS-код

Теперь у вас есть полностью настроенный под вас календарь, и пришло время изменить CSS-код так, чтобы он полностью подходил к остальному дизайну.

Ниже мы приводим необходимые вам классы.

Для начала, чтобы календарь не выделялся цветом, нам нужно будет переписать все цвета границ и фона нашего календаря. Для того чтобы реализовать это, добавьте в CSS-код .view-cap, .view-container-border и измените цвет фона на нужный вам.

.mv-dayname

Это класс, который управляет названиями дней, отмеченными в самом верху календаря. Просто добавьте .mv-dayname в ваш файл custom_calendar.css и добавьте некоторые переменные для того, чтобы начать.

Здесь есть также .mv-daynames-table, который управляет ячейками, в которых располагается название каждого дня. Не забудьте изменить цвет границ и фона.

.st-bg

Это класс, который управляет фоном каждой ячейки. У нас есть также .st-bg-today и .st-bg-next, которые управляют отображением текущей даты и завтрашнего дня, что позволяет вам делать между ними различие.

.st-dtitle

Данный класс управляет датами в календаре. Также, что очень удобно, Google добавила классы .st-dtitle-today и .st-dtitle-next, которые контролируют отображением текущего и следующего дней. Эти классы очень удобны для выделения сегодняшнего дня и завтрашнего.

В классе .st-dtitle есть класс .st-dtitle-nonmonth, который отвечает за управление отображением текста для дат нового месяца, которые пока что не присутствуют в текущем месяце.

При редактировании .st-bg и использовании .st-dtitle также важно учитывать класс .st-dtitle-down, примененный к ячейкам, которые расположены ниже сегодняшней даты. По умолчанию у этого элемента есть верхняя граница, которая идентичная границе вокруг сегодняшней даты.

Следующие примеры были созданы путем изменения параметров .st-bg, .st-bg-today, .st-dtitle и .st-dtitle-today.

Интегрируем Google-календарь в собственный веб-сайт

Представляем вам код CSS:

.st-bg { background:black; }
.st-bg-today { background:yellow; border-left:1px solid yellow; border-right:1px solid yellow; }
.st-dtitle { background:white; }

Можно следующий результат, если .view-cap, .view-container-border выставить на черный цвет, а .mv-dayname-table на белый:

Интегрируем Google-календарь в собственный веб-сайт

Представляем вам код CSS:

.view-cap, .view-container-border { background-color:black; }
.mv-daynames-table { color:white; background:black; }
.mv-event-container { border-top:1px solid black; }

Границы ячеек могут быть устранены посредством изменения параметров border-left, border-right и border-top внутри CSS-кода каждого из классов. Давайте посмотрим на пример:

Интегрируем Google-календарь в собственный веб-сайт

Представляем вам код CSS:

.st-bg { border-left:none; }
.st-dtitle { border:none; background:white; }

Используя данные CSS-классы, вы сможете оформить ваш календарь от Google и интегрировать его в дизайн вашего сайта.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: календарь
Опубликовал Design FactoRy   Прочитано (раз): 41537   |   Оставлено комментариев: 5
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 9 января 2014 @ 13:42
Написал: xand79 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Хорошо бы, но:
Fatal error: Call to undefined method DOMDocument::getElementByTagName() ....... on line 9
Комментарий #2: 4 февраля 2014 @ 11:01
Написал: Сергей — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
да...
Fatal error: Call to undefined method DOMDocument::getElementByTagName() ....... on line 9

как победить? оччень нужно....
Комментарий #3: 22 июля 2014 @ 13:24
Написал: john — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
допущено пару ошибок, например:
Fatal error: Call to undefined method DOMDocument::getElementByTagName() ....... on line 9
пробуйте:
getElementsByTagName()
так же заметил ошибку с атрибутами, нужно так:
$css_href = $css->getAttribute('href')
Комментарий #4: 30 сентября 2014 @ 23:48
Написал: Вадим — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Одну важную вещь вы не учли. Почти все ссылки при этом перестают работать, так как базовый URL теперь "ВАШ_ДОМЕН" а не www.google.com/calendar/
и даже <base href="https://www.google.com/calendar/" /> не поможет, так как javascript плевал на этот тег.
Комментарий #5: 31 октября 2015 @ 11:57
Написал: Aleksandr — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Многие спрашивают, как добавить сайт в Гугл, что для этого нужно сделать, что нужно знать и уметь. Ведь на самом деле добавить свой сайт в поисковую систему Гугл достаточно просто, но все равно у многие возникают проблемы и вопросы в данной области создания и развития сайта. Когда ваш сайт попадет в Гугл, его начнут индексировать и сайт начнет приносить новых посетителей и доходы …
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Октябрь 2019    »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031