تقویم رویدادها

نصب

1. با CLI

   اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.

   $ npx vibefarsi add event-calendar

2. نصب دستی

   محتوای تب «کد» را در components/calendar/event-calendar.tsx بگذارید. پیش‌نیاز: calendar-core، month-view، time-grid، agenda-view، segmented-control.

   $ npm i lucide-react
   کپی کل فایلregistry json

استفاده

1import { EventCalendar } from "@/components/calendar/event-calendar"23const [events, setEvents] = useState<CalendarEvent[]>(initial)45<EventCalendar6  events={events}7  defaultView="week"8  onSlotSelect={(start, end) => openNewEventDialog(start, end)}9  onEventClick={(e) => openEvent(e.id)}10  onEventChange={(e, start, end) =>11    setEvents((list) => list.map((x) => (x.id === e.id ? { ...x, start, end } : x)))12  }13/>

پراپ‌ها

نکته‌ها

• کلیک روی یک روز در نمای ماه همون روز را در نمای روز باز می‌کنه، مگه این‌که onDayClick بدید.
• هر نما جدا هم کامپوننت خودشه، پس اگه فقط نمای ماه لازم دارید MonthView را نصب کنید.