Available Calender
View real-time availability and choose a time that works best for you!
Select a date to view availability…
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Từ shortcode đến slot cardsFrom shortcode to slot cards
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.
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.
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.
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)
Thông số kỹ thuậtTechnical Specifications
| Thuộc tínhProperty | Chi tiếtDetail |
|---|---|
| Shortcode | [rbp_availability-calendar] [rbp_availability-calendar restaurant_id=”N”] |
| REST Endpoint | GET /wp-json/rbp/v1/availability?restaurant_id=&date= |
| PHP method | RBP_Availability::get_daily_summary() |
| Capacity modes | by_tables (default) | by_guests (buffet) |
| Giới hạn ngàyDate range limit | Từ 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 label | full_slot_label — tuỳ chỉnh trong Settingscustomisable in Settings |
| CSS classes | .rbp-slot-card / .rbp-slot-card.full |
| Response fields | slot_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 method | Real-time qua fetch() — không reload trangReal-time via fetch() — no page reload |
| Plan required | Tất cả plan (Free Trial → Annual)All plans (Free Trial → Annual) |