Javascriptを使って、Googleカレンダーで次の月を表示させる
おはようございます。こんにちわ。こんばんわ。まっすです。
Googleカレンダーを埋め込む祭、期間を変更する必要があったので、備忘録として、その時行ったことをまとめました。
スポンサードサーチ
目次
表示までの流れ
全体の流れはこんな感じです。
①表示させたい箇所にタグを入れる
②カレンダーを埋め込みコードを取得
③Javascriptを使って埋め込む
では、細かくみていきましょう
①表示させたい箇所にタグを入れる
Googleカレンダーを表示させる箇所に下記のタグを挿入します。
<div id="calendar2"></div>このタグにJavascriptを使ってHTMLタグを挿入します。
スポンサードサーチ
②カレンダーを埋め込みコードを取得
Googleカレンダーから、挿入用タグを取得します。
方法は下記をに詳しく書いてあります。参考にさせていただきました。
https://support.google.com/calendar/answer/41207?hl=ja
Google カレンダーをウェブサイトに追加する
– カレンダー ヘルプ
https://applica.info/google-calendar-embedded
GoogleカレンダーをWebページに埋め込む方法！デザインカスタマイズやレスポンシブ対応させるには？ |
アプリやWebの疑問に答えるメディア
③Javascriptを使って埋め込む
1ケ月分だけ表示させるのであれば、②で取得したコードをHTMLファイルに埋め込むだけですが、次の月を表示させたい場合、Javascriptを使用します。
ざっくりとやること言うと、
埋め込みコードを分割して、日付を挟んで、再結合する
になります。ではコードをみていきましょう。
function googleCalendarSet(){
//カレンダーの埋め込みコードを分割する
let calendar1 = '<iframe src="https://calendar.google.com/calendar/embed?showTitle=0&showNav=0&showDate=1&showPrint=0&showTabs=0&showCalendars=0&showTz=0&height=500&wkst=1&bgcolor=%23FFFFFF&src=ja.japanese%23holiday%40group.v.calendar.google.com&color=%238D6F47&ctz=Asia%2FTokyo';
let calendar2 = '" style="border-width:0" width="600" height="500" frameborder="0" scrolling="no"></iframe>';
/*来月のカレンダー*/
let date = new Date;
let Year = date.getFullYear();//年を取得
let Month = date.getMonth()+1;//月を取得.0からでなく、１からカウントを始める
let nextMonth = Month+1;
//12月を超えると1月に
if(nextMonth>12){
nextMonth-=12;
Year+=1;
};
//10以下を二ケタに
if(nextMonth<10){
nextMonth = "0"+nextMonth;
};
//日付を出力
let dates = "&dates="+String(Year)+String(nextMonth)+"01%2F"+String(Year)+String(nextMonth)+ "01";
//idで指定したタグを書き換え
document.getElementById("calendar2").innerHTML = calendar1+dates+calendar2;
}
window.onload = googleCalendarSet;
関数 googleCalendarSetを定義して、一番下のwindow.onloadでページの読み込み時に実行します。
googleCalendarSetの中身は、
(1)コードを分割
(2)日付をnew Dateでインスタンスを生成、現在の年、今月と次の月を定義
(3)12月を超えたら1月に戻って、現在の年に+1する
(4)日付を定義
(5)idで指定したタグに、分割した埋め込みコードで日付を挟み込む
この５つの動作をしています。
また、現在の月をそのまま表示させたい場合は、分割したコードを繋げればOKです。
<div id="calendar2"></div>document.getElementById("calendar1").innerHTML = calendar1+calendar2;実際に表示するとこのような感じです。
スポンサードサーチ
おわりに
簡単ではありますが、自分で見返す用にGoogleカレンダーを埋め込む方法をまとめました。
また、下記の記事を参考にさせていただきました。
