### Clone and Run Big Calendar Project

Source: https://github.com/lramos33/big-calendar/blob/main/README.md

Instructions to clone the Big Calendar repository, install dependencies, and start the development server. This is the initial setup for running the project locally.

```bash
git clone https://github.com/lramos33/big-calendar.git
cd calendar-app
npm install
npm run dev
# or
npm run turbo
```

--------------------------------

### Example Calendar Page Implementation (TypeScript)

Source: https://github.com/lramos33/big-calendar/blob/main/README.md

Provides a complete example of setting up a calendar page using `CalendarProvider`, `ClientContainer`, and `ChangeBadgeVariantInput`. It demonstrates how to pass initial events and users data to the provider.

```typescript
// pages/calendar.tsx
import { CalendarProvider } from "@/calendar/contexts/calendar-context";
import { ClientContainer } from "@/calendar/components/client-container";
import { ChangeBadgeVariantInput } from "@/calendar/components/change-badge-variant-input";

export default function CalendarPage({ events, users }) {
  return (
    <CalendarProvider events={events} users={users}>
      <div className="mx-auto flex max-w-screen-2xl flex-col gap-4 p-4">
        <ClientContainer view="month" />
        <ChangeBadgeVariantInput />
      </div>
    </CalendarProvider>
  );
}
```

--------------------------------

### Integrate Big Calendar: CalendarProvider Setup

Source: https://github.com/lramos33/big-calendar/blob/main/README.md

Demonstrates how to set up the `CalendarProvider` by wrapping your application or page with it. This context provider is essential for managing calendar state, events, and user data.

```tsx
import { CalendarProvider } from "@/calendar/contexts/calendar-context";

// Fetch your events and users data
const events = await getEvents();
const users = await getUsers();

export default function Layout({ children }) {
  return (
    <CalendarProvider users={users} events={events}>
      {children}
    </CalendarProvider>
  );
}
```

--------------------------------

### Integrate Big Calendar: Basic CalendarView Implementation

Source: https://github.com/lramos33/big-calendar/blob/main/README.md

Shows how to render a basic calendar view using the `ClientContainer` component. This example sets up a month view, but other views can be specified.

```tsx
import { ClientContainer } from "@/calendar/components/client-container";

export default function CalendarPage() {
  return <ClientContainer view="month" />;
}
```

--------------------------------

### Month View Page Setup for Big Calendar

Source: https://context7.com/lramos33/big-calendar/llms.txt

Sets up a Next.js page to display the month view of the Big Calendar. It includes the main calendar component and input controls for customizing badge variants, visible hours, and working hours.

```tsx
// app/(calendar)/month-view/page.tsx
import { ClientContainer } from "@/calendar/components/client-container";
import { ChangeBadgeVariantInput } from "@/calendar/components/change-badge-variant-input";
import { ChangeVisibleHoursInput } from "@/calendar/components/change-visible-hours-input";
import { ChangeWorkingHoursInput } from "@/calendar/components/change-working-hours-input";

export default function MonthViewPage() {
  return (
    <div className="mx-auto flex max-w-screen-2xl flex-col gap-4 p-4">
      <ClientContainer view="month" />

      <div className="grid gap-8 md:grid-cols-3">
        <ChangeBadgeVariantInput />
        <ChangeVisibleHoursInput />
        <ChangeWorkingHoursInput />
      </div>
    </div>
  );
}

```

--------------------------------

### Initialize Calendar Context with Provider

Source: https://context7.com/lramos33/big-calendar/llms.txt

The CalendarProvider component initializes the application's calendar state. It accepts initial users and events as props and makes them available throughout the component tree via React Context. This setup is crucial for enabling all calendar-related functionalities.

```tsx
import { CalendarProvider } from "@/calendar/contexts/calendar-context";
import { IEvent, IUser } from "@/calendar/interfaces";

// Define your users
const users: IUser[] = [
  { id: "user-1", name: "John Doe", picturePath: null },
  { id: "user-2", name: "Jane Smith", picturePath: "/avatars/jane.jpg" },
];

// Define your events
const events: IEvent[] = [
  {
    id: 1,
    title: "Team Meeting",
    description: "Weekly team sync",
    startDate: "2024-01-15T09:00:00.000Z",
    endDate: "2024-01-15T10:00:00.000Z",
    color: "blue",
    user: { id: "user-1", name: "John Doe", picturePath: null },
  },
  {
    id: 2,
    title: "Project Deadline",
    description: "Submit final deliverables",
    startDate: "2024-01-15T14:00:00.000Z",
    endDate: "2024-01-17T17:00:00.000Z",
    color: "red",
    user: { id: "user-2", name: "Jane Smith", picturePath: "/avatars/jane.jpg" },
  },
];

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <CalendarProvider users={users} events={events}>
      {children}
    </CalendarProvider>
  );
}

```

