FAQ Q173: I need to have more control over the calendar preview.
Section: Availability calendar
To easily customize your calendar preview, start by navigating to Integrate with my website and selecting
CALENDAR PREVIEW in the WIDGET section. Here, you can either generate the HTML code to embed the calendar on your website or create a calendar tag to be used in your templates.
Further Customization Options
If the standard options don't meet your needs, you can further customize the calendar preview through the following methods:
- Using the Calendar Builder UI:
Navigate to Integrate with my website and selecting
CALENDAR PREVIEW in the WIDGET section. Here, you can modify the generated HTML code or calendar tag directly to suit your needs.
- Adding Parameters to Calendar Tags or HTML Code:
You can enhance the calendar preview by adding specific parameters to the generated code or tags. For detailed guidance, refer to the Documentation of Calendar Parameters section below.
- Setting Global Defaults:
You can set default parameters for the calendar preview in Site Settings > CSS Style Editor. Look for the field named "Calendar preview - default parameters" to apply your customizations globally for both desktop and mobile views.
To illustrate how to use the set_date=YYYY-MM-DD parameter globally, here's an example setting the date to December 31, 2025 in the "Calendar preview - default parameters" field:
Replacing Default Calendar Tags in Templates
If you want to replace the default calendar tags in your templates, follow these steps:
- Identify the Default Tags:
Default calendar tags are located in two key templates:
- Generate and Replace Tags:
Use the Calendar Builder UI to generate a new tag with your desired parameters. Replace the existing default tag with your newly generated tag in the template.
Example of a customized tag for displaying a resource dynamically selected by the customer:
$(calendar_preview_with_params?resource_id=$(resource_id)&style=multi-month&month-count=3&morning_icons=1)
When creating a tag for templates where only one resource is displayed dynamically, include the parameter resource_id=$(resource_id)
to ensure the correct resource is shown.
Documentation of Calendar Parameters
Below is a comprehensive list of parameters you can use to customize your calendar preview:
- style=XXX - Determines the calendar preview style. Available options include:
- default - Automatically selects a style based on your settings and resource types.
- standard - Standard horizontal (wide) calendar preview.
- variable-width - Allows you to set the number of days visible in the preview.
- multi-month-responsive - Small month preview with the number of months based on available horizontal space.
- multi-month - Allows you to set the number of months displayed at once.
- week-grid - Wide hourly schedule grid.
- week-grid-2 - Narrow hourly schedule grid.
- upcoming-av - Upcoming availability calendar.
- big - Large calendar view, ideal for event-type resources, showing availability and quantity available.
- resource_id=XXX - Set the ID of a single resource to be displayed.
- days - Number of days shown in the preview. Applicable to variable-width or hourly schedule grid styles.
- month-count - Number of months displayed in multi-month style.
- nox=1 - Use colors instead of red X for unavailable days. Only for multi-month calendar style.
- fullh=1 - Display full hours with minutes. Use fullh=force to ensure hours and minutes are never separated into different rows.
- custom-language=XX - Set the calendar preview language using ISO language codes (e.g., EN, DE, FR).
- cks=1 - Enable cookies to store the state of the preview for the next visit (e.g., last visited date).
- stylesheet=URL - Set a custom CSS stylesheet for backward compatibility. Normally, edit the base CSS here.
- background=XXX - Set the calendar’s background color or image.
- resfilter=X,Y,Z - Filter resources in the horizontal style calendar. See Q172 for more details.
- propfilter_name=X&propfilter_value=Y - Filter resources by custom property (X) with a specific value (Y). Cannot be combined with other filters. See Q172 for more details.
- prop_res_xxx=yyy - An alternative to propfilter_name/propfilter_value for filtering by custom properties.
- res_type_filter=event or res_type_filter=nonevent - Filter resources by event type.
- sort=prop_res_xxx - Change the default sorting criterion to a custom property. Use all lower case and replace spaces with underscores.
- default_view=day - Set the default view to day, month, or week in the horizontal calendar.
- ss=1 - Render the calendar on the server-side, resulting in faster rendering times in case of a resource with a very large quantity of units. Applicable only to week-grid and week-grid-2 styles.
- no_switching=1 - Disable view switching in calendar styles that support day/month views (or day/week/month in the big calendar style).
- show_count=1 - Always display the available quantity as a number.
- readonly=1 - Make the calendar preview read-only, disabling any actions on available slots.
- reset_cookie_date=1 - Reset the view to the current month, ignoring previously stored dates in cookies.
- no_range=1 - Limit available start times. Use this for hour-based resources with limited start times.
- visible_items_per_column=X - Set the max number of items per column in the upcoming availability calendar preview before scrolling is needed (default is 5).
- set_date=YYYY-MM-DD - You can set the day/month that will be displayed by default in the preview (normally it's the current day or the previously browsed date saved on user's browser as a cookie). Please note that you can also enter text values such as today or tomorrow or Next Wednesday (with the space encoded as %20 or +, ex. set_date=Next+Wednesday) or other similar values (using next/previous/this/last followed by weekdays, months etc.).
- find_first_av=1 - set this option if you want the calendar preview to go to the first available date by default (don't use together with set_date)
- morning_icons=1 - adds a diagonal division line to days where another guest checks-out in the morning or checks-in in the evening; this can be used only for accommodations (when customer reserves nights and not days) and with standard, variable-width and
multi-month calendar styles.
- max_resources=xxx - in case you have over 30 resources, they will be by default paged. You can increase / decrease the number of resources per page by modifying this parameter. The allowed value (used in place of xxx) is in the range of (5..100)
- separate-units=1 - in case you have multiple units of a resource, they will be listed in separate rows (in the standard and variable-width calendar types)
- no_start_time_check=1 - in case you have specific arrival weekdays (or, for hour-based resources, specific start times), they will be by default marked with yellow and only these days will be clickable. You can switch this off using this parameter.
- ignore_events=1 - if set, event-type resources will be shown like normal resources, meaning availability will be shown for all dates (and not only the start dates, as it is by default)
- no_extra_info=1 - if you use this parameter with the horizontal calendar preview, partial availability will be displayed in the same way as full availability (without information about the number of units available) and both reserved and unavailable periods will be displayed in the same way; if you combine this parameter with no_start_time_check=1, the calendar preview will only show two statuses: available or unavailable. Please note that only in case of the 'Small month preview' calendar type, this option is set by default. To switch it off (to show difference between unavailable and reserved), use: no_extra_info=0.
- show_prep_time=1 - this option will also mark the required preparation time as unavailable. This will clearly show to your customers that the preparation hours/days are also unavailable. The preparation time is set in resource settings (Min. time between consecutive rentals).
- feedback_url - if using advanced integration, the feedback_url determines the URL where the planyo plugin/module is embedded on your website. Clicking on the calendar preview then opens the reservation form on your website instead of the default (when this parameter is missing) which opens the reservation form on planyo.com
- calclass - if set, the top-level div element in the calendar iframe will include this class name. This allows you to style the calendar differently based on its location
- desktop=1 - use this parameter if you don't want planyo to detect mobile devices and switch the preview to a mobile-compatible version (this is done by default)
- force-style=1 - use this parameter to force the desired calendar type even if it's not compatible with the resource type (being day- or hour-based)
- min_hour=X, max_hour=Y - for hour-based resources the calendar preview calculates automatically the min. and max. hour to display in the preview based on your resource settings. It's possible to override it with these parameters, e.g. min_hour=8&max_hour=14 will show times from 8:00 till 14:00