google calendarのCSS調整

Question

私がしたい事はgoogle calendarをwebサイトに埋め込み、その中の要素にCSSを当てる事です。
そこで考えたのはその中の文字列を置換したいと考えています。

それをしたい理由はスマホでカレンダーを閲覧し、表示された予定をクリックした際に表示される吹き出しが width="400px"という指定があるために画面からはみ出してしまうのを防ぐためです。

下記該当箇所

<div style="display: none; z-index: 1001; width: 400px;" class="bubble">

まず、素人考えで、jqueryのreplaceを使って実現出来ないかと思っています。が上手く行きません。
私が試したコードは下記の通りです。

$(function(){
setTimeout(function(){
$('#calendarContainer1').each(function(){
var txt = $(this).html();
$(this).html(txt.replace(/width: 400px;/g,'width: 80%;'));
});
},1000);
});

settimeoutでカレンダーが読み込まれたであろう時間の後に発火というイメージです。
(ベストはカレンダーの読込みをトリガーとしてreplaceが出来れば、、とも思っていますが私には難し過ぎて断念。)

カレンダー以外の部分では置換が動作しているのでコード自体は問題無いのかな、、、とは思っているのですが、カレンダー内の部分では置換が行われていません。
そもそもiframeの中は置換が出来ないのしょうか、、

加えて、上記とは別で、iframeの中にcssを効かせる方法も調べて試しました

$("iframe").on("load",function(){
 $("iframe").contents().find('.bubble').css("width","80%");
});

失敗です。原因は恐らくクロスドメインなのでダメ。

jqueryの知識ほとんど無く、検討外れな質問かもしれませんがどうぞ、お力添えお願い致します。

Answer 1

そもそもiframeの中は置換が出来ないのしょうか

ご自身で書かれているとおりサーバ側からの許可がない場合不可能です。
Googleカレンダーから情報を取得できるAPIがあるので、それを利用する方法でカレンダーを自作してしまえばスタイルの問題は解決できると思います。

【Get Started with the Calendar API  |  Google Calendar API  |  Google Developers】
https://developers.google.com/google-apps/calendar/overview?hl=ja

たとえば下記は「吹き出し」の実装は自前でする必要がありますが、Googleカレンダーとの連携が出来る（噴出しの中身は自分で取る必要があるかも）ライブラリです。

【FullCalendar - JavaScript Event Calendar】
https://fullcalendar.io/

【Google Calendar - Documentation | FullCalendar】
https://fullcalendar.io/docs/google_calendar/

【fullCalendar.jsを使ったときのメモ(タイトルにHTMLタグを使う、ツールチップの表示) | niwaringo() {Tumblr}】
http://niwaringo.tumblr.com/post/20402748043/fullcalendarjsを使ったときのメモタイトルにhtmlタグを使うツールチップの表示

Comments

[satoty0307]

ありがとうございます。
APIを試してみたいと思います。

Answer 2

フロントエンドはからっきしダメなんですが、
google calendar embed style
でぐぐったら
Responsive Google Calendar Embed
というのを見つけました。
これでいろいろと試せそうな気がしますが、いかがでしょうか。

Comments

[satoty0307]

回答ありがとうございます。

hottaさんに回答頂いた内容ですと、カレンダー全体の幅の調整でして、私が意図している物とは少し違う内容でございました。