Unlike the Content block, its content can’t be edited via the CMS. It is displayed in the pages:

A search results page

It has two blocks, functions_menu and functions_block:

<div id="functions">
	<div id="functions_menu"></div>
	<div id="functions_blocks"></div>
</div>

We’ll focus mostly on the Price and Calendar blocks in the Property.

Price

The function of the Price block is to display calculated prices (after dates and number of guests have been entered by the user) or alternative (fixed) prices in:

The prices are contained within a <div> price:

<div class="price calcprice"></div>

Classes

price has several types of possible classes:

Class Meaning
nocalendar The property is not using the calendar
calcprice The price is calculated
x-weekly Weekly rentals only
notenabled Pricing not enabled
x-dates Pricing enabled but no dates setup
nodates No dates have been entered
noguests No number of guests has been entered

Discount

Additionally a discount class is added after price followed by:

It all depends of the setup in the application. For example a Last minute discount is applied 15 days before check-in:

<div class="price calcprice discount discount-late"></div>

Rent and Nightly rent

In price are displayed the Rent and Nightly rent with discount and fees (if setup in the application).

It is a series of <h4> titles followed by <span> for prices:

<div class="price calcprice">
	<h4 class="rent-and-discounts">Price</h4>
	<span class="rent-and-discounts"></span>
	<h4 class="rent-and-discounts-and-fees">Price</h4>
	<span class="rent-and-discounts-and-fees"></span>
	<h4 class="nightly-rent">Nightly rate</h4>
	<span class="nightly-rent"></span>
	<h4 class="nightly-rent-and-discounts-and-fees">Nightly rate</h4>
	<span class="nightly-rent-and-discounts-and-fees"></span>
	<div></div>
</div>

The classes are:

Class Meaning
rent-and-discounts Total price including discounts
rent-and-discounts-and-fees Total price including discounts and fees
nightly-rent Nightly rent including discounts
nightly-rent-and-discounts-and-fees Nightly rent including discounts and fees

Price table

Rent and Nightly rent are followed by a div with a <table> containing prices details:

<div>
<table>
<tbody>
<tr class="rent"></tr>
<tr class="discount discount-late"></tr>
<tr class="total-discounts"></tr>
<tr class="rent-and-discounts"></tr>
<tr class="fee"></tr>
<tr class="total-fees"></tr>
<tr class="total-all"></tr>
<tr class="ob-amount"></tr>
</tbody>
</table>
</div>

Depending of the setup the following rate details are available:

Label Class
Rent rent
Extra guest charges guestcharges
Label setup in application discount
Total discounts total-discounts
Label setup in application fee
Total fees total-fees
Total total-all
Due at booking [4] due-at-booking
Refundable security deposit deposit

The label is in a <th> and the rent value in a <td>:

<tr class="rent">
	<th>
		<span>Rent</span>
	</th>
	<td>
		<span>
		<span class="prefix">$</span>
		<span class="integer-part">700</span>
		<span class="decimal-separator">.</span>
		<span class="decimal-part">00</span>
		</span>
	</td>
</tr>

Price composition

In the <td>, the price is composed of:

Class Meaning
prefix [5] Currency symbol before the price
integer-part Whole price
decimal-separator Can be a period “.” or a comma “,”
decimal-part Decimal after the separator
midfix [6] Separates two prices in a range (“-”, “/”, etc.)
suffix Currency symbol after the price

Alternative price

When the price isn’t calculated, an alternative (fixed) price is displayed in _ALTPRICE_1 block. It has the class nosearch because no dates are not entered:

<div id="_ALTPRICE_1" class="price nosearch">
	<span class="altprice-amount altprice-amount-from altpriceamount-nightly">
	<span class="prefix">from </span>
	<span class="amount from">
		<span class="prefix">$</span>
		<span class="integer-part">50</span>
		<span class="decimal-separator">.</span>
		<span class="decimal-part">00</span>
	</span>
	<span class="suffix"> per night</span>
	</span>
</div>

An alternative price can either be:

The <span> with the price value has the class altprice-amount followed by:

Then a class to indicate if it’s a nightly, weekly or monthly:

Availability

In the Property page the Price block is in a   availability_and_price <div>.

If the property is available the HTML output is:

<div id="availability_and_price" class="function none">
	<div class="price calcprice"></div>
	<div class="ob"></div>
	<div class="dates"></div>
	<div class="availability available"></div>
	<div class="guests"></div>
	<div class="close"></div>
	<div class="clear"></div>
</div>

Just after the dates, availability indicates if a property is available or not. It also tells why, thanks to a second class:

Class Meaning
nocalendar The property doesn’t use the calendar
notavailable The property is not available
available The property is available
available-x-guests Not available for the number of guests
available-x-stay Not available for the stay time
available-x-guest-stay Not available for the number of guests and stay time

Calendar

The calendar shows availabilities dates for the property.

A customized availability calendar.
<div id="availability_calendar">
	<h3><span>Availability calendar</span></h3>
	<div id="availability_calendar_container">
		<div class="kigo_calendar"></div>
		<div class="controls"></div>
	</div>
	<div class="close"></div>
</div>

kigo_calendar contains the calendar itself with the days, months and the reservations:

<div class="kigo_calendar">
<div class="days"></div>
<div class="months"></div>
<div class="reservations"></div>
</div>

A day block has the class day: <div class="day first odd">01</div>.

A month block has the class month: <div class="month first today odd">Mar 12</div>.

Also, a block corner is used for the corners and today denotes the current day / month.

Reservations blocks have different types of classes:

Class Meaning
n nothing (no reservations)
eom end of month
mc my confirmed
mh my hold
oc other confirmed
oh other hold
bn before nothing
en end nothing
bmc before my confirmed
bmh before my hold
boc before other confirmed
boh before other hold
emc end my confirmed
emh end my hold
eoc end other confirmed
eoh end other hold
start_end_block start of end of period (emc, bmc, etc.)

To schematize:

The block controls has the back and forward links:

<div class="controls"><div class="back">
<a href="#" class="disabled"><span>Back</span></a>
</div>
<div class="forward">
<a href="#" class=""><span>Next</span></a>
</div>
</div>

When we can’t go backward or forward a class disabled is add to the link.

Finally close to close the calendar (using Javascript):

<div class="close">
	<a href="#" onclick="property.closeCalendar(); return 
	false;"><span>close</span></a>
</div>

[4] Available if online booking activated.

[5] The prefix, suffix and decimal separator are setup depending of the currency, for example “€” as a suffix.

[6] Only for alternative price ranges.