Appointment Calendar / Schedule Page


- Appointment Calendar / Schedule Page — Full Description (biz1)

 



- What This Page Is — In One Sentence
 

The Appointment Calendar Page is biz1’s real-time scheduling command center — a dynamic, filterable calendar that visually connects branches, team members, rooms, resources, and appointment types into one intelligent schedule.


It is where:
 

  • admins and staff see appointments at a glance,

  • new bookings are created,

  • availability is managed,

  • conflicts are prevented, and

  • all branch/team configurations come to life.
     

If the Settings modals define the rules, this page is where those rules are executed visually.
 



- Where You Find It
 

You typically reach this page from:
 

Dashboard → Appointments → Calendar / Schedule
 

Technically, it loads inside the dashboard at URLs such as:
 

  • dashboard/admin/settings (appointment area), or

  • a dedicated “Go to meeting calendar” view.
     

If the Branches module is enabled, the calendar becomes branch-aware; if not, the system behaves as a single-location scheduler.
 



- Page Structure — Big Picture
 

The page is divided into two major areas:
 

  1. Left Sidebar — Control & Filters

  2. Main Calendar Area — Visual Schedule
     

These two parts constantly talk to each other:
 

  • what you select on the left changes what you see on the right.
     



- Part 1 — Left Sidebar (Control Panel)
 

The left sidebar is your navigation and filtering hub.
 


- Top Action Buttons
 

- ADD COUPONS

Appears only when branches are enabled. Opens a modal to create and manage appointment coupons.
 

- NEW APPOINTMENT

Opens the booking modal where you choose:
 

  • customer,

  • branch,

  • room,

  • team member,

  • appointment type,

  • date and time.
     

This is the primary way staff create bookings manually.
 



- Mini Calendar (Date Picker)
 

A compact monthly calendar lets you:
 

  • click any day to jump to it in the schedule,

  • visually browse dates without losing context.
     

