webform_booking_fullcalendar
The Webform Booking FullCalendar module is built specifically to improve the visual management functionality of the standard Webform Booking module. By integrating the powerful, open-source [email protected] JavaScript library, it transforms a basic list of webform submissions into a highly interactive, Google Calendar-style administrative dashboard.
Instead of reading through rows of data, administrators can now view all existing reservations at a glance and manually add new bookings (such as phone or walk-in appointments) simply by clicking an empty slot directly on the calendar grid.
Features
Basic Functionality & Unique Features:
Visual Administrative Dashboard: View your webform bookings in fully responsive Month, Week, and Day calendar grids powered by FullCalendar v6.
Click-to-Book Auto-selection: Click on any empty date or time slot in the admin calendar, and a new tab will open with your Webform perfectly pre-filled with that exact date and time.
Dynamic Configuration: A dedicated settings page allows you to easily bind the calendar to any specific webform machine name and set custom slot durations (e.g., 30 mins, 60 mins).
Zero Library Setup: The module utilizes a reliable CDN for the FullCalendar library, meaning you don't need to manually download or configure external JS libraries using Composer or Drush.
Use Cases:
This module is perfect for hotel receptionists, clinic staff, consultants, or any service providers who use Drupal to manage their schedule. When a customer calls on the phone to make an appointment, the admin can simply look at the visual calendar, click the requested time slot, and fill out the customer's details without having to manually select dates from standard dropdowns.
Post-Installation
Once you install and enable the module, a pre-configured View and administrative page are automatically created for you. Follow these quick steps to get started:
Navigate to Configuration > System > Webform Booking FullCalendar (/admin/config/system/webform-booking-fullcalendar).
Enter the machine name of your target booking webform (the default is usually booking).
Set your Slot Duration (in minutes) to match the settings of your Webform Booking element.
Go to your Webform's Settings (Settings > Form > Form behaviors) and check the box for "Allow all elements to be populated using query string parameters".
Clear your Drupal caches.
Visit your new interactive calendar at: Structure > Webforms > Bookings Calendar (/admin/structure/webform/bookings-calendar).
Additional Requirements
This module acts as an extension and requires the following to be installed:
Webform (drupal:webform)
Webform Booking (drupal:webform_booking)
Views (Drupal Core)
Recommended modules/libraries
No additional libraries are required. The module automatically loads the necessary [email protected] global script via CDN for maximum simplicity and out-of-the-box compatibility.
Similar projects
Webform Booking: This is the parent module we depend on. While Webform Booking handles the frontend logic and form elements for customers, our module focuses entirely on the backend administrative visual experience.
There is an obsolete module named webform_booking_calendar on Drupal.org. Our project is an entirely modern replacement, built from scratch for Drupal 10/11 using Vanilla JS, modern CSS, and the latest FullCalendar API.
Supporting this Module
This project is open-source and community-driven. If you find this module helpful for your business or clients, the best way to support it is by reporting bugs, suggesting features, or contributing code patches in the issue queue!
Community Documentation
All primary documentation and setup instructions are included in the module's README.txt file and on the built-in configuration page UI.