React Calendar Views

A modern React calendar component library that provides flexible week and day views with drag-and-drop event management.

Features

• 🗓️ Multiple Views: Choose between WeekView and DayView components
• 🖱️ Drag & Drop: Intuitive drag-and-drop interface for event management
• ⚡ Responsive: Fully responsive design that works across all device sizes
• 🎨 Customizable: Easy styling with TailwindCSS and custom CSS properties
• 💪 TypeScript: Built with TypeScript for enhanced code reliability
• 🌐 i18n Ready: Supports multiple languages through simple translation objects

Installation

1. Install the package (using your favorite package manager):

npm install @boemjay/pax-calendar

2. Import the calendar styles in your main JavaScript file:

import "@boemjay/pax-calendar/dist/style.css";

Usage

Week View Example:

import { CalendarWeekView } from "@boemjay/pax-calendar";

function App() {
  return (
    <CalendarWeekView
      onChange={(events) => console.log("Calendar events:", events)}
    />
  );
}

Day View Example:

import { CalendarDayView } from "@boemjay/pax-calendar";

function App() {
  return <CalendarDayView labels={{ clearSchedule: "Remove everything" }} />;
}

Component Props

Common Props

Both CalendarWeekView and CalendarDayView share these props:

| Name | Type | Description | | ---------- | --------------------------- | ------------------------------------------ | | onChange | (events: Event[]) => void | Callback fired when calendar events change | | labels | Partial<Translations> | Translations object for customizing text |

Translations Interface

type Translations = {
  clearSchedule: string;
  defaultEventTitle: string;
  editEventTitle: string;
  editEventStartTime: string;
  editEventEndTime: string;
  cancel: string;
  save: string;
  edit: string;
  delete: string;
  // WeekView only
  weekdays?: [string, string, string, string, string, string, string];
  applyScheduleForWeek?: string;
  tip?: string;
  // DayView only
  dayname?: string;
};

🤝 Contributing

We welcome contributions! If you find a bug or have an idea for improvement, please open an issue or submit a pull request.

1. Fork it
2. Create your feature branch (git checkout -b new-feature)
3. Commit your changes (git commit -am 'Add feature')
4. Push to the branch (git push origin new-feature)
5. Create a new Pull Request

License

This project is licensed under the MIT License.