The selected date is stored in a hidden field (#my_hidden_input_date) and used by the system when loading the schedule.
 



- TEAM MEMBER Section
 

This is a live, dynamic list of all appointment providers (doctors, consultants, staff).
 

You see:
 

  • profile image or initials,

  • name,

  • working hours (e.g. “06:30 – 17:45”).
     

If you are an owner or admin, you also see an “All” button to view the schedule for everyone at once.
 

Selecting a team member filters the calendar to show only their appointments and availability.
 

This list comes from:
 

  • doctor_appointments (appointment settings), and

  • user_detail (user names and profile images).
     



- Appointment Group Filter
 

Below the team list, you see appointment groups (e.g. “Consultations”, “Therapy”, “Checkups”).
 

Clicking a group filters the calendar to show only related appointment types.
 

This connects directly to:
 

  • Appointment Groups defined in the 5-step Appointment Settings modal.
     



- Part 2 — Main Area (The Schedule Grid)
 

This is where scheduling becomes visual.
 

- Top Controls & Filters
 

At the top of the calendar you have powerful controls:
 

View Selector — WEEKLY / DAILY / MONTHLY
 

You can switch between:
 

  • Weekly view (most common),

  • Daily view (detailed single-day planning),

  • Monthly view (high-level overview).
     

Arrow buttons let you move forward/back in time.
 



Branch Dropdown (If branches are on)
 

A dropdown lists all branches (e.g. “Branch 1”, “Downtown Clinic”, etc.).
 

When you select a branch:
 

  • the calendar reloads,

  • only that branch’s rooms appear,

  • only team members assigned to that branch are shown.
     

This value is sent in API calls as branch_id.
 



Appointment Type Filter
 

A dropdown lets you filter by appointment type (e.g. “Skin Care Treatment”, “Consultation”).
 

These options come from doctor_appointments_type and are dynamically filtered based on the selected branch.
 



Date Range Display
 

Shows the currently visible range, for example:

“1 Feb 2026 – 7 Feb 2026” (weekly view).
 



Search by Customer Name
 

You can type a customer’s name to instantly filter the grid to show only their appointments.
 



Export Button
 

Allows staff to export the visible schedule (e.g. to Excel) for reporting or offline use.
 



Settings & Tools
 

Gear icons provide quick access to:
 

  • Block time for a doctor,

  • General appointment settings,

  • Help/info tooltips.
     



Service / Specialty Tags
 

Clickable tags (e.g. “Nose surgery”, “Skin care”) act as quick filters to show only matching appointments.
 



Resource & Status Tabs
 

At the top you may also see tabs such as:
 

  • All Resources

  • Available Slots

  • Waiting List
     

These help switch between normal schedule, open availability, and pending/waiting appointments.
 



- The Schedule Grid — How It Works
 

The main grid is structured like this:
 

Rows = Time Slots
 

On the left you see time labels such as:
 

  • 06:30

  • 07:00

  • 07:30

  • 08:00
     

These come from branch working hours.
 



Columns = Days + Rooms
 

Each day (Sun, Mon, Tue, etc.) is divided into columns for that branch’s rooms:
 

  • Room 1

  • Room 2

  • Room 3

  • Room 4
     

These rooms come directly from:

branches.appointment_room (JSON list of room IDs).
 



Appointment Blocks
 

Each booked appointment appears as a colored block in the grid showing:
 

  • cust: Customer name

  • doc: Team member / doctor

  • pe: Procedure / appointment type
     

Colors or icons may indicate:
 

  • confirmed,

  • pending,

  • canceled,

  • waiting list, etc.
     

All these blocks are loaded from the table:

doctor_appointment_for_cust, filtered by:
 

  • branch,

  • date range,

  • team member,

  • appointment type,

  • customer search.
     



- Branch Settings — What They Mean on the Calendar
 

Branches are configured in:
 

Settings → Branches (3-step modal)
 

Each branch defines:
 

  • name,

  • address,

  • working days and times,

  • which team members work there,

  • which rooms belong to the branch,

  • which resources are available,

  • holidays or closed days.
     

On the calendar, this means:
 

  • You can only see rooms that belong to the selected branch.

  • You can only filter by team members assigned to that branch.

  • Working hours of the grid follow the branch’s schedule.

  • Holidays may show as blocked days.
     

In short:
 

Branch settings define the physical and operational boundaries of the calendar.

 


 


- Team Member Settings — What They Mean on the Calendar
 

Team members are configured in:
 

Settings → Appointment → Step 1 (Team Members)
 

Each team member has:
 

  • global working days/hours,

  • branch-specific working days/hours,

  • blocked times (when they are unavailable).
     

On the calendar, this means:
 

  • If a doctor is not working on a given day, their slots appear blocked.

  • If they are blocked from 12:00–13:00, that time cannot be booked.

  • If they are not assigned to a branch, they do not appear in that branch’s filter.
     

So:
 

Team member settings control availability. Branch settings control location.

 


 


- How Branches, Team Members, Rooms, and Types Connect
 

Here is the relationship in plain language:
 

  1. A branch has:
     

    • specific rooms,

    • specific team members.
       

  2. An appointment type defines:
     

    • which doctors can perform it,

    • at which branch.
       

  3. A team member has:
     

    • working hours per branch,

    • blocked times per branch.
       

  4. Every appointment record always includes:
     

    • branch,

    • room,

    • doctor,

    • appointment type,

    • customer,

    • date and time.
       

This ensures consistency:
 

  • You cannot book a doctor in a branch where they do not work.

  • You cannot book a room that does not belong to that branch.

  • You cannot book a service with a doctor who does not perform that type.
     



Appointment APIs — How External Systems Use This Page
 

The same logic you see visually is exposed via APIs.
 



1) Get Available Appointment Slots
 

Used by:
 

  • booking widgets,

  • websites,

  • mobile apps,

  • external CRMs.
     

Endpoint:
 

POST /dashboard/api/get_available_appointment
 

Typical parameters:
 

  • token (API token),

  • branch,

  • appointment_type,

  • doctor_id,

  • from (date),

  • to (date),

  • optional max.
     

The system calculates free slots using:
 

  • branch working hours,

  • doctor working hours,

  • blocked times,

  • existing appointments.
     

Response:
 

{ "success": true, "available_slots": ["2025-05-06 07:00", "2025-05-06 07:15"] }
 



2) Create (Add) Appointment via API
 

Used to book appointments programmatically.
 

Endpoint:
 

POST /dashboard/api/api_add_appointment
 

Common parameters:
 

  • token

  • cust_id (or new customer details)

  • appointment_branch_id

  • appointment_room_id

  • doctor_id

  • appointments_type_data_id

  • date

  • start_time

  • end_time
     

The API validates:
 

  • room belongs to branch,

  • doctor works at that branch,

  • doctor can perform that appointment type,

  • slot is actually available.
     



3) Approve Appointment (Customer Approval)
 

Used when a customer confirms their appointment.
 

Endpoint:
 