--------------------------------

### Validate Event Data with Zod Schema (TypeScript)

Source: https://context7.com/lramos33/big-calendar/llms.txt

This code defines a Zod schema for event validation, ensuring correct data types and that start dates/times precede end dates/times. It's integrated with React Hook Form for form handling.

```tsx
import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

// Event validation schema
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() }),
    endDate: z.date({ required_error: "End date is required" }),
    endTime: z.object({ hour: z.number(), minute: z.number() }),
    color: z.enum(["blue", "green", "red", "yellow", "purple", "orange", "gray"]),
  })
  .refine(
    (data) => {
      const startDateTime = new Date(data.startDate);
      startDateTime.setHours(data.startTime.hour, data.startTime.minute);
      const endDateTime = new Date(data.endDate);
      endDateTime.setHours(data.endTime.hour, data.endTime.minute);
      return startDateTime < endDateTime;
    },
    { message: "Start date cannot be after end date", path: ["startDate"] }
  );

type TEventFormData = z.infer<typeof eventSchema>;

function EventForm() {
  const form = useForm<TEventFormData>({
    resolver: zodResolver(eventSchema),
    defaultValues: {
      title: "",
      description: "",
      color: "blue",
    },
  });

  const onSubmit = (values: TEventFormData) => {
    // Create event object for API
    const event = {
      title: values.title,
      description: values.description,
      startDate: new Date(values.startDate.setHours(values.startTime.hour, values.startTime.minute)).toISOString(),
      endDate: new Date(values.endDate.setHours(values.endTime.hour, values.endTime.minute)).toISOString(),
      color: values.color,
      user: { id: values.user, name: "User Name", picturePath: null },
    };
    console.log("Event to save:", event);
  };

  return <form onSubmit={form.handleSubmit(onSubmit)}>{/* Form fields */}</form>;
}

```

--------------------------------

### Big Calendar: Different View Configurations

Source: https://github.com/lramos33/big-calendar/blob/main/README.md

Illustrates how to configure and display different calendar views (Day, Week, Month, Year, Agenda) using the `ClientContainer` component. Each view provides a distinct way to visualize events and schedules.

```tsx
// Day view
<ClientContainer view="day" />

// Week view
<ClientContainer view="week" />

// Month view
<ClientContainer view="month" />

// Year view
<ClientContainer view="year" />

// Agenda view
<ClientContainer view="agenda" />
```

--------------------------------

### Access Calendar Context (TypeScript)

Source: https://github.com/lramos33/big-calendar/blob/main/README.md

Shows how to use the `useCalendar` hook to access and manage the calendar's state, including selected date, user, events, and badge variant. This hook allows for state manipulation from any component within the `CalendarProvider`.

```typescript
import { useCalendar } from "@/calendar/contexts/calendar-context";

function MyComponent() {
  const { selectedDate, setSelectedDate, selectedUserId, setSelectedUserId, events, users, badgeVariant, setBadgeVariant } = useCalendar();

  // Your component logic
}
```

--------------------------------

### Next.js Calendar Integration with CalendarProvider

Source: https://context7.com/lramos33/big-calendar/llms.txt

Demonstrates how to integrate the Big Calendar component into a Next.js application. It fetches initial event and user data and provides them to the calendar via the CalendarProvider context.

```tsx
// app/(calendar)/layout.tsx
import { CalendarProvider } from "@/calendar/contexts/calendar-context";

async function getEvents() {
  // Fetch from your API
  return [
    {
      id: 1,
      title: "Sprint Planning",
      description: "Q1 sprint planning session",
      startDate: new Date().toISOString(),
      endDate: new Date(Date.now() + 3600000).toISOString(),
      color: "blue" as const,
      user: { id: "1", name: "John Doe", picturePath: null },
    },
  ];
}

async function getUsers() {
  return [
    { id: "1", name: "John Doe", picturePath: null },
    { id: "2", name: "Jane Smith", picturePath: "/avatars/jane.jpg" },
  ];
}

export default async function CalendarLayout({ children }: { children: React.ReactNode }) {
  const [events, users] = await Promise.all([getEvents(), getUsers()]);

  return (
    <CalendarProvider users={users} events={events}>
      {children}
    </CalendarProvider>
  );
}

```

