まずは、totoco-netとカレンダーを同期させます。

1. Googleアカウントにログインします。
2. こちらの公式FAQの手順に従い、totoco-netとGoogleカレンダーの同期設定を完了させてください。
3. このアカウントのカレンダーに、リソースや店舗の予定（予約枠など）を集約させます。

第三者がカレンダーを見た時に、具体的な予定名が見えないように制限をかけます。

1. Googleアカウントでログイン中のカレンダーを開きます。
2. マイカレンダーの中でtotoco-netと連携したカレンダー項目のメニュー（縦列の・・・）をクリックします。
3. メニューから「設定と共有」を選択します。
4. 「予定のアクセス権限」の項目で「一般公開して誰でも利用できるようにする　予定表示（時間枠のみ、詳細は非表示）」にチェックを入れます。
   これにより、第三者には具体的なタイトルではなく「予定あり」とだけ表示されるようになります。

サイトに表示するためのコードを取得します。

1. カレンダーの設定画面から「カレンダーの統合」項目で「カスタマイズ」ボタンをクリックします。
2. プレビュー画面が開くので、以下を調整します。（Googleアカウントにログイン中は詳細情報が表示されてます）
   • サイトのデザインに合わせてサイズ
   • 表示項目(タイトル、ナビゲーション等)
   • 表示するカレンダー（表示したいカレンダーにチェックを入れてください）
3. 画面上部に表示されている「埋め込みコード」をコピーしてください。
4. 店舗サイトのHTML編集画面などに、コピーしたコードをペーストしてください。
   ＊店舗サイトを確認する際は、Googleアカウントをログアウトしてからご確認ください。

下記のようにプライバシーを守れた表示になります。

コピーした「埋め込みコード」を少し書き換えるだけで、より使いやすいカレンダーになります。

• スマホの横幅に合わせる：width="800"（数値は設定により異なります）の部分を width="100%" に書き換えると、スマホで見ても画面からはみ出しません。
• スクロールバーを表示させる： カレンダー内の予定が多い場合、scrolling="no" という記述を削除すると、カレンダー内をスクロールして確認できるようになります。