6

ウェブサイトに複数のカレンダーを表示する Google カレンダーを埋め込んでいますが、デフォルト オプション以外の色でカレンダーを表示したいと考えています。

リクエスト URL には各カレンダーの色パラメータが含まれていますが、デフォルト以外の色は受け入れないようです。（レンダリングされた色もこれらと同じではないようです）

ソースを見てください。各イベントの色はインライン CSS によって定義されており、CSS ファイルを介してスタイルを設定するために使用できるクラスまたは ID 属性を持っていないようです。

PHP を使用してカレンダーの html を取得し、文字列置換を使用して色を変更しようとしましたが (この回答に基づいて)、色が変更されないことを除いて機能します。

<?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;

?>

何か提案はありますか？もっとシンプルなほうがいい

4

2 に答える 2

2

リンク先の Google カレンダーはその要素を JavaScript で動的にロードするため、投稿する潜在的なソリューションによって変更されるものは何もないため、これは注意が必要です。

カレンダーの HTML のみのバージョンには、探しているさまざまな色がないため、これも機能しません。

ユーザーがサイズを変更したり、月間を移動したりすると、javascript がカレンダーの本体を再構築するため、さらに複雑になります。そのため、ページの読み込みに合わせて適切なカラーリングを行ったとしても、思い通りにならない場合があります。

解決策の 1 つは、引き続きカレンダーをローカル ページにインポートしてサイト間の制限を回避することです。次に、ページの読み込みを適切に処理し、変更を継続的にチェックして、その状態を維持するために戦います。より効率的な方法があるかどうかはわかりません：

ローカルカレンダーページ: 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(230, 115, 153)は返される前に RGB 値 (ala) に変換されることに注意してください。

于 2013-01-12T11:22:35.393 に答える
0

str_replace を 1 つだけ使用して 2 つの配列を使用することをお勧めします。

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

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

はるかに複雑なアドバイスは、Google カレンダー APIを使用することです。

于 2013-01-11T16:00:48.243 に答える