big-calendar

The calendar expects specific data shapes for events and users. While you can modify these interfaces, the following fields are required for the calendar to function correctly.

Event Interface (IEvent):

• id: string
• title: string
• description: string
• startDate: string (ISO string)
• endDate: string (ISO string)
• color: one of "blue" | "green" | "red" | "yellow" | "purple" | "orange"
• user: An object containing id (string) and name (string).

User Interface (IUser):

• id: string
• name: string
• picturePath: string (optional avatar image path)

interface IEvent {
  id: string;
  title: string;
  description: string;
  startDate: string; // ISO string
  endDate: string; // ISO string
  color: "blue" | "green" | "red" | "yellow" | "purple" | "orange";
  user: {
    id: string;
    name: string;
  };
}

interface IUser {
  id: string;
  name: string;
  picturePath?: string; // Optional avatar image
}

The useCalendar hook allows any child component within a CalendarProvider to access and modify the global calendar state.

Available State and Setters:

• selectedDate: The currently selected Date.
• setSelectedDate: Function to update the selected date. Accepts Date | undefined (though it ignores undefined).
• selectedUserId: The ID of the selected user, or 'all' to view everyone.
• setSelectedUserId: Function to update the selected user ID.
• badgeVariant: The visual style of badges (TBadgeVariant).
• setBadgeVariant: Function to update the badge variant.
• users: The list of IUser objects.
• workingHours: The TWorkingHours configuration.
• setWorkingHours: Dispatcher to update working hours.
• visibleHours: The TVisibleHours configuration (the time range displayed).
• setVisibleHours: Dispatcher to update visible hours.
• events: The current list of IEvent objects.
• setLocalEvents: Dispatcher to update the local event state (useful for simulating updates without a backend refetch).

import { useCalendar } from '@/calendar/contexts/calendar-context';

function CalendarControl() {
  const { selectedDate, setSelectedDate, selectedUserId, setSelectedUserId } = useCalendar();

  return (
    <div>
      <p>Current Date: {selectedDate.toDateString()}</p>
      <button onClick={() => setSelectedDate(new Date())}>Reset Date</button>
      
      <p>Current User: {selectedUserId}</p>
      <button onClick={() => setSelectedUserId('all')}>Show All Users</button>
    </div>
  );
}

The EditEventDialog component provides a pre-built dialog interface for editing an existing event's details, including title, description, responsible user, date, time, and color.

It uses a DialogTrigger pattern, meaning you wrap the element that should trigger the dialog (e.g., an event card or a button) as a child of EditEventDialog.

Note on Persistence: In the current implementation, the component uses the useUpdateEvent hook to update the event state locally. For production applications, you should replace or augment this logic to submit the form data to a backend API to ensure changes are persisted.

import { EditEventDialog } from '@/calendar/components/dialogs/edit-event-dialog';
import type { IEvent } from '@/calendar/interfaces';

interface MyComponentProps {
  event: IEvent;
}

export function MyComponent({ event }: MyComponentProps) {
  return (
    <EditEventDialog event={event}>
      <button>Edit Event</button>
    </EditEventDialog>
  );
}

When creating or updating events in Big Calendar, the event data must conform to the eventSchema. This schema ensures that all required fields are present and that the temporal logic (start time vs. end time) is valid.

Key constraints:

• title and description must be non-empty strings.
• startDate and endDate must be valid Date objects.
• startTime and endTime are objects containing hour (number) and minute (number).
• color must be one of the following allowed values: "blue", "green", "red", "yellow", "purple", "orange", or "gray".
• Temporal Validation: The combined start date/time must occur before the combined end date/time. If this condition fails, a validation error is returned on the startDate path with the message "Start date cannot be after end date".

import { z } from "zod";

export const eventSchema = z
  .object({
    user: z.string(),
    title: z.string().min(1, "Title is required"),
    description: z.string().min(1, "Description is required"),
    startDate: z.date({ required_error: "Start date is required" }),
    startTime: z.object({ hour: z.number(), minute: z.number() }, { required_error: "Start time is required" }),
    endDate: z.date({ required_error: "End date is required" }),
    endTime: z.object({ hour: z.number(), minute: z.number() }, { required_error: "End time is required" }),
    color: z.enum(["blue", "green", "red", "yellow", "purple", "orange", "gray"], { required_error: "Color is required" }),
  })
  .refine(
    data => {
      const startDateTime = new Date(data.startDate);
      startDateTime.setHours(data.startTime.hour, data.startTime.minute, 0, 0);

      const endDateTime = new Date(data.endDate);
      endDateTime.setHours(data.endTime.hour, data.endTime.minute, 0, 0);

      return startDateTime < endDateTime;
    },
    {
      message: "Start date cannot be after end date",
      path: ["startDate"],
    }
  );

export type TEventFormData = z.infer<typeof eventSchema>;