Calendar Test Module

A simple, customizable React calendar component for events management.

Installation

npm install calendar-test-module
# or
yarn add calendar-test-module

Usage

// Import the CSS
import 'calendar-test-module/dist/calendar-module.css';
// Import the component
import { EventCalendar } from 'calendar-test-module';

function MyCalendar() {
  const events = [
    {
      id: '1',
      title: 'Team Meeting',
      start: new Date(2023, 9, 12, 10, 0),
      end: new Date(2023, 9, 12, 11, 30),
      color: 'blue',
    },
    // More events...
  ];

  const handleEventAdd = (event) => {
    console.log('Event added:', event);
  };

  const handleEventUpdate = (event) => {
    console.log('Event updated:', event);
  };

  const handleEventDelete = (eventId) => {
    console.log('Event deleted:', eventId);
  };

  return (
    <EventCalendar
      events={events}
      onEventAdd={handleEventAdd}
      onEventUpdate={handleEventUpdate}
      onEventDelete={handleEventDelete}
      initialView="month"
    />
  );
}

Styling

This module includes all necessary CSS. You must import the CSS file for the component to display correctly:

import 'calendar-test-module/dist/calendar-module.css';

If you're using Next.js, add the import to your layout or page component:

// app/layout.js or pages/_app.js
import 'calendar-test-module/dist/calendar-module.css';

Props

| Prop | Type | Description | |------|------|-------------| | events | CalendarEvent[] | Array of events to display in the calendar | | onEventAdd | (event: CalendarEvent) => void | Callback when a new event is added | | onEventUpdate | (event: CalendarEvent) => void | Callback when an event is updated | | onEventDelete | (eventId: string) => void | Callback when an event is deleted | | initialView | "month" \| "week" \| "day" \| "agenda" | Initial calendar view |

Types

interface CalendarEvent {
  id: string;
  title: string;
  start: Date;
  end: Date;
  color?: EventColor;
  description?: string;
  location?: string;
}

type EventColor = 'blue' | 'green' | 'red' | 'yellow' | 'purple';

type CalendarView = 'month' | 'week' | 'day' | 'agenda';

License

MIT