@ilamy/calendar 1.1.0 → 1.2.0

package/README.md

@@ -41,3 +41,10 @@ A powerful, full-featured React calendar component library built with TypeScript
 ## Documentation
 
 For comprehensive documentation, examples, and interactive demos, visit [ilamy.dev](https://ilamy.dev)
+
+## Code Example
+
+Check out the [examples directory](./examples) for complete project setups:
+
+- [Next.js Example](./examples/nextjs) - Full-featured Next.js integration
+- [Astro Example](./examples/astro) - Static site integration with Astro

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import React4 from "react";
-import dayjs from "dayjs";
+import { Frequency, Weekday } from "rrule";
+import { RRule } from "rrule";
 import { Options } from "rrule";
 /**
 * Re-rrule.js Options with practical TypeScript interface.
@@ -21,6 +21,9 @@ type RRuleOptions = {
 	*/
 	dtstart: Date;
 } & Partial<Omit<Options, "freq" | "dtstart">>;
+import React4 from "react";
+import React3 from "react";
+import dayjs2 from "dayjs";
 /**
 * Core calendar event interface representing a single calendar event.
 * This is the primary data structure for calendar events.
@@ -31,9 +34,9 @@ interface CalendarEvent {
 	/** Display title of the event */
 	title: string;
 	/** Start date and time of the event */
-	start: dayjs.Dayjs;
+	start: dayjs2.Dayjs;
 	/** End date and time of the event */
