Event Types Reference

This document covers the event data structures and validation rules used in FullEventCalendar.

CalendarEventType

The CalendarEventType is the core data structure used to represent events in the calendar.

interface CalendarEventType {
  id?: string;              // Optional when creating, required when updating
  title: string;            // Event title/name
  description?: string;     // Optional event description
  startDate: Date;          // Event start date
  endDate: Date;            // Event end date
  startTime: string;        // Event start time (format: "HH:MM")
  endTime: string;          // Event end time (format: "HH:MM")
  color: string;            // Event color category
  isRepeating: boolean;     // Whether the event repeats
  isRepeatingInterval?: 'daily' | 'weekly' | 'monthly'; // Repetition interval
  isRepeatingExcludedDates?: Date[]; // Dates to exclude from repetition
}

Validation Rules

Event validation is implemented using Zod schemas. The following validation rules are applied:

Title: Required, must be at least 1 character
Dates: Start and end dates are required
Times:
- Must be in "HH:MM" format (24-hour)
- For non-repeating events, the combined date and time for end must be after start
- For repeating events, only the time values are compared (end time must be equal to or after start time)
Color: Required, must be one of the predefined colors
Repeating Events:
- When isRepeating is true, an optional interval can be specified
- The isRepeatingExcludedDates property allows specifying dates to skip in the repetition pattern

Event Color Options

The calendar comes with predefined color options:

export const EVENT_COLOR_OPTIONS = [
  { label: 'Blue', value: 'blue' },
  { label: 'Red', value: 'red' },
  { label: 'Green', value: 'green' },
  { label: 'Yellow', value: 'yellow' },
  { label: 'Purple', value: 'purple' },
  { label: 'Orange', value: 'orange' }
];

Special Event Types

All-Day Events

All-day events can be created by:

Setting start time to "00:00"
Setting end time to "23:59"

const allDayEvent = {
  title: "Conference",
  startDate: new Date(2024, 0, 15),
  endDate: new Date(2024, 0, 15),
  startTime: "00:00",
  endTime: "23:59",
  color: "blue",
  isRepeating: false
};

Multi-Day Events

Multi-day events are created by setting different start and end dates:

const multiDayEvent = {
  title: "Business Trip",
  startDate: new Date(2024, 0, 15),
  endDate: new Date(2024, 0, 18),  // 3-day event
  startTime: "09:00",
  endTime: "17:00",
  color: "green",
  isRepeating: false
};

Recurring Events

Recurring events are created by setting isRepeating to true and specifying an interval:

const recurringEvent = {
  title: "Team Stand-up",
  startDate: new Date(2024, 0, 15),
  endDate: new Date(2024, 0, 15),
  startTime: "09:30",
  endTime: "10:00",
  color: "blue",
  isRepeating: true,
  isRepeatingInterval: "daily",  // Can be "daily", "weekly", or "monthly"
  isRepeatingExcludedDates: [new Date(2024, 0, 18), new Date(2024, 0, 19)]  // Skip these dates
};

Working with Event Data

Creating Events

When creating events, the id property is optional since it's typically assigned by your backend:

const newEvent = {
  title: "Doctor Appointment",
  description: "Annual checkup",
  startDate: new Date(2024, 0, 20),
  endDate: new Date(2024, 0, 20),
  startTime: "14:00",
  endTime: "15:00",
  color: "red",
  isRepeating: false
};

// The onEventAdd handler should return the event with an ID
const createdEvent = await onEventAdd(newEvent);
// createdEvent now has an ID: { id: "123", ...newEvent }

Updating Events

When updating events, the id property is required:

const updatedEvent = {
  id: "123",
  title: "Doctor Appointment - Rescheduled",
  description: "Annual checkup",
  startDate: new Date(2024, 0, 22),  // Changed date
  endDate: new Date(2024, 0, 22),
  startTime: "15:00",  // Changed time
  endTime: "16:00",
  color: "red",
  isRepeating: false
};

await onEventUpdate(updatedEvent);