※この方法でgoogle カレンダーをカスタマイズしたら、google さんに怒られました。
詳しくはこちらをご覧下さい。
Google カレンダーをカスタマイズしたくて、こちらのページで「Simple Calendar」と言うプラグインを使ってみたが、今ひとつだった。
ネットを検索していると「gcalendar-wrapper」と言うスクリプトを見つけた。
下のサイトからダウンロードさせていただきました。
Easy Color Customization for Embedded Google Calendars | U-notez
インラインフレーム html を編集
使ってみるととても便利。
通常、Google カレンダーは以下のようなインラインフレームで貼り付ける
■参考 Google カレンダーをウェブサイトに追加する – カレンダー ヘルプ
■編集前
<iframe src="https://calendar.google.com/calendar/embed?src=hogehoge%xxgroup.calendar.google.com&ctz=Asia/Tokyo" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
この中の「https://calendar.google.com/calendar/embed」を「http://foo.com/bar/gcalendar-wrapper.php」に編集する。
※ http://foo.com/bar/ は、gcalendar-wrapper.php までのパス。
■編集後
<iframe src="http://○○○.com/○○/gcalendar-wrapper.php?src=○○○%40group.calendar.google.com&ctz=Asia/Tokyo" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
あとは、「gcalendar-wrapper.php」を編集する。
他の方がとてもわかりやすい解説をしてくれているのを参考にして、中身を編集した。
僕の場合は、Google カレンダーから出力される CSS セレクタ名を調べて、スクリプトに書かれている、ヒアドキュメント内の CSS を全て書き換えた。
編集した CSS 参考までに
デザインセンスのよい方はもっと素敵になることでしょうね！！
参考までに、書き換えた部分のみ掲載しておきますね。
$calCustomStyle =<<<EOT
/* 外枠 */
.view-container-border,.view-cap{
background-color: #A3141A !important;
}
/* 外枠その2 week view */
table.wk-weektop,
th.wk-dummyth {
/* days of the week */
background-color: #A3141A !important;
}
.wk-allday{/* 終日予定部分 */
border-color: #878787 !important;
}
.st-grid {
border-collapse:collapse !important;
}
.st-grid td{
border:1px solid #FDBFBB !important;
}
.st-c-pos div{/* 終日予定文字 */
padding:4px;
color: #fff !important;
background-color: #355B14 !important;
font-size:13px !important;
}
/* 日付け部分 */
.wk-dayname {
font-size:14px !important;
padding:6px !important;
background:#A3141A !important;
color:#fff !important;
}
/* 本日 */
.wk-today {
background-color: #F6F7CF !important;
border: 2px solid #5B0609 !important;
color: #5B0609 !important;
}
/* 左端の時刻表示部分 */
.tg-time-pri{
background-color: #FBDEC2 !important;
border-bottom:1px solid #663300 !important;
color: #333 !important;
font-size:14px !important;
}
.tg-time-pri-last{
border-bottom:none !important;
}
/* 予定表示部分 */
.wk-scrolltimedevents{/* 予定部分の上下ボーダーライン全体 */
border-top:1px solid #878787 !important;
border-bottom:1px solid #878787 !important;
}
.tg-timedevents{/* 予定表示背景色 */
background-color:#fff !important;
}
.tg-dualmarker{/* 30分のライン */
border-top:1px solid #FDBFBB !important;
border-bottom:1px dotted #F8D3CF !important;
}
.tg-col{/* 左枠線 */
border-left:1px solid #FDBFBB !important;
}
.tg-col-today{/* 本日 左枠線 */
border-left:1px solid #D1B30A !important;
}
.tg-today{/* 本日 塗りつぶし */
background-color:#FAFBE3 !important;
}
.tg-nowmarker{/* 本日 時間表示ライン */
border-top:2px solid #266DEF !important;
}
.cbrd{/* 予定表示部分 */
border-color: #355B14 !important;
background-color:#DCF4C8 !important;
font-size:13px !important;
color:#091002 !important;
}
.cbrd dt{/* 予定表示部分 時間の背景色 */
background-color:#BDF58E !important;
}
.chip-caption{/* 予定表示部分 時間の文字 */
font-size:11px !important;
color:#091002 !important;
}
/* ポップアップ表示 */
.bubble-top{
background-color:#DCF4C8 !important;
border-top:solid 1px #355B14 !important;
}
.bubble-mid{/* 左右の線 */
background-color:#DCF4C8 !important;
border-left:solid 1px #355B14 !important;
border-right:solid 1px #355B14 !important;
}
.bubble-bottom{
background-color:#DCF4C8 !important;
border-bottom:solid 1px #355B14 !important;
}
.bubble-sprite{
background-image:url(http://localhost/xampp/antonsan/guitar/wp-content/themes/google-calendar/bubble.png) !important;
}
.title{/* タイトル */
display:block;
width:100% !important;
padding:6px;
background-color:#355B14 !important;
color:#fff !important;
font-size:18px !important;
}
.detail-content span{/* 内容全体 */
color:#333 !important;
font-size:14px !important;
}
.event-details-label{ /* ラベル 日時・場所・説明 */
width:3em !important;
}
.event-when, /* 日時 */
.event-where, /* 場所 */
.event-description { /* 説明 */
margin-left:3em !important;
}
.menu-link{ /* 場所の右にある地図リンク */
}
.separator{ /* 下部にある水平線 */
background-color:#355B14 !important;
}
.details a:link{ /* 下部リンク */
color:#355B14 !important;
}
.details a:hover{ /* 下部リンク HOVER */
color:#355B14 !important;
}
EOT;
コメント