--------------------------------

### Customize Badge Variant (TypeScript)

Source: https://github.com/lramos33/big-calendar/blob/main/README.md

Demonstrates how to import and use the `ChangeBadgeVariantInput` component to control the display style of event badges within the calendar. This component should be placed within the `CalendarProvider`.

```typescript
import { ChangeBadgeVariantInput } from "@/calendar/components/change-badge-variant-input";

// Place this anywhere in your project tree inside the CalendarProvider
<ChangeBadgeVariantInput />;
```

--------------------------------

### useDisclosure Hook for State Management in React

Source: https://context7.com/lramos33/big-calendar/llms.txt

A custom React hook designed to manage the open/close state for UI components like modals and dialogs. It provides functions to control the state and can be initialized with a default open state.

```tsx
import { useDisclosure } from "@/hooks/use-disclosure";

function ModalExample() {
  const { isOpen, onOpen, onClose, onToggle } = useDisclosure();

  // With default open state
  const dropdown = useDisclosure({ defaultIsOpen: true });

  return (
    <div>
      <button onClick={onOpen}>Open Modal</button>
      <button onClick={onToggle}>Toggle Modal</button>

      {isOpen && (
        <div className="modal">
          <h2>Modal Content</h2>
          <button onClick={onClose}>Close</button>
        </div>
      )}
    </div>
  );
}

```

--------------------------------

### Define User Data Structure (TypeScript)

Source: https://github.com/lramos33/big-calendar/blob/main/README.md

Defines the interface for user data, including essential fields like id and name, with an optional field for a profile picture path. This structure is used by the calendar component.

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

--------------------------------

### Calendar Helper Functions in TypeScript

Source: https://context7.com/lramos33/big-calendar/llms.txt

Provides utility functions for date formatting, navigation, event management, and calendar cell generation. It requires types from '@/calendar/types' and interfaces from '@/calendar/interfaces'. Functions include rangeText, navigateDate, getEventsCount, getCalendarCells, getCurrentEvents, groupEvents, getVisibleHours, and isWorkingHour.

```tsx
import {
  rangeText,
  navigateDate,
  getEventsCount,
  getCalendarCells,
  getCurrentEvents,
  groupEvents,
  getVisibleHours,
  isWorkingHour,
} from "@/calendar/helpers";
import { TCalendarView, TWorkingHours, TVisibleHours } from "@/calendar/types";
import { IEvent } from "@/calendar/interfaces";

// Get formatted date range text for header
const view: TCalendarView = "month";
const currentDate = new Date("2024-01-15");
console.log(rangeText(view, currentDate));
// Output: "Jan 1, 2024 - Jan 31, 2024"

// Navigate to previous/next period
const nextMonth = navigateDate(currentDate, "month", "next");
const prevWeek = navigateDate(currentDate, "week", "previous");

// Count events for a specific date/view
const events: IEvent[] = [/* your events */];
const eventCount = getEventsCount(events, currentDate, "month");

// Generate calendar cells for month view
const cells = getCalendarCells(new Date("2024-01-15"));
// Returns array of { day: number, currentMonth: boolean, date: Date }

// Get currently active events
const activeEvents = getCurrentEvents(events);

// Group overlapping events for positioning
const dayEvents = events.filter(e => /* filter for specific day */);
const groups = groupEvents(dayEvents);

// Calculate visible hours range based on events
const visibleHours: TVisibleHours = { from: 8, to: 18 };
const { hours, earliestEventHour, latestEventHour } = getVisibleHours(visibleHours, events);

// Check if hour is within working hours
const workingHours: TWorkingHours = {
  0: { from: 0, to: 0 },
  1: { from: 9, to: 17 },
  2: { from: 9, to: 17 },
  3: { from: 9, to: 17 },
  4: { from: 9, to: 17 },
  5: { from: 9, to: 17 },
  6: { from: 0, to: 0 },
};
const monday = new Date("2024-01-15"); // Monday
console.log(isWorkingHour(monday, 10, workingHours)); // true
console.log(isWorkingHour(monday, 20, workingHours)); // false

```

