Блог

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

Вот что я сделал со своим сайтом, и это отлично подходит для моих нужд в календаре Google.

Я использовал код для встраивания календаря Google, но я изменил тип календаря, который я встраивал на мобильный, чтобы содержимое помещалось на экране. Пока «amp;mode =» равно «AGENDA» для небольшого контейнера, он должен отображать список повесток дня, но вы можете скопировать его непосредственно из своего календаря Google.

Я использовал опцию встраивания календаря «месяц» для большого контейнера с шириной, установленной на «100%», и высотой «650», вот так:

 <div class="responsive-iframe-container big-container">
<iframe src="https://calendar.google.com/calendar/embed?
showTitle=0amp;showNav=0amp;showPrint=0amp;showTabs=0amp;showCalendars=0amp;showTz=0amp;height
=700amp;wkst=1amp;bgcolor=#db694famp;src=123123123@group.calendar.
google.comamp;color=#fbdbacamp;ctz=America/Los_Angeles" style="border-width:0" 
width="100%" height="650" frameborder="0" scrolling="no"></iframe>
</div>
  

Затем использовал опцию встраивания календаря «Повестка дня» для мобильных устройств с шириной «100%» и высотой «600», вот так:

 <div class="responsive-iframe-container small-container">
<iframe src="https://calendar.google.com/calendar/embed?
showTitle=0amp;showNav=0amp;showPrint=0amp;showTabs=0amp;showCalendars=0amp;showTz=0
amp;mode=AGENDAamp;height=800amp;wkst=1amp;bgcolor=#db694famp;src=123123123
@group.calendar.google.comamp;color=#B1440Eamp;ctz=America/Los_Angeles" 
style="border-width:0" width="100%" height="600" frameborder="0" 
scrolling="no"></iframe>
</div>
  

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

Наконец, вам нужно добавить эти стили на страницу

 <style>
@media (max-width: 550px) {
   .big-container {
       display: none;
   }
}
@media (min-width: 550px) {
   .small-container {
       display: none;
   }
}
/* Responsive iFrame */
.responsive-iframe-container {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 30px;
   height: 0;
   overflow: hidden;
}
.responsive-iframe-container iframe,   
.responsive-iframe-container object,  
.responsive-iframe-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
</style>
  

В наши дни существует ряд сторонних приложений, которые упрощают встраивание мобильных календарей Google.

Вот несколько вариантов:

• Стилизованный календарь
• Tockify

Или, если вы предпочитаете использовать что-то с открытым исходным кодом, FullCalendar — отличное решение. У них есть представление списка календарей, которое особенно хорошо работает на мобильных устройствах. Если вы хотите, чтобы макеты для рабочего стола и мобильных устройств отличались, вы могли бы потенциально использовать наблюдатель за изменением размера в контейнере календаря, чтобы вызвать метод ChangeView FullCalendarв FullCalendar. Вот некоторая документация о том, как использовать плагин Google Calendar от FullCalendar:https://fullcalendar.io/docs/google-calendar

* Полностью раскрываю, я являюсь членом командыстилизованному календарю

Чтобы каждый мог видеть ваш календарь, вам нужно сделать его общедоступным.

И на всякий случай, вот как встроить календарь на свой веб-сайт:

1. В списке календарей слева щелкните стрелку вниз рядом с календарем, который вы хотите встроить, и выберите Настройки календаря. (В качестве альтернативы, щелкните ссылку Настройки в нижней части списка календарей, затем щелкните название календаря.)
2. Скопируйте код iframe, отображаемый в разделе «Внедрить этот календарь».
3. Вставьте этот код на свой веб-сайт, чтобы встроить свой календарь.

Приведенные выше инструкции были взяты из службы поддержки Google Calendar «Внедрить на ваш веб-сайт».