Встраивание календаря Google с помощью пользовательских цветов календаря

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

URL запроса содержит параметр цвета для каждого календаря, но, по-видимому, не принимает цвета по умолчанию. (Представленные цвета также не похожи на эти)

Глядя на источник; цвета для каждого события определяются встроенным CSS и, по-видимому, не имеют атрибутов class или ID, которые можно использовать для их стилизации с помощью файла CSS.

Я попытался использовать PHP, чтобы получить HTML-код календаря, а затем с помощью строки заменить, чтобы изменить цвета (на основе этого ответа), который работает, за исключением того, что не меняет цвета Файл PHP, который я использую:

<?php

$content = file_get_contents('https://www.google.com/calendar/embed?showTitle=0&showPrint=0&showTabs=0&showTz=0&height=750&wkst=2&bgcolor=%23FFFFFF&src=1.keswickscouts.org_5d750s21fh55t45nsh4i49co5g%40group.calendar.google.com&color=%23691426&src=1.keswickscouts.org_k8ai784s6meu1eh71fk21etseg%40group.calendar.google.com&color=%23182C57&src=1.keswickscouts.org_4omjhqh48ud1lkigino18dmid0%40group.calendar.google.com&color=%232F6309&src=06illa48gj7en6896jv32cm93c%40group.calendar.google.com&color=%23125A12&src=1.keswickscouts.org_m6mb8idejtptmfkve9gm6latd8%40group.calendar.google.com&color=%236B3304&src=1.keswickscouts.org_5uaafulf65hrc4b64j3bfa6660%40group.calendar.google.com&color=%235229A3&src=1.keswickscouts.org_qudhcb0ii68u6b5mgs2ase200o%40group.calendar.google.com&color=%23B1365F&ctz=Europe%2FLondon');

$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />',$content);

$content = str_replace('B5515D','CC9966', $content); //ASU
$content = str_replace('536CA6','099FF', $content); //Beavers
$content = str_replace('7EC225','33CC00', $content); //Cubs
$content = str_replace('125A12','006990', $content); //Eden
$content = str_replace('194D14','999966', $content); //Explorers
$content = str_replace('8C66D9','4D2177', $content); //Group
$content = str_replace('E67399','006666', $content); //Scouts

echo $content;

?>

Любые предложения? Проще было бы лучше

Источник

3 ответа

Это сложно, поскольку календарь Google, на который вы ссылаетесь, динамически загружает свои элементы с помощью javascript, поэтому потенциальное решение, которое вы публикуете, ничего не изменит.

HTML-версия календаря не имеет нужного вам разнообразия цветов, поэтому она тоже не будет работать.

Дополнительные сложности возникают из-за того, что JavaScript перестраивает тело календаря, когда пользователь изменяет размеры или перемещается между месяцами. Таким образом, даже если вы получите цвет, подходящий для загрузки страницы, он может остаться не таким, как вы хотите.

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

ЛОКАЛЬНАЯ СТРАНИЦА КАЛЕНДАРЯ: cal.php

<?php
  $content=file_get_contents("https://www.google.com/calendar/embed?showTitle=0&showPrint=0&showTabs=0&showTz=0&height=750&wkst=2&bgcolor=%23FFFFFF&src=1.keswickscouts.org_5d750s21fh55t45nsh4i49co5g%40group.calendar.google.com&color=%23691426&src=1.keswickscouts.org_k8ai784s6meu1eh71fk21etseg%40group.calendar.google.com&color=%23182C57&src=1.keswickscouts.org_4omjhqh48ud1lkigino18dmid0%40group.calendar.google.com&color=%232F6309&src=06illa48gj7en6896jv32cm93c%40group.calendar.google.com&color=%23125A12&src=1.keswickscouts.org_m6mb8idejtptmfkve9gm6latd8%40group.calendar.google.com&color=%236B3304&src=1.keswickscouts.org_5uaafulf65hrc4b64j3bfa6660%40group.calendar.google.com&color=%235229A3&src=1.keswickscouts.org_qudhcb0ii68u6b5mgs2ase200o%40group.calendar.google.com&color=%23B1365F&ctz=Europe%2FLondon");
  $content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />',$content);
  print $content;
?>

Страница отображения календаря

<html>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script language='javascript'>
    var oldhtml;

    function swapcolors(oldcolor, newcolor){
      console.log("Searching for " + oldcolor);
      $('iframe#gcal').contents().find('.rb-n').filter(
        function() {
          console.log(this);
          console.log($(this).css('background-color'));
          console.log($(this).css('background-color')==oldcolor);
          return $(this).css('background-color')==oldcolor;
        }
      ).css({'background-color': newcolor});
    }

    function recolor(){
      swapcolors('rgb(83, 108, 166)', '#099FF'); //Beavers
      swapcolors('rgb(126, 194, 37)', '#000000'); //Cubs 33CC00
      swapcolors('rgb(181, 81, 93)', '#CC9966'); //ASU
      swapcolors('rgb(18, 90, 18)', '#006990'); //Eden
      swapcolors('rgb(25, 77, 20)', '#999966'); //Explorers
      swapcolors('rgb(140, 102, 217)', '#4D2177'); //Group
      swapcolors('rgb(230, 115, 153)', '#006666'); //Scouts
    }

    function keepcolored(){
      if( $('iframe#gcal').contents()!=oldhtml){
        recolor();
        oldhtml=$('iframe#gcal').contents();
      }
    }

    $(document).ready(
      function() {
        $('iframe#gcal').load(recolor);
        oldhtml=$('iframe#gcal').contents();
        window.setInterval(keepcolored, 700);
      }
    );
  </script>
</head>
<body>

  <iframe id="gcal" style="width:100%;height:100%" src="cal.php">
  </iframe>
</body>
</html>

Обратите внимание, что find('.rb-n') возможно, потребуется скорректировать, и что цвета фона преобразуются в значения RGB (аля rgb(230, 115, 153)), прежде чем они будут возвращены.

Источник

Я могу предложить вам использовать два массива только в одном str_replace:

$search = array('B5515D', '536CA6', '7EC225');
$replace = array('CC9966', '099FF', '33CC00');

$content = str_replace($search, $replace, $content);

Гораздо более сложный совет - использовать API календаря Google.

Источник

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

Вот краткий список вариантов:

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

Источник
Другие вопросы по тегам