-	end: dayjs.Dayjs;
+	end: dayjs2.Dayjs;
 	/**
 	* Color for the event (supports CSS color values, hex, rgb, hsl, or CSS class names)
 	* @example "#3b82f6", "blue-500", "rgb(59, 130, 246)"
@@ -126,7 +129,6 @@ interface EventFormProps {
 	onDelete?: (event: CalendarEvent) => void;
 	onClose: () => void;
 }
-import React3 from "react";
 interface Translations {
 	today: string;
 	create: string;
@@ -235,6 +237,19 @@ type CalendarView = "month" | "week" | "day" | "year";
 */
 type TimeFormat = "12-hour" | "24-hour";
 /**
+* Custom class names for calendar styling.
+* Allows users to override default styles for various calendar elements.
+*/
+interface CalendarClassesOverride {
+	/**
+	* Class name for disabled cells (non-business hours).
+	* Replaces the DISABLED_CELL_CLASSNAME constant.
+	* @default "bg-secondary text-muted-foreground pointer-events-none"
+	* @example "bg-gray-100 text-gray-400 cursor-not-allowed"
+	*/
+	disabledCell?: string;
+}
+/**
 * This interface extends the base CalendarEvent but allows more flexible date types
 * for the start and end properties. The component will automatically convert these
 * to dayjs objects internally for consistent date handling.
@@ -243,8 +258,8 @@ type TimeFormat = "12-hour" | "24-hour";
 * @extends {Omit<CalendarEvent, 'start' | 'end'>}
 */
 interface IlamyCalendarPropEvent extends Omit<CalendarEvent, "start" | "end"> {
-	start: dayjs.Dayjs | Date | string;
-	end: dayjs.Dayjs | Date | string;
+	start: dayjs2.Dayjs | Date | string;
+	end: dayjs2.Dayjs | Date | string;
 }
 /**
 * Information passed to the onCellClick callback.
@@ -252,11 +267,13 @@ interface IlamyCalendarPropEvent extends Omit<CalendarEvent, "start" | "end"> {
 */
 interface CellClickInfo {
 	/** Start date/time of the clicked cell */
-	start: dayjs.Dayjs;
+	start: dayjs2.Dayjs;
 	/** End date/time of the clicked cell */
-	end: dayjs.Dayjs;
+	end: dayjs2.Dayjs;
 	/** Resource ID if clicking on a resource calendar cell (optional) */
 	resourceId?: string | number;
+	/** Whether the clicked cell is an all-day cell (optional) */
+	allDay?: boolean;
 }
 interface IlamyCalendarProps {
 	/**
@@ -277,7 +294,7 @@ interface IlamyCalendarProps {
 	* The initial date to display when the calendar loads.
 	* If not provided, the calendar will default to today's date.
 	*/
-	initialDate?: dayjs.Dayjs | Date | string;
+	initialDate?: dayjs2.Dayjs | Date | string;
 	/**
 	* Custom render function for calendar events.
 	* If provided, it will override the default event rendering.
@@ -317,7 +334,7 @@ interface IlamyCalendarProps {
 	* Callback when the current date changes (navigation).
 	* Provides the new current date.
 	*/
-	onDateChange?: (date: dayjs.Dayjs) => void;
+	onDateChange?: (date: dayjs2.Dayjs) => void;
 	/**
 	* Locale to use for formatting dates and times.
 	* If not provided, the default locale will be used.
@@ -360,6 +377,13 @@ interface IlamyCalendarProps {
 	*/
 	dayMaxEvents?: number;
 	/**
+	* Vertical spacing between stacked events in pixels.
+	* Controls the gap between events when multiple events are displayed in the same view.
+	* Defaults to 1 pixel if not specified.
+	* Recommended range: 1-8 pixels for optimal readability.
+	*/
+	eventSpacing?: number;
+	/**
 	* Whether to stick the view header to the top of the calendar.
 	* Useful for keeping the header visible while scrolling.
 	*/
@@ -382,8 +406,10 @@ interface IlamyCalendarProps {
 	/**
 	* Configuration for business hours.
 	* Defines the working hours to be highlighted on the calendar.
+	* Can be a single BusinessHours object (applies to all specified days)
+	* or an array of BusinessHours objects (for different hours on different days).
 	*/
-	businessHours?: BusinessHours;
+	businessHours?: BusinessHours | BusinessHours[];
 	/**
 	* Custom render function for the event form.
 	* If provided, it will override the default event form component.
@@ -396,9 +422,48 @@ interface IlamyCalendarProps {
 	* - "24-hour": Times displayed as "13:00"
 	*/
 	timeFormat?: TimeFormat;
+	/**
+	* Custom class names for overriding default calendar element styles.
+	* Allows fine-grained control over the appearance of different calendar elements.
+	* @example { disabledCell: "bg-gray-100 text-gray-400" }
+	*/
+	classesOverride?: CalendarClassesOverride;
 }
 declare const IlamyCalendar: React4.FC<IlamyCalendarProps>;
-import React5 from "react";
+declare const isRecurringEvent: (event: CalendarEvent) => boolean;
+interface GenerateRecurringEventsProps {
+	event: CalendarEvent;
+	currentEvents: CalendarEvent[];
+	startDate: dayjs2.Dayjs;
+	endDate: dayjs2.Dayjs;
+}
+declare const generateRecurringEvents: ({ event, currentEvents, startDate, endDate }: GenerateRecurringEventsProps) => CalendarEvent[];
+/**
+* Simplified calendar context type for external use
+* Contains only the most commonly used calendar operations
+*/
+interface UseIlamyCalendarContextReturn {
+	readonly currentDate: dayjs2.Dayjs;
+	readonly view: CalendarView;
+	readonly events: CalendarEvent[];
+	readonly isEventFormOpen: boolean;
+	readonly selectedEvent: CalendarEvent | null;
+	readonly selectedDate: dayjs2.Dayjs | null;
+	readonly firstDayOfWeek: number;
+	readonly setCurrentDate: (date: dayjs2.Dayjs) => void;
+	readonly selectDate: (date: dayjs2.Dayjs) => void;
+	readonly setView: (view: CalendarView) => void;
+	readonly nextPeriod: () => void;
+	readonly prevPeriod: () => void;
+	readonly today: () => void;
+	readonly addEvent: (event: CalendarEvent) => void;
+	readonly updateEvent: (eventId: string | number, event: Partial<CalendarEvent>) => void;
+	readonly deleteEvent: (eventId: string | number) => void;
+	readonly openEventForm: (eventData?: Partial<CalendarEvent>) => void;
+	readonly closeEventForm: () => void;
+	readonly businessHours?: BusinessHours | BusinessHours[];
+}
+declare const useIlamyCalendarContext: () => UseIlamyCalendarContextReturn;
 /**
 * Public-facing resource calendar event interface with flexible date types.
 * Similar to IlamyCalendarPropEvent but with resource assignment fields.
@@ -420,6 +485,12 @@ interface IlamyResourceCalendarProps extends Omit<IlamyCalendarProps, "events">
 	resources?: Resource[];
 	/** Custom render function for resources */
 	renderResource?: (resource: Resource) => React.ReactNode;
+	/**
+	* Orientation of the resource view.
+	* - "horizontal": Resources are rows, time is columns (default)
+	* - "vertical": Resources are columns, time is rows
+	*/
+	orientation?: "horizontal" | "vertical";
 }
 /**
 * Resource interface representing a calendar resource (person, room, equipment, etc.)
@@ -442,34 +513,9 @@ interface Resource {
 	/** Optional position for resource display */
 	position?: number;
 }
