Q173: I need to have more control over the calendar preview.

You are here: checkin24-7 » Help » Frequently Asked Questions » Q173: I need to have more control over the calendar preview.
You can get the default HTML code for the calendar preview in site settings / integrate with my site (in the last step of the integration wizard). This HTML code is basically a single IFRAME tag which embeds the calendar into your web page.

The basic options can be set using the UI. The advanced ones need to be set by changing the URL parameters of the calendar's IFRAME. 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 checkin24-7's UI and then add optional parameters listed below. You can choose one of the following styles:
    standard - standard calendar preview,
    variable-width - variable-width calendar preview,
    multi-month - small month preview,
    week-grid - hourly schedule grid,
    week-grid-2 - hourly schedule grid (narrow),
    upcoming - upcoming availability,
    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
  • 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.)
  • stylesheet - URL of the CSS stylesheet to be used to fully control the looks of the calendar (colors/fonts etc). Note that instead of specifying it here, you can set a stylesheet to be ALWAYS used whenever a calendar preview is displayed. You can do this here. This is very useful e.g. when you want to use calendar preview tags in your advanced integration templates. Please note that checkin24-7 will also include the original stylesheet, so your custom stylesheet file should only include the modifications required by you (e.g. colors).
  • 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
  • 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.
  • 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. Adding 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 marked as grey (unavailable).
  • 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)
  • 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, they will be by default marked with yellow and only these days will be clickable. You can switch this off using this parameter
  • 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
  • feedback_url - if using advanced integration, the feedback_url determines the URL where the checkin24-7 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 checkin24-7.com


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. 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)