Reservation

Available Calender

Available Calender

View real-time availability and choose a time that works best for you!

— Select arrival time —

Availability Calendar — JavisTab Booking Pro
Tính năngFeatures

Mọi thứ bạn cần để
hiển thị lịch trống cho kháchEverything you need to
show guests live availability

7 tính năng thiết kế cho nhà hàng — hiển thị ngay trên website WordPress.7 features designed for restaurants — rendered directly on your WordPress site.

📅 Live

Xem ca trống theo ngàyLive Slot Availability by Date

Khách chọn ngày → REST API /rbp/v1/availability trả về danh sách ca với số bàn còn trống. Mặc định là ngày hôm nay, tự load khi page load. Guest selects a date → REST API /rbp/v1/availability returns all slots with available table count. Defaults to today and auto-loads on page load.

🌞🌙 UI

Icon Ca Trưa / Ca TốiLunch / Dinner Icons

Ca trưa hiển thị 🌞, ca tối hiển thị 🌙. Tên ca, giờ bắt đầu và loại slot hiển thị riêng biệt giúp khách dễ dàng nhận biết. Lunch slots show 🌞, dinner shows 🌙. Slot name, start time, and type are displayed separately for at-a-glance recognition.

🚫 Admin

Nhãn “fully booked” tuỳ chỉnhCustomisable “Full” Label

Cấu hình nhãn hiển thị khi ca hết bàn trong Settings (full_slot_label). Mặc định “fully booked”. Card ca hết bàn đổi màu đỏ với CSS .rbp-slot-card.full. Configure the label shown when a slot is full in Settings (full_slot_label). Default “fully booked”. Full slot cards turn red via CSS .rbp-slot-card.full.

🔢 Live

2 chế độ sức chứa2 Capacity Modes

by_tables: đếm bàn trống. by_guests: đếm tổng khách trong ca (lý tưởng cho buffet). Cấu hình trong Settings → capacity_check_mode. by_tables: counts available tables. by_guests: tracks total guest count per slot (ideal for buffets). Configured via Settings → capacity_check_mode.

📡 API

REST API tích hợp sẵnBuilt-in REST API

Endpoint GET /wp-json/rbp/v1/availability?restaurant_id=&date= trả về JSON array các slot. Có thể dùng độc lập để tích hợp với app mobile hoặc dashboard riêng. Endpoint GET /wp-json/rbp/v1/availability?restaurant_id=&date= returns a JSON array of slots. Can be used standalone to integrate with mobile apps or custom dashboards.

⚡ UX

Load tức thì khi đổi ngàyInstant Load on Date Change

Khi khách chọn ngày mới, JS gọi API ngay lập tức — không reload trang. Loading state hiện “Loading…”, sau đó render danh sách slot card mượt mà. When guests pick a new date, JS calls the API immediately — no page reload. Shows “Loading…” state, then renders slot cards smoothly.

📌 Core

Nhúng bằng shortcodeShortcode Embed

Paste [rbp_availability-calendar] vào bất kỳ trang nào. Hỗ trợ restaurant_id cho multi-restaurant. Tự giới hạn ngày tối đa theo max_advance_days. Paste [rbp_availability-calendar] on any page. Supports restaurant_id for multi-restaurant. Automatically caps max selectable date via max_advance_days.

Giao diệnVisual Demo

Slot cards theo từng caSlot cards per time slot

Mỗi ca hiển thị tên, giờ, loại (trưa/tối), và số bàn còn trống hoặc trạng thái hết bàn. Each slot displays name, time, type (lunch/dinner), and available table count or full status.

Date: 2026-03-18
Chọn ngày để xem ca trống Select a date to view availability
Ca Trưa
Lunch
11:30
🌞 Ca trưaLunch
✅ Còn 5 bàn5 tables left
Ca Trưa 2
Lunch 2
13:00
🌞 Ca trưaLunch
🚫 fully booked
Ca Tối
Dinner
17:30
🌙 Ca tốiDinner
✅ Còn 8 bàn8 tables left
Ca Tối 2
Dinner 2
19:30
🌙 Ca tốiDinner
✅ Còn 3 bàn3 tables left
Ca Tối 3
Dinner 3
21:00
🌙 Ca tốiDinner
🚫 fully booked
Chế độ sức chứaCapacity Mode

2 chế độ kiểm tra sức chứa2 capacity check modes

Chọn chế độ phù hợp với mô hình nhà hàng của bạn — đặt bàn thông thường hoặc buffet. Choose the mode that fits your restaurant model — standard table booking or buffet-style.

🔲 by_tables