POST /dashboard/api/approved_appointment
 

Parameters:
 

  • token

  • appointment_id
     

What it does:
 

  • Marks the appointment as approved by customer.

  • Can trigger automation workflows.
     

Response:
 

{ "success": true, "message": "Appointment approved" }
 



4) Get Available Time of Doctor (Single Day)

Used when you need available slots for one specific date.
 

Endpoint:
 

POST /dashboard/api/get_available_time_of_doctor
 

Parameters:
 

  • token

  • branch

  • appointment_type

  • date

  • data_time (slot length in minutes)

  • optional: doctor_id, room_id
     

Response:
 

  • List of available time slots for that day.
     



5) Get Customer’s Appointment Booking List
 

Used to show a customer’s booking history.
 

Endpoint:
 

POST /dashboard/api/get_appointment_booking_list
 

Parameters:
 

  • token

  • user_id

  • cust_id OR phone

  • booking_type (upcoming / my_booking)
     

Response:
 

  • List of appointments + related types and branches.
     



6) Create Appointment (Auto Room/Doctor Selection)
 

Used when room and doctor are not specified.
 

Endpoint:
 

POST /dashboard/api/create_doctor_appointment_by_api
 

Parameters:
 

  • token

  • branch

  • cust_id

  • start_time

  • end_time

  • date

  • appointments_type_id
     

What it does:
 

  • Automatically selects a valid room and doctor.
     



7) Charge Appointment (Payment API)
 

Used when the appointment requires payment.
 

Endpoint:
 

POST /dashboard/api/charge_appointment
 

Parameters:
 

  • token

  • appointment_id

  • card_no

  • card_month

  • card_year

  • card_cvc

  • card_name
     

Response:

  • Payment success or failure message.
     



8) Reschedule Appointment
 

Used to change date/time (must be 24+ hours in advance).
 

Endpoint:
 

POST /dashboard/api/change_doctor_appointment_data_api
 

Parameters:
 

  • token

  • appointment_id

  • date

  • start_time

  • end_time
     



9) Permanent Delete Appointment
 

Used to completely remove an appointment.
 

Endpoint:
 

POST /dashboard/api/permenent_delete_doctor_appointment_api
 

Parameters:

 

  • token

  • appointment_id
     



10) Cancel Appointment
 

Two ways:
 

Mode 1 (by doctor + date + time + phone):
 

POST /dashboard/api/cancle_doctor_appointments_api
 

Parameters:
 

  • token

  • doctor

  • date

  • start_time

  • phone
     

Mode 2 (by appointment ID):
 

  • token

  • appointment_id

  • from_site=doctor_template
     



11) Get Available Slots (General Calendar, NOT Doctor Appointments)
 

Used for calendar events (appointments table, not doctor appointments).
 

Endpoint:
 

POST /dashboard/api/get_available_slot_calendar
 

Parameters:
 

  • token

  • max

  • from

  • to

  • preffer (morning/afternoon/evening/all)

  • duration
     



12) Get Available Dates for Meeting Rooms
 

Used for room availability (not appointment rooms).


Endpoint:
 

POST /dashboard/api/get_available_date_of_room
 

Parameters:
 

  • token

  • date (YYYY-MM)
     



13) Add Calendar Event (General Calendar)
 

Used to create a calendar event.
 

Endpoint:
 

POST /dashboard/api/add_calender_api
 

Parameters:
 

  • api_token

  • title

  • appoinment_color

  • appo_from

  • appo_to

  • appoiment_address

  • note

  • date

  • optional: phone, client_id
     



14) Get Booked Calendar Events for Customer
 

Used to retrieve calendar events (not doctor appointments).
 

Endpoint:
 

POST /dashboard/api/booked_calenders_for_customer
 

Parameters:
 

  • token

  • phone OR client_id
     



- Why This System Is Powerful
 

This calendar works because it unifies:
 

  • Branch rules (locations & rooms),

  • Team schedules (availability),

  • Service rules (appointment types),

  • Customer bookings,

  • Real-time visualization,

  • External integrations via API.
     

It prevents conflicts, reduces errors, and makes scheduling scalable.
 



✅ Final Functional Summary
 

The Appointment Calendar Page is:
 

  • A visual scheduler for staff,

  • A real-time availability engine for customers,

  • A rule-enforced booking system based on branch and team settings,

  • An API gateway for external booking systems.
     

In simple terms:
 

Settings define the rules.
The Calendar shows the result.
APIs allow the outside world to use it.


 

information_img