# Foglalások megjelenítése dinamikus naptárban

> A JetFormBuilderrel felvett foglalások kiírása a JetEngine Dynamic Calendar elemével: JetBooking lekérdezés, listázási sablon és naptár.

A JetEngine **Dynamic Calendar** elemével a korábban felvett foglalásokat naptárban jelenítheted meg a frontenden. Az elem egyszerű módban működik, a WooCommerce-szal és anélkül is. Szükséges bővítmények: JetEngine (egy bejegyzéstípussal, bejegyzésekkel, és bekapcsolt **Calendar** modullal), JetBooking, JetThemeCore és JetFormBuilder, elkészített foglalási űrlappal. Az oldalakat Elementorral vagy a blokkszerkesztővel építheted.

## 1. A JetBooking beállítása

1. A **Foglalások → Beállítások → Általános** fülön a **Foglalási mód** legyen az egyszerű mód, a **Foglalási példányok bejegyzéstípusa** pedig az a típus, amelynek a foglalásait mutatni szeretnéd (például „Ingatlanok”).
2. Az **Ütemezés** fülön állítsd be a hét napjaira és az időre vonatkozó szabályokat ([Időválasztó a be- és kijelentkezéshez](https://hub.hellowp.io/hu/plugins/jet-booking/foglalasi-urlap-idovalaszto/)).

## 2. JetEngine lekérdezés

1. A **JetEngine → Query Builder** oldalon kattints az **Add New** gombra.
2. A **Name** mezőbe írd a lekérdezés nevét (például „Foglalások lekérdezése”), a **Query Type** listából válaszd a „JetBooking Query” lehetőséget.
3. A **General** fülön a **Status** listából válaszd ki a mutatni kívánt foglalási állapotot (például „On hold”, „Pending”).
4. A **User ID** mezőnél kattints a **Dynamic Tag** ikonra, és válaszd a „Current user ID” makrót.
5. Mentsd az **Add Query / Update Query** gombbal.

## 3. A foglalási űrlap

Készíts űrlapot, vagy nyisd meg a meglévőt ([Foglalási űrlap](https://hub.hellowp.io/hu/plugins/jet-booking/foglalasi-urlap/)).

1. Vedd fel az adatgyűjtő mezőket (például keresztnév, vezetéknév, e-mail).
2. Vegyél fel egy **Check-in/check-out dates** mezőt: a **Field label** mezőben a felirata, a **Fields position** legyen „Inline”, a **Layout** pedig „Separate fields for check in and check out dates”. Állítsd be a dátumformátumot, az elválasztót és a hét első napját.
3. Az űrlap utólagos műveleteinél vedd fel az **Apartment Booking** műveletet: az **Apartment ID Field** mezőben válaszd a rejtett mezőt (például `property_id`), a **Check-in/Check-out Date Field** és az **E-mail Field** mezőben a megfelelő mezőket. A **DB columns map** résznél rendeld az űrlap mezőit az adatbázisoszlopokhoz (például az e-mail mezőt a **user_data** oszlophoz).
4. Mentsd az űrlapot (**Update**), és tedd a bejegyzéstípus egyedi oldalára a **JetForm** elemmel ([Foglalási naptár, dátumválasztó és az űrlap a tétel oldalán](https://hub.hellowp.io/hu/plugins/jet-booking/foglalasi-urlap-naptar-es-datumvalaszto/)).
5. A frontenden küldd el az űrlapot. A foglalás a **Foglalások → Foglalások** oldalon jelenik meg.

## 4. Listázási sablon (Listing item)

1. A **JetEngine → Listings/Components** oldalon kattints az **Add New Item** gombra.
2. A **Listing source** listából válaszd a „Query Builder” lehetőséget, a **Query** listából az elkészített lekérdezést. Add meg a sablon nevét, és a **Listing view** listából válaszd ki a szerkesztőt. A **Create Listing Item** gombbal hozd létre.
3. Húzz a sablonra **Dynamic Field** elemeket. Az első elem **Source** értéke „Post/Term/User/Object Data”, az **Object Field** a **JetBooking** csoportban a „Booking ID”.
4. Ismételd meg az elemet a „Check In Date” mezőre. A dátum formázásához kapcsold be a **Filter field output** kapcsolót, a **Callback** legyen „Format date”, a formátum például „F j, Y” (hónap, nap, év).
5. A „Check In Time” mezőre ugyanígy, a **Format** mezőben például „g:i,a” szöveggel.
6. A „Check Out Date” és a „Check Out Time” mezőt ugyanígy vedd fel.
7. Ha a foglalást a Google Naptárba is fel szeretnéd venni, tegyél a sablonra **Dynamic Link** elemet, és a **Source** listából válaszd a „JetBooking: Add booking to Google Calendar” lehetőséget.
8. A **Publish** gombbal mentsd.

## 5. A Dynamic Calendar elem

1. Hozz létre új egyedi oldalt, vagy nyisd meg azt, amelyet a lekérdezéshez használtál.
2. Húzd az oldalra a **Dynamic Calendar** elemet.
3. A **Listing** listában válaszd ki az elkészített listázási sablont, a **Group posts by** mezőnél pedig a „Booking date” lehetőséget.
4. Frissítsd az oldalt, és nézd meg a frontenden: a naptárban a foglalások a napokhoz rendezve látszanak.
5. Az „Add to Google Calendar” hivatkozásra kattintva a foglalás felkerül a Google Naptárba.