Googleカレンダーをカスタマイズするやり方│Webページに埋め込み方法も 

スケジュールやタスクの管理ができるとともに、複数人で情報共有できるGoogleカレンダーは、予定の通知管理や表示形式などのカスタマイズができます。

この記事では、Googleカレンダーを使ううえで知っておきたい基本的な3つのカスタマイズ方法を解説します。またWebページで共有し、レスポンシブルデザインに対応する方法についても分かります。

これを読んで、自分自身に合った機能やレイアウトに変更してみてください。

Googleカレンダーをカスタマイズする方法

まずは、日常的に使用するうえで知っておくと、さらに便利に使用できる3つの基本的なカスタマイズを確認しましょう。

実際に手を動かしながら実践して変化を確認し、最適な仕様を見つけてみてください。

【方法１】予定の通知を管理する

受信した予定の通知についてのオンオフや、どのように通知がされるかを設定することができます。

やり方は、Google カレンダーのトップから画面右上にある歯車マークのアイコンをクリックし「設定」タブを選択します。

左側に表示される「全般」のタブから「通知設定」を押してください。

「通知設定」項目下の「通知」のプルダウンから、通知の有無と方法を「OFF」「デスクトップ通知」「アラート」の3種類から選びます。

それぞれの通知設定の違いは以下の通りです。

「[参加] または [未定] と返信した予定の通知のみ受ける」では、通知設定のいずれの3種類を指定してもチェックボックスでオンオフの切り替えができます。

【方法２】カレンダー ビューを選択する

画面上の日数を指定したり、週番号や週末を表示するかなどの詳細な設定ができます。

スクリーン上で参照できる日数を選択するには、カレンダートップ画面の右上にあるプルダウンをクリックしましょう。

そして、「日」「週」「月」「年」「スケジュール」「カスタムビュー」の6種類から指定します。

「週」「月」を選択した場合には、同様のプルダウン内の「週末を表示する」のオンオフを切り替えることができます。

また、「辞退した予定を表示する」の事項についてはビュー形式に関わらず指定が可能です。

さらに詳細なカレンダービューを変更したい場合は、トップ画面の歯車マークから「設定」を押した後、「全般」タブから「ビューの設定」を選択しましょう。

それぞれの設定による違いは以下の通りです。

Googleカレンダーを他の人と一緒に使用するときの共有方法を知りたい人は、こちらの記事もご覧ください。

caroa times｜Googleカレンダーの共有方法とは？手順や便利機能を詳しく紹介

また、プルダウンにて以下の事項が設定できます。

【方法３】カレンダービューを変更する

カレンダービューの予定やテキストのスタイルをカスタマイズできたり、画面に映し出される情報の密度を変更できます。

やり方はトップ画面右上の歯車マークから「設定」ボタンをクリックして、「密度と色」のタブを押してください。

予定やテキストのスタイルを変えるには、カラーセットのプルダウンで「モダン（テキスト：白色）」「クラシック（テキスト：黒色）」のどちらかを選択します。

情報密度を指定するときは、情報密度のプルダウンから「画面に合わせて自動調整」「最小」から指定しましょう。

設定をしたら「完了」ボタンを押してください。

その他の便利なカスタマイズ

作成したカレンダーをWebページ上で公開したり、差し込んだカレンダーをレスポンシブル仕様にすることもできます。

ここでは、Webに公開するためのカスタマイズ機能について確認しましょう。

Webページにカレンダーを埋め込む

Googleカレンダーはホームページに埋め込むことができ、アクセスした人がスケジュールを確認したり予定を記載できます。

やり方はトップ画面左側に表示されているカレンダーの中から、ホームページに埋め込みたいカレンダーを選びます。

対象のカレンダー名称の右側にある、縦に点が3つ並んだボタンを押し「設定と共有」をクリックします。

マイカレンダーの設定画面に移るので、「予定のアクセス権限」から「一般公開して誰でも利用できるようにする」の項目にチェックを入れてください。

警告メッセージが出るので、内容を確認して「OK」を押します。

右側のプルダウンから時間枠のみを表示するのか、すべての詳細を表示するのかを指定してください。

そして、「カレンダーの統合」の項目から「埋め込みコード」をコピーして対象ホームページに貼り付ければ完了です。

埋め込んだカレンダーのレスポンシブルデザイン化

HTMLとCSSを追加することで、さまざまなデバイスを利用しても見やすい仕様にできます。

書き換えの例を載せるので参考にしてください。

HTML

埋め込みコードにdivタグを付け加えましょう。

CSS

下記のコードを追加してください。

.google-cal iframe {
  width:100%;
  max-width:800px;
  height:400px;
}

@media (min-width: 750px) {
  .google-cal iframe {
    height:600px;
  }
}

カスタマイズしてさらに使いやすくしよう

Googleカレンダーは通知に関する設定やビュー形式の選択・変更をすることでさらに快適に使用できます。

また、Webページ上で他の人とカレンダーを共有したい場合は、埋め込みコードを取得してレスポンシブル仕様にできるので、ぜひ活用してみてください。