Overslaan en naar hoofdcontent gaan

Subwidget Calendar implementeren en configureren

  • Bijgewerkt

Initialisatie

De Calendar Widget is feitelijk de nieuwe versie van de Datepicker Widget. Initialiseren werkt hetzelfde zoals bij alle andere HM-widgets:

<div class="booking-widget" data-booking-lng="nl" data-booking-resort="mijn-resort" data-booking-token="abcdefghijklmnopqrstuvwxyzABCDEF">
     <div class="booking-widget-calendar"></div>
</div>

Waarbij de javascript toegevoegd kan worden zoals uitgelegd op deze pagina.

 

Configuratie

Aan de calendar widget zijn diverse opties toe te voegen. Dit gebeurt niet meer via data-attributen, zoals bij oudere widgets het geval was, maar in de javascript configuratie:

<script>
    window.hmapi_booking_config = {
        "widget_calendar":{
            "optie1": true,
            "optie2": "nl",
            "optie3": 240
        }
    };
</script>

Beschikbare opties zijn:

showPeriod

 Bool

 Toon de geselecteerde periode alvorens direct een reservering te starten (true) of start meteen een nieuwe reservering (false)
locale Str(2) Land en taalcode (wordt standaard uit ha.params gehaald).
defaultRanges 

 Array

 Array met verblijfsduren (integer). Gebruik dit om verblijfsduur-knoppen te tonen na klikken op een aankomstdag.
numMonthsShown 
 Int
 Aantal getoonde maanden. Wordt bij mobiele browsers altijd op 1 gezet.
maxDate
 Date
 Toon geen aankomsten na deze datum (voor bijvoorbeeld lastminutes).
showParticularities

 Bool

 Toon arrangementen, kortingen, speciale periodes.
Default true, zet op false om deze niet te tonen.
resetElementClass

 Str/null 

 Class van een DOM-element wat van de widget een onClick-event krijgt wat de geselecteerde data wist. Krijgt class disabled wanneer uitgeschakeld. Start met .
live Bool Haal live beschikbaarheid op en markeer dagen die beschikbaar zijn maar geen aankomst- of vertrekdatum anders (lichtgoen). Standaard false.
showCombinedDays Bool Toon aankomst- en vertrekdagen als 'schuine dagen'; met twee kleuren.
customCalentimConfig 

 Object
 		 Object met config uit de calentim-documentatie. Gebruik dit op eigen risico! Voorbeeld: {'showHeader':true}

 

Styling

De Calendar Widget biedt weinig ruimte voor aanpassingen, doordat veel styling afhankelijk is van de ruimte die de Calendar in het venster krijgt. Het kleurenpalet daarentegen is geheel naar eigen wens aan te passen. De widget gebruikt hiervoor css-variabelen, welke je kunt aanpassen door de volgende code in je project op te nemen:

<style>
:root { 
 --calentim-borderColor: #dddddd; 
 --calentim-backgroundColor: #ffffff;
 --calentim-accentText: #1885fc;
 --calentim-rightBgColor: ghostwhite;
 --calentim-selectionWrapperColor: #1783ff; /* also used for footerButtons and year/monthpicker * /
 --calentim-yearMonth-picker-hover: #fff;
 --calentim-outOfMonthSelectionBgColor: #c6dbf0;
 --calentim-selectionBgColor: #0666cd; /* span inside calendarCell with arrival or departure (selectionStart/selectionEnd) * /
 --calentim-betweenSelectedBgColor: #efe;
 --calentim-betweenSelectedTextColor: #aca;
 --calentim-headerSeparatorColor: aliceblue;
 --calentim-disabledTextColor: #a6aab3;
 --calentim-darkDisabledTextColor: #6a6e71; /* also used for header icons * /
 --calentim-disabledBgColor: #c9c9d1;
 --calentim-dayOfWeekColor: #616161;
 --calentim-weekendColor: #568EA3;
 --calentim-textShadowColor: #eee;
 --calentim-titleColor: #424242;
 --calentim-disabledDayBgColor: #EFEFF8;
 --calentim-disabledDayTextColor: #dfdff1;
 --calentim-hoverDayBgColor: #c8e1ff;
 --calentim-hoverDayTextColor: black;
 --calentim-hoverDay-first-BgColor: #25b1fe;
 --calentim-hoverDay-last-BgColor: #25b1fe;
 --calentim-hoverDay-first-TextColor: #fff;
 --calentim-hoverDay-last-TextColor: #fff;
 --calentim-mouseOverDayBgColor: #2e2;
 --calentim-dayBgColor: #afa;
 --calentim-dayTextColor: #191;
 --calentim-headerTitleColor:#017abc;
 --calentim-discountBgColor: #4bf49a;
 --calentim-arrangementBgColor: #4b9af4;
 --calentim-occupiedBgColor: #f4504e;
 --calentim-specialPeriodsTriangleColor: #f4f100;
}
</style>

 

Triggers

De Calendar Widget vuurt de volgende triggers af:

booking:calendar:init Calendar widget is geïnitialiseerd
booking:calendar:load Calendar widget is geladen (benodigde html is gerenderd)
booking:calendar:ready Calendar widget is klaar om gebruikt te worden (na load)
booking:calendar:periods 

 De geselecteerde periode is getoond (na selecteren van aankomst en verblijf, bij showPeriod=true). De gegevens daarvan zitten in de trigger params.
booking:calendar:period

 Er is een periode geselecteerd, de reservering wordt gestart (bij showPeriod=false). De gegevens daarvan zitten in de trigger params.
booking:calendar:calentim:monthChanged 

 De Calentim-module heeft de kalender bijgewerkt, nadat naar een andere maand gebladerd is.
booking:calendar:clearSelection

 Wordt afgevuurd nadat op het reset-element (instelbaar in config) geklikt wordt. De Calentim-module gebruikt deze trigger om de reset uit te voeren.
booking:calendar:select:arrival Gast heeft aankomst geselecteerd. Trigger params bevat arrival
booking:calendar:select Gast heeft een periode geselecteerd. Trigger params bevatten arrival, duration en departure.
booking:calendar:deselect

 De Calentim-module heeft de kalender gereset en eventuele selecties ongedaan gemaakt.
booking:calendar:visible Wordt getriggerd na een update en geeft de nu zichtbare periode mee in zijn params (afh. van geselecteerde maand en aantal getoonde maanden).

 

De Calendar Widget maakt op de achtergrond gebruik van de Calentim Module. Ook op moduleniveau worden triggers afgevuurd. Gebruik deze echter nooit direct, maar altijd via de bijbehorende trigger van de widget zelf. Als er meerdere Calentim-gedreven widgets op de pagina staan, kan dit conflicten of ongewenste resultaten geven.

 

 

Verwante artikelen