Skip to article

Embed a schedule on a website

Display a published schedule on your site with automatic height or fixed dimensions.

Last reviewed

On this page

Before you begin

  • Sign in as the owner and publish the schedule. Free can publish the primary schedule; other schedules require Pro.
  • Use the web builder for Embed options. They are not shown in the Android app.
  • Have permission to edit a website area that accepts an iframe. Automatic height also requires a script tag.

Choose the language and title

  1. Open Share → Embed for the published schedule.

  2. Choose Language, then set Schedule title to Show or Hide. The language changes the embedded interface, not your event text.

Automatic calendar sync can expose future events and updates here; available descriptions are always included, with no option to turn them off. Review what you are sharing. Disconnecting sync does not unpublish retained events; unpublish separately to stop public access.

Choose one sizing alternative below. Copy in the dialog includes your schedule’s current public token and selected options.

Option 1: Automatic height

Set Embed sizing to Auto and copy both the iframe and the embed.js script. The script adjusts the height to fit the schedule. If your website removes script tags, use fixed dimensions instead.

Replace TOKEN with the public token from your published link, not the schedule name or private ID. Or copy the complete code from Share → Embed.

html
<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>

Option 2: Fixed dimensions

Set Embed sizing to Custom, enter Width and Height, and copy the iframe. This alternative does not need embed.js. The example below uses the full available width and a fixed height of 600 pixels.

Custom reveals Width and Height. The example URL and token do not work; copy your own code from Share → Embed.

Replace TOKEN with the current public token, or copy your configured code from Share → Embed. Adjust the dimensions to fit your page.

html
<iframe src="https://schedulebuilder.net/e/TOKEN" width="100%" height="600" style="border:0" loading="lazy" title="Weekly schedule"></iframe>

Insert and check the embed

  1. Paste the code for your chosen alternative into the website’s HTML or custom-code area.

  2. Save the page and view it on desktop and mobile. Check the language, title visibility, and sizing.

The embed shows the schedule and read-only event details, with a ScheduleBuilder watermark and link beneath it. Saved changes appear without replacing the code while the same publication remains active. For automatic height, the full schedule should fit; if it stays cropped, check that your site allowed embed.js, or use fixed dimensions.

Embeds exclude private tasks, task notes, and the owner’s Notes scratchpad. Event descriptions remain visible in event details. Public-page export, print, social-share, Edit, and Make your own controls and the owner’s custom branding are not included.