Alle Verfügbarkeiten kombiniert in einem Kalender.
Folgender Namespace muss im Templatefile gesetzt werden:
{namespace hapi=TYPO3\BhHapi\ViewHelpers}
{namespace hapi=TYPO3\BhHapi\ViewHelpers}
Attribute
| Name | Beschreibung | Type | default | required |
|---|---|---|---|---|
| hideOccupancy | Belegungsauswahl verstecken | bool | false | false |
| hideButtons | Anfrage- und Buchen-Buttons verstecken | bool | false | false |
Beispiel
html
<hapi:widget.global.datepicker hideOccupancy="1" hideButtons="1"/>
<!-- Bei Einbau des globalen Kalenders ins Bakehouse wird folgendes Script für die Synchronisierung des Datums und der Verfügbarkeit benötigt: -->
<script>
(function () {
window.addEventListener("hapi-script-load", () => {
hapiDateSyncNew();
});
hapiDateSyncNew();
})();
function hapiDateSyncNew() {
let handleDaterangeChangedFromWidget = function (e, daterange) {
if (daterange === null) {
Bh.hapi.clearGlobalDateRange();
} else {
Bh.hapi.setGlobalDateRange(
Bh.hapi.convertStringDatesToDateRange(
daterange.start,
daterange.end,
"YYYY-MM-DD",
),
);
}
};
if (window.hapiWidget) {
window.hapiWidget.addEventListener(
"daterange-changed",
handleDaterangeChangedFromWidget,
);
}
}
</script>
<!-- Um an anderen Stellen des Javascripts auf Änderungen des globalen Kalenders reagieren zu können, kann das Event hapi-date-changed-global verwendet werden. Hier muss aber immer überprüft werden, ob eine dateRange vorliegt. -->
<script>
$("body").on("hapi-date-changed-global", function (e, dateRange) {
if (dateRange) {
const newDateRange = Bh.hapi.convertDateRangeToStringDates(
dateRange,
"DD.MM.YYYY",
);
$arrival.val(newDateRange.start);
$departure.val(newDateRange.end);
} else {
$arrival.val("");
$departure.val("");
}
});
</script>