--------------------------------

### Render Calendar with Different Views (TypeScript React)

Source: https://context7.com/lramos33/big-calendar/llms.txt

The ClientContainer component renders a calendar with various view types like day, week, month, year, and agenda. It's a core component for displaying calendar data based on the specified view.

```tsx
import { ClientContainer } from "@/calendar/components/client-container";
import { TCalendarView } from "@/calendar/types";

// Available views: "day" | "week" | "month" | "year" | "agenda"

// Day view with hourly breakdown
export function DayViewPage() {
  return <ClientContainer view="day" />;
}

// Week view with detailed time slots
export function WeekViewPage() {
  return <ClientContainer view="week" />;
}

// Month view with calendar grid
export function MonthViewPage() {
  return <ClientContainer view="month" />;
}

// Year view with all months overview
export function YearViewPage() {
  return <ClientContainer view="year" />;
}

// Agenda view with list of events
export function AgendaViewPage() {
  return <ClientContainer view="agenda" />;
}

// Dynamic view based on user selection
function DynamicCalendar({ view }: { view: TCalendarView }) {
  return (
    <div className="mx-auto max-w-screen-2xl p-4">
      <ClientContainer view={view} />
    </div>
  );
}

```

--------------------------------

### Define Event Data Structure (TypeScript)

Source: https://github.com/lramos33/big-calendar/blob/main/README.md

Defines the interface for calendar events, specifying required fields like id, title, dates, color, and user information. This structure is expected by the calendar component.

```typescript
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;
  };
}
```

--------------------------------

### ChangeWorkingHoursInput Component for Calendar Styling

Source: https://context7.com/lramos33/big-calendar/llms.txt

This component allows users to define working hours for each day of the week. Non-working hours are visually distinguished with a dashed background in the calendar's week and day views.

```tsx
import { ChangeWorkingHoursInput } from "@/calendar/components/change-working-hours-input";

function WorkingHoursSettings() {
  return (
    <div className="space-y-4">
      <h3>Working Hours Configuration</h3>
      <ChangeWorkingHoursInput />
      {/*
        Features:
        - Toggle each day on/off
        - Set custom from/to hours per day
        - Non-working hours show dashed background in week/day views
      */}
    </div>
  );
}

```

--------------------------------

### ChangeBadgeVariantInput Component for Calendar UI

Source: https://context7.com/lramos33/big-calendar/llms.txt

A React component that allows users to select the display style for calendar event badges. It supports 'dot', 'colored', and 'mixed' variants, influencing how events are visually represented.

```tsx
import { ChangeBadgeVariantInput } from "@/calendar/components/change-badge-variant-input";

// Place this component anywhere inside CalendarProvider
function CalendarSettings() {
  return (
    <div className="space-y-4">
      <h3>Display Settings</h3>
      <ChangeBadgeVariantInput />
      {/*
        Badge variants:
        - "dot": Shows a small colored dot next to event title
        - "colored": Shows event with full color background
        - "mixed": Combination of dot and colored styles
      */}
    </div>
  );
}

```

--------------------------------

### ChangeVisibleHoursInput Component for Calendar Views

Source: https://context7.com/lramos33/big-calendar/llms.txt

A UI component enabling users to configure the time range displayed in week and day calendar views. It can auto-expand to include events outside the initially set visible hours.

```tsx
import { ChangeVisibleHoursInput } from "@/calendar/components/change-visible-hours-input";

function TimeSettings() {
  return (
    <div className="space-y-4">
      <h3>Time Display Settings</h3>
      <ChangeVisibleHoursInput />
      {/*
        Allows setting from/to hours (e.g., 8 AM to 6 PM)
        If events fall outside visible hours,
        the range auto-expands to include them
      */}
    </div>
  );
}

```

--------------------------------

### Access and Modify Calendar State with useCalendar Hook

Source: https://context7.com/lramos33/big-calendar/llms.txt

The useCalendar hook provides convenient access to the calendar's global state managed by React Context. It allows components to read and update various aspects of the calendar, such as the selected date, event data, user filters, and display configurations like badge variants and working hours.

