この記事を読んで欲しい方

Googleワークスペースを導入したが上手くDXに応用できていない方
Googleワークスペースを導入しようと考えてる中小企業の担当者
Gmailやクラウドアプリだけ使っているテレワーカー
GIGAスクールでGoogleエデュケーションを導入している学校の先生
NEXT GIGAスクールで何をしていいか分からない偉い人
Googleエデュケーションで目玉がほしいGoogleの中の人
ノーコードに興味がある人
AppSheetに興味がある人

①スケジュール管理の画面ってしょぼい

　Googleサイト内にGoogleカレンダーを簡単に埋め込めることは、以前投稿しましたが、そんなに難しいことではありません。

　しかし、長く使っていると、もう少し色とかを変えられないのかな？と思うに違いありません。

　実はGoogleカレンダーには、埋め込み方式でカレンダーに色々な色をつけたり、機能をつけたりすることが、以前からできていました。
　残念ながら、Googleサイトの挿入＞カレンダーでは、それが使えないのです。（Googleには早く対応してほしいのですが）

　そこで、以前の方法を使うことで、カラフルなスケジュール管理の画面を作ってみます。　

②共同カレンダーをひらく

　まず、以前作成した、共同カレンダーを開きます。

　共同カレンダーを開きました。

　︙から設定と共有を選びます。

　カレンダーの統合を選びます。
　出てきた画面のカスタマイズをクリックします。

　カレンダーのカスタマイズ画面が表示されました。
　ここで、色や機能をカスタマイズします。

③画面設定のカスタマイズ

　画面の左サイドに設定画面があります。上から、タイトル、表示、画面の幅と高さ、背景色、枠線、デフォルトのビュー、週の開始日、言語、タイムゾーン、表示するカレンダーとなっています。
　画面の幅と高さがデフォルトで800x600になっていますので、横長の画面です。
　ここで重要なのは、色なので、まず背景色を変えてみます。背景色をピーコック（青）に変えました。
　すると、上のバナー部分が青くなりました。

　つぎに、各カレンダーの帯の色ですが、一番下の表示するカレンダーの︙をクリックすると、選べる色が出てきます。
　ここで選んだ色が、帯の色になります。
ただし、ここでの色の設定と実際に表示される帯の色は、微妙に異なります。（帯の色の方が暗くなります）
　なぜ、この仕様なのか不明ですが、帯に入るフォントの色が白ですので、見やすいように調整しているのかもしれません。

　帯の色は、共同カレンダーはセージ（青緑）に、日本の祝日はトマト（赤）に変更しました。

④カレンダーのHTML

　　埋め込みコードが出来ているので、画面一番上のiframeのコードをコピーします。（横のコピーボタンを押してください）

⑤サイトに埋め込む

　このiframeのコードをそのまま埋め込んでも良いのですが、そのまま貼り付けると、800x600の横長の画面なので、右や下側が切れてスクロールバーが出てきてしまいます。
　それだと使いづらくなるので、表示画面の横の大きさのみを可変タイプにします。
　以下のコードをiframeの上の部分に追加してください。

<style type="text/css">
body {
  font-family: sans-serif;
}
body::-webkit-scrollbar {
  display: none;
}
a {
  text-decoration: none;
}
iframe { width: 100%; }
</style>
ここにiframeのコピーを入れる

　これは横の幅を自動調整して、スクロールバーを非表示にしています。

　埋め込みました。色がちゃんと出ていることを確認してください。
　画面の高さは、プレビューを見ながら調整してください。

　これで、スケジュール画面の色の指定ができました。
注意しないといけないのは、カスタマイズしたあとの画面は、どこにも保存されていません。保存機能がないのです。
　ですから、呼び出してちょっとした修正ができません。最初から作ることになります。これは不便です。
　また、今までの挿入＞カレンダーの方法では、画面を拡大できますが、この方法では拡大ボタンはでてきません。
　ただ、画面から、スケジュールが印刷できるようになっていますので、紙で印刷したい場合は便利かもしれません。