ウェブサイトにスケジュールを埋め込む
自動の高さまたは固定サイズで、公開済みスケジュールをご自身のサイトに表示します。
最終レビュー日
はじめる前に
- 所有者としてログインし、スケジュールを公開します。Freeではメインのスケジュールを公開でき、ほかのスケジュールにはProが必要です。
- 埋め込みのオプションには、ウェブ版の Builder を使ってください。Android アプリには表示されません。
- iframe を受け付けられるウェブサイト部分を編集する権限があること。自動の高さには、スクリプトタグも必要です。
言語とタイトルを選びます
公開されたスケジュールの 共有 → 埋め込みを開きます。
言語を選び、スケジュールのタイトルを表示または非表示に設定します。変更されるのは埋め込み画面のインターフェースであり、予定の本文ではありません。
カレンダーの自動同期により、将来の予定や更新がここで公開される可能性があります。利用可能な説明は常に含まれ、オフにする選択肢はありません。共有している内容を確認してください。同期の接続を解除しても、保持された予定の公開は停止されません。公開アクセスを停止するには、別途公開を停止してください。
以下のサイズ設定から 1 つを選んでください。ダイアログの コピー には、スケジュールの現在の公開トークンと選択したオプションが含まれます。
オプション 1：自動の高さ
埋め込みサイズを自動に設定し、iframeとembed.jsスクリプトの両方をコピーします。スクリプトが高さをスケジュールに合わせて調整します。ウェブサイトでscriptタグが除去される場合は、代わりに固定サイズを使用してください。
TOKEN を、スケジュール名や非公開の ID ではなく、公開リンクの公開トークンに置き換えてください。または、共有 → 埋め込み からコード全体をコピーしてください。
<iframe src="https://schedulebuilder.net/e/TOKEN" width="100%" height="240" style="border:0;display:block" loading="lazy" title="Weekly schedule"></iframe>
<script async src="https://schedulebuilder.net/embed.js"></script>オプション 2：固定サイズ
埋め込みサイズをカスタムに設定し、幅と高さを入力してiframeをコピーします。この方法にはembed.jsは不要です。下の例では、利用できる幅をすべて使い、高さを600ピクセルに固定しています。
TOKENを現在の公開トークンに置き換えるか、共有 → 埋め込みで設定したコードをコピーします。ページに合うように寸法を調整してください。
<iframe src="https://schedulebuilder.net/e/TOKEN" width="100%" height="600" style="border:0" loading="lazy" title="Weekly schedule"></iframe>埋め込みを挿入して確認する
選んだ代替手段のコードを、サイトの HTML またはカスタムコードの領域に貼り付けます。
ページを保存し、デスクトップとモバイルで表示を確認します。言語、タイトルの表示可否、サイズを確認してください。
埋め込みにはスケジュールと閲覧専用の予定詳細が表示され、その下に ScheduleBuilder の透かしとリンクが表示されます。同じ公開が有効な間は、コードを置き換えずに保存済みの変更が反映されます。自動の高さではスケジュール全体が収まるはずです。切り取られたままの場合は、サイトが embed.js を許可しているか確認するか、固定サイズを使ってください。
埋め込みには、非公開のタスク、タスクのメモ、所有者の メモ 欄は含まれません。予定の説明は予定詳細に表示されます。公開ページのエクスポート、印刷、ソーシャル共有、編集、自分で作成 のコントロール、および所有者のカスタムブランド表示は含まれません。