FAQ Q173: I need to have more control over the calendar preview.
You can get the HTML code for the calendar preview (to be embedded on your website) in integrate with my site / widgets / calendar preview. Almost all the options can be set using this builder.
Only if the standard options are not sufficient, please continue reading this document to find out all the options you can use by changing the URL parameters of the calendar's IFRAME or you can also simply change the global defaults for all calendar previews used for your planyo site in
Settings / CSS style editor. Here are the parameters that can be added or changed:
- style=XXX - this parameter is always added automatically to determine the calendar preview style. Some styles require certain parameters so it's best to choose the style in Planyo's UI and then add optional parameters listed below. You can choose one of the following styles:
default - the style will depend on the other settings and your resource types. This will be aways one of the other styles listed below,
standard - standard horizontal (wide) calendar preview,
variable-width - variable-width calendar preview (same as above but lets you set the number of days visible),
multi-month-responsive - small month preview, the number of months depends on the horizontal space available,
multi-month - small month preview, you can determine the number of months displayed at once,
week-grid - hourly schedule grid (wide),
week-grid-2 - hourly schedule grid (narrow),
upcoming-av - upcoming availability calendar,
big - big calendar view, works especially well for event-type resources, it lists the resources which can be rented out on given day or hour, including the quantity available
- resource_id=XXX - set ID of the single resource to be displayed
- days - if you use the variable-width calendar preview or hourly schedule grid style, choose the number of days that will be shown in the preview
- month-count - for the small month preview calendar style, choose how many months will be shown
- nox=1 - for the small month preview calendar style, this will use colors instead of red X to mark unavailable days
- fullh=1 - for 24-hour times in some places by default you'll see the hour followed by h, e.g. 10h. With the fullh=1 parameter, this will be replaced by the full hour 10:00. If you set this to fullh=force, then hours will never be separated from minutes (by default they can be separated into 2 rows) making the columns wider
- custom-language=DE - set the language of the calendar preview (if different from the default) -- language is in form of the two-letter ISO code (EN, DE, FR, ES, IT etc.)
- cks=1 - you can use this parameter to enable cookies in the calendar preview. Cookies can be useful to store the state of the preview for the next visit (e.g. last visited date)
- stylesheet - URL of the CSS stylesheet to be used to fully control the design of the calendar (colors/fonts etc). This parameter is left for backward compatibility only. You should normally edit the base CSS here.
- background=XXX - you can set the calendar's background color/image here
- resfilter=X,Y,Z - you can decide which resources will be shown (only in the horizontal style) - see more here
- propfilter_name=X&propfilter_value=Y - using this parameter pair you can filter your resources by to the custom property X -- only the resources whose property value is Y will be listed - see more here. This resource filter cannot be combined with the other ones.
- prop_res_xxx=yyy - An alternative resource selector to propfilter_name, propfilter_value (based on custom resource property values) but this format lets you apply multiple resource property filters, e.g. prop_res_abc=1&prop_res_def=2 would apply both abc and def filters). See Q205 for the listing of custom resource properties available for your planyo site.
- res_type_filter=event, res_type_filter=nonevent - you can use one of these parameters in order to only list resources which are event-type or not. This filter cannot be combined with the other ones.
- sort=prop_res_xxx - you can change the default sorting criterium of resources to one of your custom resource properties. You should use all lower case letters, spaces should be replaced by underscores and with the prop_res_ prefix, e.g for the property "Number of persons", this should be &sort=prop_res_number_of_persons
- default_view=day - use this with the horizontal calendar to set the default view to day; default_view=month will set the default view to the month display; in case of the big calendar style, you can also use default_view=week.
- ss=1 - only for week-grid and week-grid-2 styles, this will result in the calendar being rendered on the server-side, resulting in faster rendering times in case of a resource with a very large quantity of units
- no_switching=1 - when set, the user won't be able to switch between day/month views (or day/week/month in case of the big calendar style); this is only used with the calendar styles which support such choice
- show_count=1 - this will always display the available quantity as a number (in the standard mode one must hover over a square to see available quantity)
- readonly=1 - this will remove all links to the reservation form from the calendar preview (clicking on available slots will have no effect)
- reset_cookie_date=1 - use this parameter to always reset the view to current month
- no_range=1 - use this parameter for hour-based resources when you have limited starting times. In the upcoming availability preview, this parameter will only show the possible starting times instead of time ranges in case of the upcoming availability preview (e.g. 4pm, 5pm, 6pm instead of 4pm-7pm). In case of other previews, all times which are not start times will be invisible when possible (or else marked as unavailable). You can use no_range=0 if you want to force the opposite behavior (show all units instead of just the start times)
- visible_items_per_column=X - for the upcoming availability calendar preview this sets the max number of items per column (day or month) listed directly, without the need to scroll to the next page. By default this is set to 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
If you wish to customize the calendar preview displayed not as a separate widget but as a part of a template (e.g. in the reservation form or resource detail views), you can use the customizable tag
$(calendar_preview_with_params?xxxx) where xxxx is a list of parameters above. If you'd like, in
Integrate with my website / widgets / calendar preview you can use the calendar builder UI in order to get the exact value of the tag corresponding with the calendar type and settings chosen. Please note that in such case you may also need to control the calendar preview width and height and so you can use parameters
fixed_width and
fixed_height if the defaults don't work well for you.
Example: in the reservation form you want to display the 3-month multi-month calendar preview for the current resource only. Simply use a tag like:
$(calendar_preview_with_params?resource_id=$(resource_id)&style=multi-month&month-count=3&morning_icons=1)