@campxdev/react-blueprint 2.2.3 → 2.2.5

package/dist/esm/types/src/components/Navigation/Calendar/Calendar.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CalendarProps } from './types';
+export declare const Calendar: React.FC<CalendarProps>;

package/dist/esm/types/src/components/Navigation/Calendar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Calendar';
+export * from './types';
+export * from './utils';

package/dist/esm/types/src/components/Navigation/Calendar/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const StyledCalendarContainer: import("@mui/styled-engine").StyledComponent<import("@mui/material").StackOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("@types/react").DetailedHTMLProps<import("@types/react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("@types/react").Ref<HTMLDivElement>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/material").StackOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    height?: string | number;
+    aspectRatio?: number;
+}, {}, {}>;
+export declare const StyledCalendarWrapper: import("@mui/styled-engine").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("@types/react").DetailedHTMLProps<import("@types/react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("@types/react").Ref<HTMLDivElement>;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/esm/types/src/components/Navigation/Calendar/types.d.ts

@@ -0,0 +1,90 @@
+import { EventApi } from '@fullcalendar/core';
+import { StackProps } from '@mui/material';
+export interface CalendarEvent {
+    id: string | number;
+    title: string;
+    start: Date | string;
+    end?: Date | string;
+    allDay?: boolean;
+    backgroundColor?: string;
+    borderColor?: string;
+    textColor?: string;
+    extendedProps?: {
+        [key: string]: any;
+    };
+}
+export interface CalendarEventClickInfo {
+    event: EventApi;
+    jsEvent: MouseEvent;
+    view: any;
+}
+export interface CalendarDateSelectInfo {
+    start: Date;
+    end: Date;
+    allDay: boolean;
+    jsEvent: MouseEvent;
+    view: any;
+}
+export interface CalendarEventDropInfo {
+    event: EventApi;
+    delta: any;
+    revert: () => void;
+    jsEvent: Event;
+    view: any;
+}
+export interface CalendarEventResizeInfo {
+    event: EventApi;
+    startDelta: any;
+    endDelta: any;
+    revert: () => void;
+    jsEvent: Event;
+    view: any;
+}
+export interface CalendarDateClickInfo {
+    date: Date;
+    dateStr: string;
+    allDay: boolean;
+    dayEl: HTMLElement;
+    jsEvent: MouseEvent;
+    view: any;
+}
+export type CalendarView = 'dayGridMonth' | 'timeGridWeek' | 'timeGridDay' | 'listWeek';
+export interface CalendarHeaderToolbar {
+    left?: string;
+    center?: string;
+    right?: string;
+}
+export interface CalendarProps {
+    events?: CalendarEvent[];
+    onEventClick?: (eventInfo: CalendarEventClickInfo) => void;
+    onEventDrop?: (eventInfo: CalendarEventDropInfo) => void;
+    onEventResize?: (eventInfo: CalendarEventResizeInfo) => void;
+    onDateClick?: (dateInfo: CalendarDateClickInfo) => void;
+    onDateSelect?: (selectInfo: CalendarDateSelectInfo) => void;
+    onEventsSet?: (events: EventApi[]) => void;
+    initialView?: CalendarView;
+    views?: CalendarView[];
+    headerToolbar?: CalendarHeaderToolbar | boolean;
+    editable?: boolean;
+    selectable?: boolean;
+    selectMirror?: boolean;
+    eventResizable?: boolean;
+    eventDraggable?: boolean;
+    dayMaxEvents?: boolean | number;
+    height?: string | number;
+    aspectRatio?: number;
+    containerProps?: StackProps;
+    locale?: string;
+    timezone?: string;
+    firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    eventContent?: (eventInfo: any) => React.ReactNode;
+    dayCellContent?: (dayInfo: any) => React.ReactNode;
+    showNavigationButtons?: boolean;
+    showViewSwitcher?: boolean;
+    showToday?: boolean;
+    calendarRef?: React.RefObject<any>;
+    weekends?: boolean;
+    businessHours?: any;
+    eventConstraint?: any;
+    selectConstraint?: any;
+}

package/dist/esm/types/src/components/Navigation/Calendar/utils.d.ts

@@ -0,0 +1,55 @@
+import { CalendarEvent } from './types';
+/**
+ * Generate recurring events based on a pattern
+ */
+export interface RecurringEventConfig {
+    title: string;
+    startTime: string;
+    endTime: string;
+    startDate: Date;
+    endDate?: Date;
+    daysOfWeek?: number[];
+    interval?: number;
+    backgroundColor?: string;
+    extendedProps?: {
+        [key: string]: any;
+    };
+}
+export declare const generateRecurringEvents: (config: RecurringEventConfig, maxEvents?: number) => CalendarEvent[];
+/**
+ * Generate sample business events for demonstration
+ */
+export declare const generateBusinessEvents: (startDate?: Date) => CalendarEvent[];
+/**
+ * Filter events by date range
+ */
+export declare const filterEventsByDateRange: (events: CalendarEvent[], startDate: Date, endDate: Date) => CalendarEvent[];
+/**
+ * Group events by date
+ */
+export declare const groupEventsByDate: (events: CalendarEvent[]) => {
+    [date: string]: CalendarEvent[];
+};
+/**
+ * Calculate event statistics
+ */
+export interface EventStats {
+    totalEvents: number;
+    eventsThisWeek: number;
+    eventsThisMonth: number;
+    averageEventsPerDay: number;
+    mostBusyDay: string;
+    leastBusyDay: string;
+}
+export declare const calculateEventStats: (events: CalendarEvent[]) => EventStats;
+/**
+ * Convert events to different formats
+ */
+export declare const exportEventsToCSV: (events: CalendarEvent[]) => string;
+/**
+ * Validate event data
+ */
+export declare const validateEvent: (event: Partial<CalendarEvent>) => {
+    isValid: boolean;
+    errors: string[];
+};

package/dist/esm/types/src/components/Navigation/export.d.ts

@@ -1,5 +1,6 @@
 export * from '../Layout/PageHeader/components/TableColumnsSelector/TableColumnsSelector';
 export * from './Breadcrumbs/Breadcrumbs';
+export * from './Calendar';
 export * from './ConfirmDialog/ConfirmDialog';
 export * from './Dialog/Dialog';
 export * from './DialogButton/DialogButton';

package/dist/esm/types/src/stories/Navigation/Calendar.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { Calendar } from '../../components/Navigation/Calendar/Calendar';
+declare const meta: Meta<typeof Calendar>;
+export default meta;
+type Story = StoryObj<typeof Calendar>;
+export declare const Default: Story;
+export declare const MonthView: Story;
+export declare const WeekView: Story;
+export declare const DayView: Story;
+export declare const StudentCalendar: Story;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import react__default, { ReactNode, MouseEvent, FC, ReactElement } from 'react';
+import react__default, { ReactNode, MouseEvent as MouseEvent$1, FC, ReactElement } from 'react';
 import * as _mui_material from '@mui/material';
 import { SxProps, AccordionProps as AccordionProps$1, AvatarProps, TypographyOwnProps, TypographyProps as TypographyProps$1, AlertProps as AlertProps$1, SnackbarProps as SnackbarProps$1, TooltipProps as TooltipProps$1, ButtonProps as ButtonProps$1, StackProps, TextFieldProps as TextFieldProps$1, RadioGroupProps as RadioGroupProps$1, FormControlLabelProps, CheckboxProps as CheckboxProps$1, AutocompleteProps, SwitchProps as SwitchProps$1, BoxProps, MenuProps, MenuListProps, BreadcrumbsProps as BreadcrumbsProps$1, DialogProps as DialogProps$1, IconButtonProps, MenuItemProps, TabProps, TabsProps } from '@mui/material';
 import { LayoutType } from 'recharts/types/util/types';
@@ -20,6 +20,7 @@ import { DatePickerProps as DatePickerProps$1 } from '@mui/x-date-pickers/DatePi
 import { FieldValues, Control } from 'react-hook-form';
 import { BaseSelectProps } from '@mui/material/Select';
 import { TimePickerProps as TimePickerProps$1 } from '@mui/x-date-pickers/TimePicker';
+import { EventApi } from '@fullcalendar/core';
 import * as redux from 'redux';
 
 declare const AnimatedGIFs: {
@@ -70,7 +71,7 @@ interface IconProps {
     size?: number;
     hoverColor?: string;
     disabled?: boolean;
-    onClick?: (event: MouseEvent<Element>) => void;
+    onClick?: (event: MouseEvent$1<Element>) => void;
 }
 type IconComponent = FC<IconProps>;
 type IconsType = {
@@ -1203,6 +1204,152 @@ type BreadcrumbsProps = {
 } & BreadcrumbsProps$1;
 declare const Breadcrumbs: ({ pathTrimCount, containerProps, actions, ...rest }: BreadcrumbsProps) => react_jsx_runtime.JSX.Element;
 
+interface CalendarEvent {
+    id: string | number;
+    title: string;
+    start: Date | string;
+    end?: Date | string;
+    allDay?: boolean;
+    backgroundColor?: string;
+    borderColor?: string;
+    textColor?: string;
+    extendedProps?: {
+        [key: string]: any;
+    };
+}
+interface CalendarEventClickInfo {
+    event: EventApi;
+    jsEvent: MouseEvent;
+    view: any;
+}
+interface CalendarDateSelectInfo {
+    start: Date;
+    end: Date;
+    allDay: boolean;
+    jsEvent: MouseEvent;
+    view: any;
+}
+interface CalendarEventDropInfo {
+    event: EventApi;
+    delta: any;
+    revert: () => void;
+    jsEvent: Event;
+    view: any;
+}
+interface CalendarEventResizeInfo {
+    event: EventApi;
+    startDelta: any;
+    endDelta: any;
+    revert: () => void;
+    jsEvent: Event;
+    view: any;
+}
+interface CalendarDateClickInfo {
+    date: Date;
+    dateStr: string;
+    allDay: boolean;
+    dayEl: HTMLElement;
+    jsEvent: MouseEvent;
+    view: any;
+}
+type CalendarView = 'dayGridMonth' | 'timeGridWeek' | 'timeGridDay' | 'listWeek';
+interface CalendarHeaderToolbar {
+    left?: string;
+    center?: string;
+    right?: string;
+}
+interface CalendarProps {
+    events?: CalendarEvent[];
+    onEventClick?: (eventInfo: CalendarEventClickInfo) => void;
+    onEventDrop?: (eventInfo: CalendarEventDropInfo) => void;
+    onEventResize?: (eventInfo: CalendarEventResizeInfo) => void;
+    onDateClick?: (dateInfo: CalendarDateClickInfo) => void;
+    onDateSelect?: (selectInfo: CalendarDateSelectInfo) => void;
+    onEventsSet?: (events: EventApi[]) => void;
+    initialView?: CalendarView;
+    views?: CalendarView[];
+    headerToolbar?: CalendarHeaderToolbar | boolean;
+    editable?: boolean;
+    selectable?: boolean;
+    selectMirror?: boolean;
+    eventResizable?: boolean;
+    eventDraggable?: boolean;
+    dayMaxEvents?: boolean | number;
+    height?: string | number;
+    aspectRatio?: number;
+    containerProps?: StackProps;
+    locale?: string;
+    timezone?: string;
+    firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    eventContent?: (eventInfo: any) => React.ReactNode;
+    dayCellContent?: (dayInfo: any) => React.ReactNode;
+    showNavigationButtons?: boolean;
+    showViewSwitcher?: boolean;
+    showToday?: boolean;
+    calendarRef?: React.RefObject<any>;
+    weekends?: boolean;
+    businessHours?: any;
+    eventConstraint?: any;
+    selectConstraint?: any;
+}
+
+declare const Calendar: react__default.FC<CalendarProps>;
+
+/**
+ * Generate recurring events based on a pattern
+ */
+interface RecurringEventConfig {
+    title: string;
+    startTime: string;
+    endTime: string;
+    startDate: Date;
+    endDate?: Date;
+    daysOfWeek?: number[];
+    interval?: number;
+    backgroundColor?: string;
+    extendedProps?: {
+        [key: string]: any;
+    };
+}
+declare const generateRecurringEvents: (config: RecurringEventConfig, maxEvents?: number) => CalendarEvent[];
+/**
+ * Generate sample business events for demonstration
+ */
+declare const generateBusinessEvents: (startDate?: Date) => CalendarEvent[];
+/**
+ * Filter events by date range
+ */
+declare const filterEventsByDateRange: (events: CalendarEvent[], startDate: Date, endDate: Date) => CalendarEvent[];
+/**
+ * Group events by date
+ */
+declare const groupEventsByDate: (events: CalendarEvent[]) => {
+    [date: string]: CalendarEvent[];
+};
+/**
+ * Calculate event statistics
+ */
+interface EventStats {
+    totalEvents: number;
+    eventsThisWeek: number;
+    eventsThisMonth: number;
+    averageEventsPerDay: number;
+    mostBusyDay: string;
+    leastBusyDay: string;
+}
+declare const calculateEventStats: (events: CalendarEvent[]) => EventStats;
+/**
+ * Convert events to different formats
+ */
+declare const exportEventsToCSV: (events: CalendarEvent[]) => string;
+/**
+ * Validate event data
+ */
+declare const validateEvent: (event: Partial<CalendarEvent>) => {
+    isValid: boolean;
+    errors: string[];
+};
+
 type ConfirmDialogType = 'confirm' | 'delete';
 type ConfirmDialogProps = {
     isOpen: boolean;
@@ -1382,5 +1529,5 @@ declare const splitBreadcrumbIdSlug: (param: string) => {
 declare const isLocal: boolean;
 declare const isDevelopment: boolean;
 
-export { Accordion, AccordionGroup, ActivityLogView, Alert, AnimatedGIFs, AppHeader, AppHeaderV2, AppLayout, BarChart, Breadcrumbs, Button, Card, CellContainer, CenterBox, Chips, CircularAvatar, ComingSoon, ConfirmDialog, DataTable, DatePicker, DateTimePicker, DensitySelector, Dialog, DialogButton, DropDownButton, DropDownIcon, DropdownMenu, DropdownMenuItem, EditableDataTable, EditableTableCore, EmptyIllustration, FileUpload, FloatingContent, FloatingHelpDocs, FooterContainerContainer, FormActions, FormControlWrapper, FormWrapper, HelpPopup, IconButtons, Icons, InternalServerError, LabelWrapper, LineChart, MuiThemeProvider, MultiCheckBox, NoInterneConnection, NoItemFound, OtpInput, PageContent, PageHeader, PageNotFound, PasswordField, PieChart, PreviewFiles, ProgressCard, RadioGroup, ResourceNotFound, SearchBar, Select, SidePanel, SidePanelVariables, Sidebar, SingleCheckBox, SingleSelect, Snackbar, Spinner, SquareAvatar, StatusCard, Stepper, StyledContainer, Svgs, Switch, SwitchInstitutionPopup, TableColumnsSelector, TableColumnsSelectorMenuFooter, TabsContainer, TabsLayout, TextField, TimePicker, Timeline, ToolTipContent, Tooltip, Tutorial, Typography, UnAuthorized, UploadDialog, UserProfilePopup, createBreadcrumbIdSlug, darkTheme, getBreadcrumbsCharacter, isDevelopment, isLocal, lightTheme, reactBlueprintReducers, splitBreadcrumbIdSlug, usePageHeader, useParams, useUrlParams };
-export type { AccordionProps, Activity, ActivityAction, AlertProps, AppHeaderProps, AppHeaderV2Props, AppLayoutProps, BarChartProps, BreadcrumbsProps, ButtonConfig, ButtonProps, CardProps, CheckboxProps, CircularAvatarProps, ConfirmDialogProps, ConfirmDialogType, DataTableProps, DensitySelectorProps, DialogButtonProps, DialogProps, DropdownMenuItemProps, DropdownMenuProps, EditableDataTableProps, FileUploadProps, FloatingContainerProps, FormActionsProps, HelpDocsAction, HelpDocsConfig, IconComponent, IconProps, IconsType, LineChartProps, MultiCheckboxProps, OtpInputProps, PageContentProps, PasswordFieldProps, PieChartProps, PreviewFilesProps, ProgressCardProps, RadioGroupProps, SearchBarProps, SelectProps, Severity, SideMenuItemProps, SidePanelProps, SingleSelectProps, SnackbarProps, SquareAvatarProps, StatusCardProps, SubMenuItemProps, SwitchProps, TableColumnsSelectorProps, TabsContainerProps, TextFieldProps, TimelineItems, TimelineProps, TooltipContentProps, TooltipProps, TypographyProps, UploadDialogProps };
+export { Accordion, AccordionGroup, ActivityLogView, Alert, AnimatedGIFs, AppHeader, AppHeaderV2, AppLayout, BarChart, Breadcrumbs, Button, Calendar, Card, CellContainer, CenterBox, Chips, CircularAvatar, ComingSoon, ConfirmDialog, DataTable, DatePicker, DateTimePicker, DensitySelector, Dialog, DialogButton, DropDownButton, DropDownIcon, DropdownMenu, DropdownMenuItem, EditableDataTable, EditableTableCore, EmptyIllustration, FileUpload, FloatingContent, FloatingHelpDocs, FooterContainerContainer, FormActions, FormControlWrapper, FormWrapper, HelpPopup, IconButtons, Icons, InternalServerError, LabelWrapper, LineChart, MuiThemeProvider, MultiCheckBox, NoInterneConnection, NoItemFound, OtpInput, PageContent, PageHeader, PageNotFound, PasswordField, PieChart, PreviewFiles, ProgressCard, RadioGroup, ResourceNotFound, SearchBar, Select, SidePanel, SidePanelVariables, Sidebar, SingleCheckBox, SingleSelect, Snackbar, Spinner, SquareAvatar, StatusCard, Stepper, StyledContainer, Svgs, Switch, SwitchInstitutionPopup, TableColumnsSelector, TableColumnsSelectorMenuFooter, TabsContainer, TabsLayout, TextField, TimePicker, Timeline, ToolTipContent, Tooltip, Tutorial, Typography, UnAuthorized, UploadDialog, UserProfilePopup, calculateEventStats, createBreadcrumbIdSlug, darkTheme, exportEventsToCSV, filterEventsByDateRange, generateBusinessEvents, generateRecurringEvents, getBreadcrumbsCharacter, groupEventsByDate, isDevelopment, isLocal, lightTheme, reactBlueprintReducers, splitBreadcrumbIdSlug, usePageHeader, useParams, useUrlParams, validateEvent };
+export type { AccordionProps, Activity, ActivityAction, AlertProps, AppHeaderProps, AppHeaderV2Props, AppLayoutProps, BarChartProps, BreadcrumbsProps, ButtonConfig, ButtonProps, CalendarDateClickInfo, CalendarDateSelectInfo, CalendarEvent, CalendarEventClickInfo, CalendarEventDropInfo, CalendarEventResizeInfo, CalendarHeaderToolbar, CalendarProps, CalendarView, CardProps, CheckboxProps, CircularAvatarProps, ConfirmDialogProps, ConfirmDialogType, DataTableProps, DensitySelectorProps, DialogButtonProps, DialogProps, DropdownMenuItemProps, DropdownMenuProps, EditableDataTableProps, EventStats, FileUploadProps, FloatingContainerProps, FormActionsProps, HelpDocsAction, HelpDocsConfig, IconComponent, IconProps, IconsType, LineChartProps, MultiCheckboxProps, OtpInputProps, PageContentProps, PasswordFieldProps, PieChartProps, PreviewFilesProps, ProgressCardProps, RadioGroupProps, RecurringEventConfig, SearchBarProps, SelectProps, Severity, SideMenuItemProps, SidePanelProps, SingleSelectProps, SnackbarProps, SquareAvatarProps, StatusCardProps, SubMenuItemProps, SwitchProps, TableColumnsSelectorProps, TabsContainerProps, TextFieldProps, TimelineItems, TimelineProps, TooltipContentProps, TooltipProps, TypographyProps, UploadDialogProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "2.2.3",
+  "version": "2.2.5",
   "description": "React UI component library for CampX applications",
   "author": "CampX",
   "license": "MIT",
@@ -48,6 +48,11 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@fullcalendar/core": "^6.1.18",
+    "@fullcalendar/daygrid": "^6.1.18",
+    "@fullcalendar/interaction": "^6.1.18",
+    "@fullcalendar/react": "^6.1.18",
+    "@fullcalendar/timegrid": "^6.1.18",
     "@hookform/resolvers": "^2.9.10",
     "@mui/icons-material": "^7.0.2",
     "@mui/lab": "^7.0.0-beta.11",

package/src/components/Navigation/Calendar/Calendar.tsx

@@ -0,0 +1,243 @@
+import dayGridPlugin from '@fullcalendar/daygrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import FullCalendar from '@fullcalendar/react';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import React, { useCallback } from 'react';
+
+import { StyledCalendarContainer, StyledCalendarWrapper } from './styles';
+import { CalendarProps } from './types';
+
+export const Calendar: React.FC<CalendarProps> = ({
+  events = [],
+
+  // Event handlers
+  onEventClick,
+  onEventDrop,
+  onEventResize,
+  onDateClick,
+  onDateSelect,
+  onEventsSet,
+
+  // View configuration
+  initialView = 'dayGridMonth',
+  views,
+  headerToolbar = {
+    left: 'prev,next today',
+    center: 'title',
+    right: 'dayGridMonth,timeGridWeek,timeGridDay',
+  },
+
+  // Calendar behavior
+  editable = false,
+  selectable = false,
+  selectMirror = true,
+  eventResizable = false,
+  eventDraggable = false,
+  dayMaxEvents = true,
+
+  // Styling & layout
+  height = 'auto',
+  aspectRatio,
+  containerProps,
+
+  // Localization
+  locale = 'en',
+  timezone = 'local',
+  firstDayOfWeek = 0,
+
+  // Custom rendering
+  eventContent,
+  dayCellContent,
+
+  // Navigation
+  showNavigationButtons = true,
+  showViewSwitcher = true,
+  showToday = true,
+
+  // Advanced
+  weekends = true,
+  businessHours,
+  eventConstraint,
+  selectConstraint,
+}) => {
+  // Event handlers
+  const handleEventClick = useCallback(
+    (clickInfo: any) => {
+      // Prevent DOM selector errors
+      if (clickInfo.jsEvent) {
+        clickInfo.jsEvent.preventDefault();
+        clickInfo.jsEvent.stopPropagation();
+      }
+
+      onEventClick?.(clickInfo);
+    },
+    [onEventClick],
+  );
+
+  const handleEventDrop = useCallback(
+    (dropInfo: any) => {
+      onEventDrop?.(dropInfo);
+    },
+    [onEventDrop],
+  );
+
+  const handleEventResize = useCallback(
+    (resizeInfo: any) => {
+      onEventResize?.(resizeInfo);
+    },
+    [onEventResize],
+  );
+
+  const handleDateClick = useCallback(
+    (clickInfo: any) => {
+      onDateClick?.(clickInfo);
+    },
+    [onDateClick],
+  );
+
+  const handleDateSelect = useCallback(
+    (selectInfo: any) => {
+      onDateSelect?.(selectInfo);
+    },
+    [onDateSelect],
+  );
+
+  const handleEventsSet = useCallback(
+    (events: any) => {
+      onEventsSet?.(events);
+    },
+    [onEventsSet],
+  );
+
+  // Build header toolbar configuration
+  const getHeaderToolbar = () => {
+    if (headerToolbar === false) {
+      return false;
+    }
+
+    const defaultToolbar = {
+      left: 'prev,next today',
+      center: 'title',
+      right: 'dayGridMonth,timeGridWeek,timeGridDay',
+    };
+
+    if (typeof headerToolbar === 'object') {
+      let left = headerToolbar.left || '';
+      let right = headerToolbar.right || '';
+
+      // Filter based on props
+      if (!showNavigationButtons) {
+        left = left.replace(/prev,next,?|,?prev,next/, '');
+      }
+      if (!showToday) {
+        left = left.replace(/today,?|,?today/, '');
+      }
+      if (!showViewSwitcher) {
+        right = '';
+      }
+
+      // Clean up extra commas
+      left = left.replace(/^,+|,+$/g, '').replace(/,+/g, ',');
+      right = right.replace(/^,+|,+$/g, '').replace(/,+/g, ',');
+
+      return {
+        ...headerToolbar,
+        left,
+        right,
+      };
+    }
+
+    return defaultToolbar;
+  };
+
+  // Get available views
+  const getViews = () => {
+    if (views && views.length > 0) {
+      return views.reduce((acc: any, view) => {
+        acc[view] = { buttonText: getViewButtonText(view) };
+        return acc;
+      }, {});
+    }
+    return undefined;
+  };
+
+  const getViewButtonText = (view: string) => {
+    const viewTexts: { [key: string]: string } = {
+      dayGridMonth: 'Month',
+      timeGridWeek: 'Week',
+      timeGridDay: 'Day',
+      listWeek: 'List',
+    };
+    return viewTexts[view] || view;
+  };
+
+  // Process events to ensure they're in the correct format
+  const processedEvents = events.map((event) => ({
+    ...event,
+    id: String(event.id), // FullCalendar prefers string IDs
+  }));
+
+  return (
+    <StyledCalendarContainer
+      height={height as any}
+      aspectRatio={aspectRatio}
+      {...containerProps}
+    >
+      <StyledCalendarWrapper>
+        <FullCalendar
+          plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
+          // View configuration
+          initialView={initialView}
+          views={getViews()}
+          headerToolbar={getHeaderToolbar()}
+          // Events
+          events={processedEvents}
+          // Event handlers
+          eventClick={handleEventClick}
+          eventDrop={editable ? handleEventDrop : undefined}
+          eventResize={editable ? handleEventResize : undefined}
+          dateClick={handleDateClick}
+          select={selectable ? handleDateSelect : undefined}
+          eventsSet={handleEventsSet}
+          // Calendar behavior
+          editable={editable}
+          selectable={selectable}
+          selectMirror={selectMirror}
+          dayMaxEvents={dayMaxEvents}
+          weekends={weekends}
+          // Event interaction
+          eventResizableFromStart={eventResizable}
+          eventDurationEditable={eventResizable}
+          eventStartEditable={eventDraggable}
+          // Localization
+          locale={locale}
+          timeZone={timezone}
+          firstDay={firstDayOfWeek}
+          // Custom rendering
+          eventContent={eventContent}
+          dayCellContent={dayCellContent}
+          // Advanced configuration
+          businessHours={businessHours}
+          eventConstraint={eventConstraint}
+          selectConstraint={selectConstraint}
+          // Height and sizing
+          height={typeof height === 'string' ? height : `${height}px`}
+          aspectRatio={aspectRatio}
+          // Additional FullCalendar props
+          nowIndicator={true}
+          navLinks={true}
+          dayHeaders={true}
+          weekNumbers={false}
+          // Event display
+          displayEventTime={true}
+          displayEventEnd={false}
+          // Selection
+          unselectAuto={true}
+          unselectCancel=""
+        />
+      </StyledCalendarWrapper>
+    </StyledCalendarContainer>
+  );
+};
+
+Calendar.displayName = 'Calendar';