Bật lịch Google bằng các màu lịch tùy chỉnh

Question

Tôi đã nhúng lịch Google hiển thị nhiều lịch trong trang web của mình, nhưng tôi muốn hiển thị lịch theo màu ngoài các tùy chọn mặc định.

URL yêu cầu chứa tham số màu cho mỗi lịch, nhưng dường như không chấp nhận màu mặc định. (Các màu được hiển thị cũng không giống như các màu này)

Nhìn vào nguồn; màu sắc cho mỗi sự kiện được xác định bởi CSS nội tuyến và dường như không có thuộc tính lớp hoặc ID có thể được sử dụng để tạo kiểu cho chúng thông qua tệp CSS.

Tôi đã thử sử dụng PHP để lấy html của lịch và sau đó sử dụng chuỗi thay thế để thay đổi màu sắc (dựa trên this answer) hoạt động, ngoại trừ nó không thay đổi màu sắc Tệp PHP tôi đang sử dụng :

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

?> 

Bất kỳ sugestions? Đơn giản hơn sẽ tốt hơn

Answer 1

tôi có thể đề nghị bạn sử dụng hai mảng một chỉ có một str_replace:

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

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

Một phức tạp hơn nhiều lời khuyên là nên sử dụng các google calendar API.

Answer 2

Điều này là khó khăn vì lịch Google bạn liên kết để tải các phần tử động với javascript nên không có gì thay đổi theo giải pháp tiềm năng bạn đăng.

Phiên bản chỉ dành cho HTML của lịch không có nhiều màu sắc mà bạn đang tìm kiếm, do đó cũng không hoạt động.

Các biến chứng khác phát sinh do javascript xây dựng lại cơ thể của lịch khi người dùng thay đổi kích thước hoặc di chuyển giữa các tháng. Vì vậy, ngay cả khi bạn nhận được quyền tô màu cho tải trang, nó có thể không theo cách bạn muốn.

Một giải pháp là tiếp tục nhập lịch vào trang địa phương để tránh hạn chế trang web, sau đó tải nội dung ngay trên trang tải và chiến đấu để giữ chúng theo cách đó bằng cách liên tục kiểm tra thay đổi. Tôi không chắc chắn nếu có một cách hiệu quả hơn:

ĐỊA PHƯƠNG TRANG LỊCH: 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; 
?> 

Lịch Hiển thị Trang

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

Lưu ý rằng có thể cần find('.rb-n') được điều chỉnh và màu nền được chuyển đổi thành giá trị RGB (ala rgb(230, 115, 153)) trước khi chúng được trả lại.