How to add the Schedito booking widget to Joomla
Schedito can be added to Joomla without a dedicated booking extension. Load the shared Schedito stylesheet and JavaScript once through the site's frontend asset layer, then place the calendar-specific widget DIV where customers should be able to book.
For the booking position itself, Joomla's core Custom module provides a practical administrator-friendly solution. The shared frontend assets should normally be handled separately by the active template or Joomla's Web Asset Manager.
Before you open Joomla
A configured Schedito calendar
Configure the services, resources and availability customers should be able to book before publishing the widget.
Joomla administrator access
You need permission to create a Site Module and access to the site's template or frontend asset configuration for the shared Schedito files.
The three Schedito elements
Open the widget code in Schedito and keep the CSS link, JavaScript script and calendar-specific widget DIV ready to copy.
1. Keep the three integration elements separate
The Schedito dashboard provides three pieces of frontend code:
CSS link — provides the booking widget styles.
JavaScript script — initializes and operates Schedito widgets.
Widget DIV — identifies the organization and public booking calendar and defines where the calendar should appear.
On Joomla, the first two belong at the site or template asset level. The calendar-specific DIV belongs in the frontend position where customers should see the booking interface.
CSS link — once
JavaScript — once
Calendar-specific widget DIV
2. Load Schedito CSS and JavaScript once
Joomla templates do not all expose the same custom-code interface, so there is no single administrator menu path that applies to every Joomla website.
If your active template or template framework provides fields for custom Head, CSS or JavaScript code, use those site-level settings and add the current CSS link and JavaScript script shown by Schedito.
For a Joomla-native developer integration, use Joomla's Web Asset Manager from a child template or small site extension to register and enable the Schedito stylesheet and script.
Whichever method your site uses, load the shared assets once. Do not put another copy into every booking module.
Choose the path that matches your site
Template supports custom code
Use its site-level Head / JavaScript settings.
Custom or professionally maintained Joomla site
Register the assets through Joomla Web Asset Manager.
Avoid
Editing Joomla core files or copying CSS and JavaScript into every booking module.
For developers: use Joomla's Web Asset Manager
Modern Joomla provides Web Asset Manager specifically for registering and loading CSS and JavaScript in a managed way. It can handle asset registration, dependencies, attributes and rendering through the document.
A developer can register the stylesheet URL and script URL from the current Schedito dashboard through the site's child template or a small extension and enable them on the required frontend pages.
This is preferable to changing Joomla core files. If your site uses a commercial template framework with its own supported custom-code interface, that mechanism can be used instead.
3. Add the calendar through a Joomla Custom module
Open System → Site Modules, create a new module and select the Custom module type.
From the Schedito dashboard, copy only the calendar-specific widget DIV and place it in the module content.
The DIV contains values such as data-organization-id and data-calendar-public-id. Use the exact values generated for the calendar you want to display.
Give the module a useful internal title, hide the visible title if appropriate, then choose the template position where booking should appear.
4. Choose the module position and pages
Joomla modules are rendered through positions provided by the active site template. Select a position that places the booking interface where it belongs in your layout.
Use the module's Menu Assignment settings to decide where it should appear. You can show it on all pages, only selected menu items or a dedicated booking page depending on your Joomla structure.
If the position is too narrow for a booking interface, use another template position or adjust the page layout rather than forcing the calendar into a sidebar-sized container.
Example
Schedito calendar DIV
Main content / suitable full-width position
Book now page
Make sure the Joomla editor preserves the widget markup
Joomla's Custom module uses the configured content editor. Depending on its settings, an editor may modify or remove parts of custom markup when the module is saved.
After saving, reopen the module's HTML/source view and confirm that the Schedito class and data-* attributes are still present.
If the editor changes the markup, use its source-code mode or an appropriate No Editor workflow while inserting the widget. Do not repeatedly paste altered markup without checking what Joomla saved.
Using multiple Schedito calendars in Joomla
Keep the shared Schedito stylesheet and JavaScript loaded once through the site or template asset layer.
Create a separate Custom module for each calendar or booking location, using the correct calendar-specific DIV in each module.
Joomla's module positions and Menu Assignment then let you decide which calendar appears on which pages without duplicating the shared frontend assets.
Shared once
Schedito JavaScript
Separate modules
Module B → Calendar DIV B
Module C → Calendar DIV C
5. Publish and test the complete booking flow
Verify more than the module position: check asset loading, availability and an actual booking from the Joomla frontend.
Open the public page
Test the actual Joomla frontend and confirm that the stylesheet, JavaScript and calendar module combine into a working booking interface.
Complete a booking
Select a service, date and time and complete a real test booking. Verify the resulting booking in Schedito.
Check responsive layout
Check the module position on desktop and mobile and make sure the active Joomla template gives the widget enough usable width.
Joomla booking widget troubleshooting
Check all three integration pieces independently. Verify that the shared Schedito stylesheet and JavaScript are loaded on the public page and that the module still contains the correct calendar DIV.
Then check the browser developer tools for failed asset or API requests and JavaScript errors.
The configured editor may be sanitizing or rewriting the markup. Open the module in source-code mode and compare the saved HTML with the DIV supplied by Schedito.
If necessary, use an appropriate No Editor workflow while inserting the markup.
Check that the module is published, uses a valid position from the active template and is assigned to the correct menu item.
Also check access level and language assignment if the Joomla site uses multilingual or restricted content.
The Joomla integration is probably working. Check Schedito instead: service, required resources, recurring availability, date-specific exceptions, existing bookings, capacity and connected external calendars.
Check the active template, template framework and any custom modules or extensions used for frontend code. Keep one site-level integration and remove duplicate asset inclusions.
Check the module position and the surrounding template layout. Sidebar positions, fixed-width modules, grid columns, padding and overflow rules can constrain the widget even when Schedito itself is responsive.
Keep Joomla focused on content and Schedito focused on booking
Once the integration is working, continue managing services, resources, availability, capacity, calendar synchronization and widget styling in Schedito.
Start freeJoomla booking overview
Browse all Schedito guides · Widget customization · Google Calendar sync