嵌入谷歌日历与自定义日历颜色 - Embeding Google calendar with custom calendar colors

我已经在我的网站中嵌入了一个显示多个日历的谷歌日历，但我想让日历以默认选项以外的颜色显示。

请求URL包含每个日历的颜色参数，但似乎不接受非默认颜色。(渲染的颜色似乎也和这些不一样)

看源码;每个事件的颜色都是由内联CSS定义的，似乎没有类或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;
?>

有什么建议吗?越简单越好

这很棘手，因为你链接到的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值(ala rgb(230, 115, 153))。

我可以建议您使用两个数组，只有一个str_replace:

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

一个更复杂的建议是使用google日历API。

如果你希望避免基于api的方法的复杂性，现在有许多第三方应用程序可以很容易地设计和嵌入谷歌日历。

下面是一个简短的选项列表:

风格日历/gh>
Tockify
ChronoFlo日历/gh>

或者，如果你更愿意使用开源的东西，FullCalendar是一个很好的解决方案。这里有一些关于如何使用他们的谷歌日历插件的文档:https://fullcalendar.io/docs/google-calendar

全面披露，我是Styled Calendar团队的成员