Skip to main content

Giao Diện Chọn Ngày & Giờ Đặt Lịch

Ngày cập nhật: 20/06/2026 | Cập nhật lần cuối: 30/06/2026
Ảnh feedback:

  1. Ảnh 1 - Màn hình "Chọn giờ" hiện tại
  2. Ảnh 2 - Giao diện Calendar dạng bảng tham khảo

Vấn Đề Hiện Tại​

Màn hình "Chọn giờ" hiện tại đang dùng dạng scroll ngang theo ngày (thanh T3/T4/T5... ở trên) kết hợp với lưới các ô khung giờ phía dưới.

Hạn chế:

  • Khách chỉ thấy được 5 ngày liên tiếp → khó có cái nhìn tổng quan về lịch.
  • Không trực quan, không thể biết ngày nào còn slot trống / đã hết chỗ.
  • Trải nghiệm chọn ngày không quen thuộc như lịch thông thường.

Yêu Cầu Thay Đổi​

Bước 1 — Màn hình chọn ngày: Hiển thị dạng Bảng Lịch (Calendar Grid)​

Thay thế thanh cuộn ngày ngang hiện tại bằng giao diện lịch dạng bảng đầy đủ (tham khảo ảnh 2):

Giao diện Calendar dạng bảng tham khảo

Yếu tốYêu cầu
Header tháng/nămHiển thị tháng + năm hiện tại, có nút < > để chuyển tháng
Tiêu đề thứHàng đầu ghi thứ: CN / T2 / T3 / T4 / T5 / T6 / T7
Ngày hiện tạiĐược highlight/khoanh viền để dễ nhận biết
Ngày đã chọnHighlight màu cam (tone màu thương hiệu)
Ngày quá khứHiển thị mờ (disabled), không thể chọn
Ngày vượt 30 ngày tớiHiển thị mờ (disabled), không thể chọn — theo cấu hình Admin
Ngày hết slot(Tùy chọn nâng cao) Có thể đánh dấu riêng nếu API hỗ trợ
Auto-scroll (loop)Thanh ngày cuộn vô hạn (infinite loop) — tự động chạy qua lại liên tục, không dừng lại ở đầu/cuối

⚠️ Cập nhật 30/06/2026 — Yêu cầu Auto-scroll cho thanh ngày:

Thanh hiển thị ngày (date strip) phía trên Calendar Grid cần chạy tự động qua lại (auto-scroll / carousel loop):

  • Tốc độ cuộn: chậm, mượt mà (không giật cục).
  • Hướng: trái → phải → trái → (lặp vô hạn).
  • Khi người dùng chạm/kéo: dừng auto-scroll, cho phép cuộn tay; sau khi thả tay thì tiếp tục auto-scroll sau 2–3 giây.
  • Ngày đang được chọn luôn nằm trong vùng hiển thị (scroll to active).

Kỹ thuật tham khảo React Native:

// Dùng FlatList với useEffect setInterval cuộn tự động
// hoặc thư viện react-native-snap-carousel với loop={true} + autoplay={true}

Bước 2 — Sau khi chọn ngày: Popup chọn Khung Giờ​

Khi khách click vào một ô ngày hợp lệ trên lịch → mở Popup / Bottom Sheet hiển thị các khung giờ còn trống trong ngày đó.

Giao diện popup (giữ nguyên design lưới giờ hiện tại, chỉ thay cơ chế mở):

Màn hình &quot;Chọn giờ&quot; hiện tại

Yếu tốYêu cầu
Header popupHiển thị ngày đã chọn: Thứ X, DD/MM/YYYY
Khung giờLấy từ cấu hình giờ làm việc Admin CMS (VD: 10:00–20:00, bước nhảy 30 phút)
Giờ đã quaNếu là ngày hôm nay → disable các khung giờ đã qua
Giờ đã được đặtHiển thị mờ / gạch ngang, không thể chọn
Giờ được chọnHighlight màu cam, nổi bật
Nút Xác nhậnChỉ active khi đã chọn đủ ngày + giờ
Đóng popupVuốt xuống (swipe down) hoặc nhấn ngoài vùng popup

Luồng UX Hoàn Chỉnh​

[Màn hình đặt lịch]
        ↓
[Nhấn vào trường "Chọn ngày & giờ"]
        ↓
[Mở màn hình Calendar dạng bảng lịch]
        ↓
[Khách nhấn vào ô ngày muốn đặt]
        ↓
[Popup / Bottom Sheet hiện ra với các khung giờ còn trống]
        ↓
[Khách chọn khung giờ → Nhấn "Xác nhận"]
        ↓
[Quay về form đặt lịch, hiển thị ngày + giờ đã chọn]

Cấu Hình Admin CMS Liên Quan​

Cấu hìnhMô tả
Giờ mở cửa / đóng cửaXác định khung giờ hiển thị trong popup (VD: 09:00 – 20:00)
Bước nhảy khung giờ30 phút / 60 phút (Admin cấu hình)
Số ngày đặt trước tối đaMặc định 30 ngày — Admin có thể điều chỉnh
Ngày nghỉ / ngày không làmAdmin có thể cấu hình ngày đóng cửa → disabled trên lịch

Ghi Chú Bổ Sung​

  • Giao diện Calendar nên nhất quán với phần chọn ngày trong các màn hình khác của App (nếu có).
  • Trên iOS cần đặc biệt lưu ý hiệu ứng mở Bottom Sheet phải mượt mà.
  • Ưu tiên không block toàn màn hình khi chọn giờ — dùng Bottom Sheet thay vì Full-screen modal để UX tự nhiên hơn.