فارسی

انتخاب نوبت

رزرو نوبت با روزهای شمسی و ساعت‌های خالی هر روز؛ برای مطب، آرایشگاه، مشاوره و هر سرویس نوبت‌دهی. جمعه‌ها و تعطیلات رسمی بسته‌اند و نوبت‌های پر و گذشته غیرفعال.

npmpnpmyarnbun

npm i @kashi-ui/react @kashi-ui/css

import { AppointmentPicker } from "@kashi-ui/react";

CSS را یک بار در ریشهٔ برنامه وارد کنید: import "@kashi-ui/css"راهنمای نصب

npx shadcn@latest add @kashi/appointment-picker

کد خودِ کامپوننت در پوشهٔ components/kashi پروژهٔ شما کپی می‌شود. برای نسخه‌های قدیمی shadcn، راهنمای «دربارهٔ shadcn» را ببینید.دربارهٔ shadcn

npm i @kashi-ui/elements @kashi-ui/css

import "@kashi-ui/elements/appointment.js";

<kashi-appointment-picker></kashi-appointment-picker>

بدون React، برای HTML، وردپرس، Vue و Angular.CDN، نمونه و ویژگی‌ها

import { AppointmentPicker } from "@kashi-ui/react";

نمونه

روزها با تاریخ شمسی و تعداد نوبت خالی‌شان در یک ردیف می‌آیند و ساعت‌های همان روز در گروه‌های صبح، بعدازظهر و عصر. جمعه‌ها و تعطیلات رسمی ثابت بسته‌اند، نوبت‌های پرشده خط خورده‌اند و ساعت‌هایی از امروز که گذشته‌اند قابل انتخاب نیستند.

انتخاب نوبت

صبح

بعدازظهر

هنوز نوبتی انتخاب نشده

const [visit, setVisit] = useState<AppointmentValue | null>(null);

<AppointmentPicker
value={visit}
onChange={setVisit}
from="09:00"
to="17:00"
step={30}
booked={{ "2026-11-04": ["09:30", "10:00"] }}
name="visit"
/>

با from، to و step ساعت کاری و طول هر نوبت را بدهید و نوبت‌های پرشده را با booked (کلید تاریخ میلادی YYYY-MM-DD). با name دو فیلد visit_date و visit_time در فرم HTML ارسال می‌شوند.

ساعت‌های دلخواه هر روز

اگر ساعت‌ها هر روز فرق می‌کنند (نیمه‌وقت پنجشنبه، استراحت ظهر، چند پزشک)، getSlots را بدهید. برای هر روز فهرست ساعت‌ها را برمی‌گرداند؛ هر ساعت یک رشته یا { time, available } است.

نوبت مشاوره

صبح

عصر

<AppointmentPicker
label="نوبت مشاوره"
days={10}
getSlots={(date) =>
  date.getDay() === 4
    ? ["09:00", "10:00", "11:00"]
    : ["09:00", "10:00", "11:00", "17:00", "18:00", { time: "19:00", available: false }]
}
/>

روزهای تعطیل را با closed عوض کنید: false برای باز بودن همهٔ روزها، یا تابعی مثل (d) => d.getDay() === 4 برای تعطیلی پنجشنبه‌ها. تابع appointmentSlots هم جدا در دسترس است تا همان ساعت‌ها را در سرور حساب کنید.

ویژگی‌ها

ویژگی‌ها (props)
نام	توضیح، نوع و پیش‌فرض
`value / defaultValue`	نوبت انتخاب‌شده نوع: `{ date: Date; time: string }null`
`onChange`	با انتخاب هر ساعت نوع: `(value) => void`
`start`	اولین روز نوع: `Date`پیش‌فرض `امروز`
`days`	تعداد روزهای قابل انتخاب نوع: `number`پیش‌فرض `7`
`from / to`	ساعت شروع و پایان کار نوع: `string`پیش‌فرض `"09:00" / "17:00"`
`step`	طول هر نوبت به دقیقه نوع: `number`پیش‌فرض `30`
`booked`	نوبت‌های پرشده؛ کلید YYYY-MM-DD نوع: `Record<string, string[]>`
`getSlots`	ساعت‌های هر روز به‌جای from، to، step و booked نوع: `(date: Date) => (string \| AppointmentSlot)[]`
`closed`	روزهای تعطیل؛ true یعنی جمعه‌ها و تعطیلات رسمی ثابت نوع: `boolean(date: Date) => boolean`پیش‌فرض `true`
`label`	برچسب و نام گروه نوع: `string`پیش‌فرض `"انتخاب نوبت"`
`name`	فیلدهای name_date و name_time در فرم نوع: `string`
`digits`	خط ارقام نوع: `"fa""latin"`پیش‌فرض `"fa"`

دسترس‌پذیری

روزها و ساعت‌ها گروه‌های رادیویی‌اند (role="radiogroup") با فوکوس گردشی: فقط یک گزینه در ترتیب Tab است و کلیدهای جهت بین بقیه حرکت می‌کنند؛ در راست‌به‌چپ، فلش چپ یعنی گزینهٔ بعد.
صفحه‌خوان هر روز را با تاریخ کامل و وضعیتش می‌خواند: «سه‌شنبه ۱۳ آبان ۱۴۰۵، ۶ نوبت خالی» یا «تعطیل».
نوبت انتخاب‌شده در یک ناحیهٔ زنده (aria-live) اعلام می‌شود.
نوبت پر فقط با خط‌خوردگی نشان داده نمی‌شود؛ غیرفعال است و صفحه‌خوان «پر» را می‌خواند.

وب کامپوننت

همین کامپوننت بدون React، برای HTML، وردپرس، Vue، Svelte و Angular: <kashi-appointment-picker> در @kashi-ui/elements. با name دو فیلد visit_date و visit_time ارسال می‌شوند؛ ساعت‌های دلخواه هر روز با element.getSlots.

نصب

بدون ابزار ساخت، این دو خط را در <head> صفحه بگذارید:

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kashi-ui/css/dist/kashi.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@kashi-ui/elements/dist/cdn/kashi-elements.js"></script>

یا با npm، و فقط همین بخش را وارد کنید:

npm

npm i @kashi-ui/elements @kashi-ui/css

import "@kashi-ui/css";
import "@kashi-ui/elements/appointment.js";

نمونه

<kashi-appointment-picker name="visit" from="09:00" to="17:00" step="30" booked='{"2026-11-04": ["09:30", "10:00"]}'></kashi-appointment-picker>

ویژگی‌ها

ویژگی‌های وب کامپوننت
نام	توضیح، نوع و پیش‌فرض
`start`	اولین روز نوع: `YYYY-MM-DD`پیش‌فرض `امروز`
`days`	تعداد روزها نوع: `عدد`پیش‌فرض `7`
`from / to / step`	ساعت کاری و طول هر نوبت نوع: `HH:MM / دقیقه`پیش‌فرض `09:00 / 17:00 / 30`
`booked`	نوبت‌های پر: {"2026-11-04": ["09:30"]} نوع: `JSON`
`closed`	همهٔ روزها باز، حتی جمعه و تعطیلات نوع: `false`
`value`	نوبت اولیه نوع: `«2026-11-04 10:30»`
`label / name / digits`	برچسب، نام فرم و خط ارقام پیش‌فرض `انتخاب نوبت`

رویدادها و JavaScript

نام	توضیح
`kashi-change`	detail: { date: "YYYY-MM-DD", time, value }
`element.getSlots`	(date) => ["09:00", { time, available }]
`element.isClosed`	(date) => boolean برای روزهای تعطیل دلخواه
`element.value`	{ date, time }