Фоны для календаря гугл


Фоны для календаря гугл

Фоны для календаря гугл

Фоны для календаря гугл



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 и интегрировать его в дизайн вашего сайта.
Источник: http://coolwebmasters.com/tutorials/2597-integrating-google-calendar-with-your-website.html


Фоны для календаря гугл фото


Фоны для календаря гугл

Фоны для календаря гугл

Фоны для календаря гугл

Фоны для календаря гугл

Фоны для календаря гугл

Фоны для календаря гугл

Фоны для календаря гугл

Читать: