هسته‌ی تقویم
calendar-coreکامپوننت تقویمپایهی مشترک همه‌ی نماهای تقویم که منطقه‌ی زمانی، تعطیلات رسمی ایران، تاریخ قمری زیر هر روز، نوار ابزار، چیپ رویداد و ناوبری با کیبورد را یک‌جا فراهم می‌کنه.
هفته‌ی ۱۸ تا ۲۴
مهر ۱۴۰۵
۱۸۲۸
۱۹۲۹
۲۰۱
۲۱۲
۲۲۳
۲۳۴
۲۴۵
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.
$ npx vibefarsi add calendar-coreنصب دستی
محتوای تب «کد» را در
components/calendar/calendar-core.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { CalendarProvider } from "@/components/calendar/calendar-core"23// همه‌ی نماها بدون Provider هم کار می‌کنن. برای تنظیم مشترک:4<CalendarProvider timeZone="Asia/Tehran" secondary="hijri" weekend={[6]}>5 <MonthView events={events} />6 <AgendaView events={events} />7</CalendarProvider>پراپ‌ها
| پراپ | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| timeZone | string | "Asia/Tehran" | رویدادهای ساعت‌دار در این منطقه چیده میشن، حتی اگه مرورگر کاربر جای دیگه‌ای باشه. |
| occasions | OccasionProvider | false | iranOccasions | تعطیلات رسمی ایران به‌صورت پیش‌فرض روشنه. تابع خودتون را بدید تا از API بخونه، یا false تا خاموش بشه. |
| secondary | "hijri" | "gregorian" | null | "hijri" | تاریخ دومی که کوچک زیر هر روز شمسی می‌آد. |
| weekend | number[] | [6] | روزهای تعطیل هفته، ۰ شنبه و ۶ جمعه. برای پنجشنبه هم [5, 6] بدید. |
نکته‌ها
- روزها با کلید «YYYY-MM-DD» شناخته میشن و رویدادهای ساعت‌دار لحظه‌ی واقعی (Date) هستن، پس تقویم با هر بک‌اندی جور درمیاد.
- کلید جهت چپ روز بعد و جهت راست روز قبله، چون در راست‌چین روز بعد سمت چپ نشسته. PageUp و PageDown ماه را عوض می‌کنن.
- رنگ رویدادها همون --chart-1 تا --chart-7 نمودارهاست، پس با سیستم طراحی شما یکی میشن.