Embedding a Calendar Externally

It is simple to include a view of a Booked calendar in an external website. Copy and paste the following JavaScript reference to your website, updating the src attribute to point to your URL.

<script async src="https://demo.bookedscheduler.com/Web/embed.php" crossorigin="anonymous"></script>

Only calendars and resources that have been marked as public will be shown. If reservations are missing from a schedule or resource, it is likely that public visibility has not been turned on.

The following query string arguments are accepted to customize the embedded view:

Styling #

Embedded calendars are completely unstyled. Booked returns the data and you are able to adapt the style to fit the look and feel of your website.

Need some inspiration? Here’s a sample CSS template that can be used to display a generic calendar view.

.booked-weekday-name {
  border-top: solid 1px #000;
  border-left: solid 1px #000;
  font-size:1.5rem;
  padding-left: 2px;
}

.booked-week-date {
  border-top: solid 1px #000;
  border-left: solid 1px #000;
  padding: .5em;
  display: flex;
  flex-direction: column;
  min-height: 150px;
}

.booked-calendar-week, .booked-weekday-names {
  display: flex;
  flex-direction: row;
}

.booked-calendar-month {
  border-right: solid 1px #000;
  border-bottom: solid 1px #000;
}

.booked-day-events {
  padding-top: .5em;
}

.booked-week-date-title {
  font-size: 1.5rem;
}

.booked-calendar-event {
  padding: 4px 10px;
  display:block;
  border-radius: 3px;
}