Full Calendar
shadcn-ui-full-calendar/full-calendarFreeBlock
A full calendar component for scheduling events.
Install it
npx shadcn@latest add https://calendar.jeraidi.dev/r/full-calendar.jsonSource
1"use client";23import type React from "react";4import { createContext, useContext, useState } from "react";5import { useLocalStorage } from "@/features/calendar/hooks";6import type { IEvent, IUser } from "@/features/calendar/interfaces";7import type { TCalendarView, TEventColor } from "@/features/calendar/types";89interface ICalendarContext {10 selectedDate: Date;11 view: TCalendarView;12 setView: (view: TCalendarView) => void;13 agendaModeGroupBy: "date" | "color";14 setAgendaModeGroupBy: (groupBy: "date" | "color") => void;15 use24HourFormat: boolean;16 toggleTimeFormat: () => void;17 setSelectedDate: (date: Date | undefined) => void;18 selectedUserId: IUser["id"] | "all";19 setSelectedUserId: (userId: IUser["id"] | "all") => void;20 badgeVariant: "dot" | "colored";21 setBadgeVariant: (variant: "dot" | "colored") => void;22 selectedColors: TEventColor[];23 filterEventsBySelectedColors: (colors: TEventColor) => void;24 filterEventsBySelectedUser: (userId: IUser["id"] | "all") => void;25 users: IUser[];26 events: IEvent[];27 addEvent: (event: IEvent) => void;28 updateEvent: (event: IEvent) => void;29 removeEvent: (eventId: number) => void;30 clearFilter: () => void;31}3233interface CalendarSettings {34 badgeVariant: "dot" | "colored";35 view: TCalendarView;36 use24HourFormat: boolean;37 agendaModeGroupBy: "date" | "color";38}3940const DEFAULT_SETTINGS: CalendarSettings = {41 badgeVariant: "colored",42 view: "day",43 use24HourFormat: true,44 agendaModeGroupBy: "date",45};4647const CalendarContext = createContext({} as ICalendarContext);4849export function CalendarProvider({50 children,51 users,52 events,53 badge = "colored",54 view = "day",55}: {56 children: React.ReactNode;57 users: IUser[];58 events: IEvent[];59 view?: TCalendarView;60 badge?: "dot" | "colored";61}) {62 const [settings, setSettings] = useLocalStorage<CalendarSettings>(63 "calendar-settings",64 {65 ...DEFAULT_SETTINGS,66 badgeVariant: badge,67 view: view,68 },69 );7071 const [badgeVariant, setBadgeVariantState] = useState<"dot" | "colored">(72 settings.badgeVariant,73 );74 const [currentView, setCurrentViewState] = useState<TCalendarView>(75 settings.view,76 );77 const [use24HourFormat, setUse24HourFormatState] = useState<boolean>(78 settings.use24HourFormat,79 );80 const [agendaModeGroupBy, setAgendaModeGroupByState] = useState<81 "date" | "color"82 >(settings.agendaModeGroupBy);8384 const [selectedDate, setSelectedDate] = useState(new Date());85// … truncated
What it pulls in
npm packages
Other registry items
