ども、こんにちは。開発部のいろはです(^^)
Googleカレンダーはiframeで好きなページに埋め込むことができ、非常に簡単で便利なものです。
TECH扇町のカレンダーにもこの埋め込み式のカレンダーを採用しております。
そのまま埋め込んでも便利なのですが、実はカレンダーの表示内容をお好みに変更することができます。
今回は埋め込み式のGoogleカレンダーでパラメータ変更できる9つの項目についてご紹介いたします！
Contents
目次
- 1.タイトルの文字を非表示にする
- 2.週・月・予定リストの表示切替タブを非表示にする
- 3.印刷ボタンを非表示にする
- 4.現在表示されているカレンダーの期間表示を非表示にする
- 5.前月/前週/今日/翌週/翌月への移動ボタンを非表示にする
- 6.カレンダー表示切替ナビを非表示にする
- 7.カレンダーの表示言語を変更する
- 8.日本の祝日を表示する
- 9.最初に表示するカレンダーを変更する
- 10.〆
■外部リンク
・Googleカレンダー埋め込み支援ツール
あわせて読みたい
埋込み式のGoogleカレンダーの色を自由自在にカスタマイズする方法ども、こんにちは。開発部のいろはです！
Googleカレンダーはiframeでサイトへ簡単に埋め込むことができますが、
通常のカラー...
1.タイトルの文字を非表示にする
| 値 | 実行結果 |
| showTitle=0 | 非表示 |
| showTitle=1 | 表示(デフォルト) |
表示(デフォルト)
|
1 |
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&showTitle=1" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe> |
非表示
|
1 |
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&showTitle=0" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe> |
2.週・月・予定リストの表示切替タブを非表示にする
| 値 | 実行結果 |
| showTabs=0 | 非表示 |
| showTabs=1 | 表示(デフォルト) |
表示(デフォルト)
|
1 |
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&showTabs=1" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe> |
非表示
|
1 |
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&showTabs=0" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe> |
3.印刷ボタンを非表示にする
| 値 | 実行結果 |
| showPrint=0 | 非表示 |
| showPrint=1 | 表示(デフォルト) |
表示(デフォルト)
|
1 |
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&showPrint=1" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe> |
非表示
|
1 |
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&showPrint=0" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe> |
4.現在表示されているカレンダーの期間表示を非表示にする
| 値 | 実行結果 |
| showDate=0 | 非表示 |
| showDate=1 | 表示(デフォルト) |
表示(デフォルト)
|
1 |
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&showDate=1" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe> |
非表示
|
1 |
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&showDate=0" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe> |
5.前月/前週/今日/翌週/翌月への移動ボタンを非表示にする
| 値 | 実行結果 |
| showNav=0 | 非表示 |
| showNav=1 | 表示(デフォルト) |
表示(デフォルト)
|
1 |
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&showNav=1" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe> |
非表示
|
1 |
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&showNav=0" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe> |
6.カレンダー表示切替ナビを非表示にする
| 値 | 実行結果 |
| showCalendars=0 | 非表示 |
| showCalendars=1 | 表示(デフォルト) |
表示(デフォルト)
|
1 |
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&showCalendars=1" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe> |
非表示
|
1 |
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&showCalendars=0" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe> |
7.カレンダーの表示言語を変更する
| 値 | 実行結果 |
| hl=ja | 日本語（デフォルト） |
| hl=en | 英語（US） |
日本語（デフォルト）
|
1 |
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&hl=ja" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe> |
英語（US）
|
1 |
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&hl=en" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe> |
8.日本の祝日を表示する
| 値 | 実行結果 |
| src=ja.japanese%23holiday%40group.v.calendar.google.com | 祝日を表示 |
祝日を表示
|
1 |
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&src=ja.japanese%23holiday%40group.v.calendar.google.com" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe> |
9.最初に表示するカレンダーを変更する
| 値 | 実行結果 |
| （指定なし） | 月 |
| mode=WEEK | 週 |
| mode=AGENDA | 予定リスト |
週
|
1 |
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&mode=WEEK" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe> |
予定リスト
|
1 |
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&mode=AGENDA" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe> |
〆
以上、9種類のパラメータの変更方法についてご紹介いたしました。
不要な部分をカットすることで訪問者の誤操作を軽減できるかもしれませんね！
それではお疲れ様でした！ノシ
ABOUT ME