Booked Tips: Showing Events on Your Website
Booked includes a lot of features that you may not know about. In this article we’ll talk about a simple way to display reservations from Booked on your website.
The first thing you’ll need to do is make schedules or resources public. Anything that has not been marked as public will not be displayed.
Header Set Access-Control-Allow-Origin "*"
Once that’s done you’re ready to add the snippet to your website. If you open Help and go to the section titled “Embedding a Calendar Externally” we give you the full snippet. It will look something like this.
<script async src="https://demo.bookedscheduler.com/Web/scripts/embed-calendar.js" crossorigin="anonymous"></script>
You can drop this anywhere in your HTML body content and we’ll load reservations using the default snippet settings.
The snippet displays a very simple HTML component that isn’t the prettiest thing to look at.
My feeling is that you’ll want to fit the component in with your website’s theme, so you can take advantage of the CSS classes we provide to style it however you like. All of the CSS class names start with booked-
Customizing the Contents
There are multiple options you can include on the script to customize what’s shown.
|type||agenda, week, month||agenda||Controls the view that is shown|
|format||date, title, user, resource||date||Controls the information shown in the reservation box. Multiple options can be passed. For example, to show date and title request date,title|
|d||Any digit between 1 and 30||7||Limits the number of days shown for the agenda view|
|sid||Any schedule public ID||All schedules||Limits the reservations shown to a specific schedule|
|rid||Any resource public ID||All resources||Limits the reservations shown to a specific resource|
For example, to show the month view for schedule 123 and the date and title for reservations, you would use the following.
<script async src="https://your-booked-url/Web/scripts/embed-calendar.js?type=month&sid=123&format=date,title" crossorigin="anonymous"></script>
Hosting and Support
Did you know that I offer professional hosting and support for Booked? You can set up a free trial in minutes and get unlimited support.
This article was written on November 15, 2019, so check your documentation for the latest options.