Інтегруємо google-календар в власний веб-сайт

Google Calendar - це відмінний інструмент, який можна вбудувати в власний веб-сайт, і його надзвичайно просто використовувати за допомогою iframe.

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

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

Весь процес установки відбувається під егідою простоти у використанні, якої домоглася компанія Google. Проте, якщо вам захочеться використовувати CSS для подальшого зовнішнього оформлення календаря, вам доведеться витратити трохи часу, щоб домогтися бажаного результату.

Для початку, вам потрібно вибрати календар, який ви плануєте включити в веб-сайт. Це можна зробити у вкладці Calendars на сторінці ваших налаштувань.

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

У запропонованому вам інтерфейсі ви зможете виставити основні настройки, такі як: заголовок, кольору і необхідні до відображення елементи. Вище наведений iFrame-код буде оновлюватися в міру того, як ви будете вносити зміни в налаштування. Як тільки ви будете задоволені виставленими настройками, ви можете скопіювати наданий код будь-куди в код вашої сторінки, так як запропонований він в простенькому HTML.

Запропоновані Google настройки є самими основними, і для того щоб календар вписався в дизайн вашого веб-сайту, вам знадобляться деякі навички в розробці. На жаль, у нас не вийде внести додаткові CSS-правила в батьківський документ, навіть якщо додавати їх з позначкою! Important. До цього є двояка причина:

1. Розміщуваний документ і документ, представлений в iframe - це не одне і те ж. Це здається досить очевидним, щоб про це говорити, але все ж.

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

Дивлячись на вищенаведений iframe-код, можна побачити уривок коду, схожий з наступним:

Вам потрібно буде створити 2 нових PHP-файлу, перший з яких, custom_calendar.php, являє собою сам файл календаря, і другий, custom_calendar.css - CSS-файл для оформлення цього самого календаря. Перший файл є основним, він відповідає за функціонування, а другий дозволяє вам змінювати будь-які CSS-параметри. Трохи поколдовав з CSS, у вас з'явиться можливість оформити календар таким чином, щоб він повноцінно вписувався в дизайн!

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

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

Нижче ми наводимо необхідні вам класи.

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

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

Тут є також .mv-daynames-table, який керує осередками, в яких розташовується назва кожного дня. Не забудьте змінити колір меж і фону.

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

Даний клас управляє датами в календарі. Також, що дуже зручно, 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.

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

Можна наступний результат, якщо .view-cap. view-container-border виставити на чорний колір, а .mv-dayname-table на білий:

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

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

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

Використовуючи дані CSS-класи, ви зможете оформити ваш календар від Google і інтегрувати його в дизайн вашого сайту.