MuviCalendar

A dynamic calendar component with drag-and-drop and resize functionalities, built with React and TypeScript.

Installation

npm install muvi-calendar
# or
yarn add muvi-calendar
# or
pnpm add muvi-calendar

Usage

import { MuviCalendar } from 'muvi-calendar';
import 'muvi-calendar/dist/index.css'; // Import styles

function App() {
  const venues = [
    { id: '1', name: 'Venue 1', color: '#ff6b6b' },
    { id: '2', name: 'Venue 2', color: '#4ecdc4' },
  ];

  const items = [
    {
      id: '1',
      start_date: '2024-04-18T10:00:00Z',
      end_date: '2024-04-18T12:00:00Z',
      duration: 120,
      name: 'Event 1',
      stage_id: '1',
    },
  ];

  const days = ['2024-04-18', '2024-04-19', '2024-04-20'];

  const handleItemMove = async (
    itemId: string,
    newStartDate: string,
    newVenueId: string
  ) => {
    // Handle item movement
    console.log('Item moved:', itemId, newStartDate, newVenueId);
  };

  const handleClick = (item: any) => {
    console.log('Item clicked:', item);
  };

  const handleScheduleEvent = (date: string, venueId: string) => {
    console.log('Schedule event:', date, venueId);
  };

  return (
    <MuviCalendar
      venues={venues}
      items={items}
      days={days}
      onItemMove={handleItemMove}
      onClick={handleClick}
      scheduleEvent={handleScheduleEvent}
      timezone="Z"
    />
  );
}

Props

CalendarGridProps

| Prop | Type | Required | Description | | -------------------- | --------------------- | -------- | ----------------------------------------------- | | venues | VenueProps[] | Yes | Array of venue objects | | items | ItemProps[] | Yes | Array of event items | | days | string[] | Yes | Array of date strings (YYYY-MM-DD format) | | onItemMove | Function | Yes | Callback when an item is moved | | onClick | Function | Yes | Callback when an item is clicked | | scheduleEvent | Function | Yes | Callback when scheduling a new event | | timezone | string | No | Timezone offset (e.g., '-03:00', '+05:30', 'Z') | | onResize | Function | No | Callback when an item is resized | | onClickEmpty | Function | No | Callback when clicking on empty space | | itemDetails | boolean | No | Show item details modal | | customModal | React.ComponentType | No | Custom modal component | | CustomHeader | React.ComponentType | No | Custom header component | | CustomVenueButtons | React.ComponentType | No | Custom venue buttons component | | itemConfig | ItemConfig | No | Configuration for item rendering | | venueConfig | VenueConfig | No | Configuration for venue rendering | | styleProps | StyleProps | No | Styling configuration | | loading | ReactNode | No | Loading component | | loadingStyle | CSSProperties | No | Loading styles | | actionBar | any | No | Action bar configuration |

Types

VenueProps

interface VenueProps {
  id: string;
  name: string;
  color?: string;
  open_times?: OpenTimes[];
}

ItemProps

interface ItemProps {
  id: string;
  start_date: number | string | null;
  end_date?: number | string | null;
  duration: number;
  name?: string;
  category?: string;
  icon?: string | ElementType | ReactNode;
  artist?: string;
  className?: string;
  style?: CSSProperties;
  stage_id: string | null;
}

Features

• Drag and Drop: Move events between venues and time slots
• Resize: Resize events by dragging their edges
• Promise-based Operations: Support for async operations with loading states
• Customizable UI: Extensive styling and component customization options
• Timezone Support: Full timezone handling with dayjs
• TypeScript: Full TypeScript support with comprehensive type definitions
• Responsive Design: Works on desktop and mobile devices

License

MIT