+import React5 from "react";
 declare const IlamyResourceCalendar: React5.FC<IlamyResourceCalendarProps>;
 /**
-* Simplified calendar context type for external use
-* Contains only the most commonly used calendar operations
-*/
-interface UseIlamyCalendarContextReturn {
-	readonly currentDate: dayjs.Dayjs;
-	readonly view: CalendarView;
-	readonly events: CalendarEvent[];
-	readonly isEventFormOpen: boolean;
-	readonly selectedEvent: CalendarEvent | null;
-	readonly selectedDate: dayjs.Dayjs | null;
-	readonly firstDayOfWeek: number;
-	readonly setCurrentDate: (date: dayjs.Dayjs) => void;
-	readonly selectDate: (date: dayjs.Dayjs) => void;
-	readonly setView: (view: CalendarView) => void;
-	readonly nextPeriod: () => void;
-	readonly prevPeriod: () => void;
-	readonly today: () => void;
-	readonly addEvent: (event: CalendarEvent) => void;
-	readonly updateEvent: (eventId: string | number, event: Partial<CalendarEvent>) => void;
-	readonly deleteEvent: (eventId: string | number) => void;
-	readonly openEventForm: (eventData?: Partial<CalendarEvent>) => void;
-	readonly closeEventForm: () => void;
-	readonly businessHours?: BusinessHours;
-}
-declare const useIlamyCalendarContext: () => UseIlamyCalendarContextReturn;
-/**
 * Simplified resource calendar context type for external use
 */
 interface UseIlamyResourceCalendarContextReturn extends UseIlamyCalendarContextReturn {
@@ -478,15 +524,5 @@ interface UseIlamyResourceCalendarContextReturn extends UseIlamyCalendarContextR
 	readonly getEventsForResource: (resourceId: string | number) => CalendarEvent[];
 }
 declare const useIlamyResourceCalendarContext: () => UseIlamyResourceCalendarContextReturn;
-declare const isRecurringEvent: (event: CalendarEvent) => boolean;
-interface GenerateRecurringEventsProps {
-	event: CalendarEvent;
-	currentEvents: CalendarEvent[];
-	startDate: dayjs.Dayjs;
-	endDate: dayjs.Dayjs;
-}
-declare const generateRecurringEvents: ({ event, currentEvents, startDate, endDate }: GenerateRecurringEventsProps) => CalendarEvent[];
-import { Frequency, Weekday } from "rrule";
-import { RRule } from "rrule";
 declare const defaultTranslations: Translations;
 export { useIlamyResourceCalendarContext, useIlamyCalendarContext, isRecurringEvent, generateRecurringEvents, defaultTranslations, Weekday, WeekDays, UseIlamyResourceCalendarContextReturn, UseIlamyCalendarContextReturn, TranslatorFunction, Translations, TranslationKey, TimeFormat, Resource, RRuleOptions, RRule, IlamyResourceCalendarProps, IlamyResourceCalendar, IlamyCalendarProps, IlamyCalendar, Frequency, EventFormProps, CellClickInfo, CalendarView, CalendarEvent };