Chế độ theo bàn (Mặc định)By Tables Mode (Default)

Ca được coi là “hết” khi tất cả bàn available trong ca đó đã bị book (confirmed/seated). Phù hợp với nhà hàng à la carte thông thường. A slot is “full” when all available tables for that slot are booked (confirmed/seated). Best for standard à la carte restaurants.

Ví dụ:Example: 10 bàn, 7 bàn đã book → Còn 3 bàn. Khi 10/10 bàn book → “fully booked”. 10 tables, 7 booked → 3 available. When 10/10 booked → “fully booked”.
👥 by_guests

Chế độ theo khách (Buffet)By Guests Mode (Buffet)

Ca được coi là “hết” khi tổng số khách đã đặt đạt max_guests của ca đó. Lý tưởng cho buffet, brunch, set menu cố định — nơi sức chứa tính theo người. A slot is “full” when total booked guests reaches the slot’s max_guests cap. Ideal for buffets, brunches, fixed set menus — where capacity is counted per person.

Ví dụ:Example: max_guests = 80, đã có 74 khách → Còn sức chứa 6 người. Khi 80 khách → “fully booked”. max_guests = 80, 74 guests booked → 6 capacity remaining. When 80 guests reached → “fully booked”.
Quy trìnhHow it works

Từ shortcode đến slot cardsFrom shortcode to slot cards

1

Nhúng shortcode vào trangEmbed shortcode on a page

Paste [rbp_availability-calendar] vào trang. Plugin render date picker + vùng slot. Tự load slot của ngày hôm nay ngay khi trang mở. Paste [rbp_availability-calendar] on any page. Plugin renders the date picker + slot area. Auto-loads today’s slots on page load.

[rbp_availability-calendar]
2

Khách chọn ngàyGuest selects a date

Date picker bị giới hạn từ hôm nay đến max_advance_days ngày tới. Khi đổi ngày, JS gọi REST API ngay lập tức với ngày mới. Date picker is limited from today to max_advance_days ahead. On date change, JS immediately calls the REST API with the new date.

3

REST API tính toán sức chứaREST API calculates availability

RBP_Availability::get_daily_summary() trả về array slot. Mỗi slot có: tên, giờ, loại (lunch/dinner), số bàn/khách còn lại, và flag is_full. RBP_Availability::get_daily_summary() returns a slot array. Each slot includes: name, time, type (lunch/dinner), remaining tables/guests, and is_full flag.

4

JS render slot cardsJS renders the slot cards

Mỗi slot render thành .rbp-slot-card. Slot hết bàn thêm class .full. CSS tự đổi màu nền và cursor. Khách thấy ngay ca nào còn chỗ. Each slot renders as .rbp-slot-card. Full slots add class .full. CSS automatically changes background and cursor. Guests instantly see which slots are open.

REST API Response (ví dụ)REST API Response (example)

GET /wp-json/rbp/v1/availability?restaurant_id=1&date=2026-03-18 [ { “slot_id”: 1, “slot_name”: “Ca Trưa”, “start_time”: “11:30:00”, “end_time”: “14:00:00”, “slot_type”: “lunch”, “available”: 5, “total”: 10, “capacity_mode”: “by_tables”, “is_full”: false }, { “slot_id”: 2, “slot_name”: “Ca Tối”, “start_time”: “17:30:00”, “slot_type”: “dinner”, “available”: 0, “is_full”: true } ]
Kỹ thuậtTech Specs

Thông số kỹ thuậtTechnical Specifications

Thuộc tínhPropertyChi tiếtDetail
Shortcode[rbp_availability-calendar]  [rbp_availability-calendar restaurant_id=”N”]
REST EndpointGET /wp-json/rbp/v1/availability?restaurant_id=&date=
PHP methodRBP_Availability::get_daily_summary()
Capacity modesby_tables (default)  |  by_guests (buffet)
Giới hạn ngàyDate range limitTừ hôm nay đến max_advance_days ngày tới (Settings)From today to max_advance_days ahead (Settings)
Nhãn hết bànFull slot labelfull_slot_label — tuỳ chỉnh trong Settingscustomisable in Settings
CSS classes.rbp-slot-card / .rbp-slot-card.full
Response fieldsslot_id, slot_name, start_time, end_time, slot_type, available, total, total_capacity, max_guests, guests_booked, remaining_guests, bookings_count, capacity_mode, available_info, is_full
Cập nhậtUpdate methodReal-time qua fetch() — không reload trangReal-time via fetch() — no page reload
Plan requiredTất cả plan (Free Trial → Annual)All plans (Free Trial → Annual)

Powered by CookieAdmin