JSだけでGoogleCalendarの中の要素を書き換えたりCSSを変更したりする

Question

表題の通りです。

Google Calendar を読み込むファイルを設置するサーバーではPHPなどのサーバーサイドスクリプトが使用できません。

Google Calendar を読み込んでそのままiframeの中身を変更しようとするとクロスドメイン制約に引っかかってしまいました。

さて、どうすれば中身を書き換えたり、CSSを適用することができるでしょうか。

Answer 1

ご自身で作られたコンテンツ以外の場合、iframe の中を書き換えることはあまり選択肢に入れないほうが良いと思います。

下記のライブラリ「fullcalendar.js」はGoogleカレンダーと似た表示が出来ますし、データソースにGoogleカレンダーを指定することもできます。

【fullcalendar.js + gcal.jsでGoogle API v3を使ってGoogleカレンダーを表示する】
http://hamatte-wataru.com/fullcalendar_api_v3/

【FullCalendar - JavaScript Event Calendar (jQuery plugin)】
http://fullcalendar.io/

Comments

[Shinroh]

ありがとうございます。試してみますm(__)m

Answer 2

Google CalendarにはJavaScript APIもありますので、クライアントサイドで操作する必要があるならそっちを使うのがいいのではないかと思います。

Comments

[Shinroh]

ありがとうございます。試してみますm(__)m