```tsx
import { useCalendar } from "@/calendar/contexts/calendar-context";

function CalendarControls() {
  const {
    selectedDate,
    setSelectedDate,
    selectedUserId,
    setSelectedUserId,
    events,
    setLocalEvents,
    users,
    badgeVariant,
    setBadgeVariant,
    workingHours,
    setWorkingHours,
    visibleHours,
    setVisibleHours,
  } = useCalendar();

  // Navigate to specific date
  const goToDate = () => {
    setSelectedDate(new Date("2024-02-01"));
  };

  // Filter events by user
  const filterByUser = (userId: string) => {
    setSelectedUserId(userId); // or "all" for all users
  };

  // Change badge display style
  const changeBadgeStyle = () => {
    setBadgeVariant("colored"); // "dot" | "colored" | "mixed"
  };

  // Update visible hours range (for week/day views)
  const setCustomHours = () => {
    setVisibleHours({ from: 8, to: 18 });
  };

  // Set working hours per day (0=Sunday, 6=Saturday)
  const setCustomWorkingHours = () => {
    setWorkingHours({
      0: { from: 0, to: 0 },     // Sunday - closed
      1: { from: 9, to: 17 },    // Monday
      2: { from: 9, to: 17 },    // Tuesday
      3: { from: 9, to: 17 },    // Wednesday
      4: { from: 9, to: 17 },    // Thursday
      5: { from: 9, to: 17 },    // Friday
      6: { from: 10, to: 14 },   // Saturday - half day
    });
  };

  return (
    <div>
      <p>Current Date: {selectedDate.toDateString()}</p>
      <p>Total Events: {events.length}</p>
      <p>Selected User: {selectedUserId}</p>
    </div>
  );
}

```

--------------------------------

### TypeScript Data Interfaces for Big Calendar

Source: https://context7.com/lramos33/big-calendar/llms.txt

Defines TypeScript interfaces and types for event and user data structures used within the Big Calendar component. These ensure type safety for event properties, user information, and calendar view configurations.

```tsx
import { TEventColor } from "@/calendar/types";

// Event color options
type TEventColor = "blue" | "green" | "red" | "yellow" | "purple" | "orange" | "gray";

// Calendar view types
type TCalendarView = "day" | "week" | "month" | "year" | "agenda";

// Badge display variants
type TBadgeVariant = "dot" | "colored" | "mixed";

// User interface
interface IUser {
  id: string;
  name: string;
  picturePath: string | null;
}

// Event interface
interface IEvent {
  id: number;
  startDate: string;  // ISO string format
  endDate: string;    // ISO string format
  title: string;
  color: TEventColor;
  description: string;
  user: IUser;
}

// Calendar cell for month view
interface ICalendarCell {
  day: number;
  currentMonth: boolean;
  date: Date;
}

// Working hours configuration (key is day of week: 0=Sunday to 6=Saturday)
type TWorkingHours = { [key: number]: { from: number; to: number } };

// Visible hours range for week/day views
type TVisibleHours = { from: number; to: number };

```

--------------------------------

### Update Event State with useUpdateEvent Hook (TypeScript)

Source: https://context7.com/lramos33/big-calendar/llms.txt

The useUpdateEvent hook manages local state updates for events, simulating backend API calls for production. It allows for rescheduling and changing event colors.

```tsx
import { useUpdateEvent } from "@/calendar/hooks/use-update-event";
import { IEvent } from "@/calendar/interfaces";

function EventEditor() {
  const { updateEvent } = useUpdateEvent();

  const handleReschedule = (event: IEvent, newStartDate: Date, newEndDate: Date) => {
    const updatedEvent: IEvent = {
      ...event,
      startDate: newStartDate.toISOString(),
      endDate: newEndDate.toISOString(),
    };
    updateEvent(updatedEvent);
  };

  const handleColorChange = (event: IEvent, newColor: IEvent["color"]) => {
    updateEvent({ ...event, color: newColor });
  };

  // Example: Move event by 1 hour
  const moveEventForward = (event: IEvent) => {
    const start = new Date(event.startDate);
    const end = new Date(event.endDate);
    start.setHours(start.getHours() + 1);
    end.setHours(end.getHours() + 1);
    handleReschedule(event, start, end);
  };

  return null;
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.