🗓️ antd-week-planner-react

A fully customizable week planner & scheduler component for React, built with Ant Design and TypeScript.
Easily manage weekly events with drag, resize, custom modals, and beautiful Ant Design integration.

🚀 Installation

npm install antd-week-planner-react antd dayjs
# or
yarn add antd-week-planner-react antd dayjs

✅ Note: Make sure you have react, react-dom, antd, and dayjs installed in your project.

🧩 Usage

import React, { useState } from "react";
import { WeekPlanner } from "antd-week-planner-react";
import "antd-week-planner-react/dist/styles";

const App = () => {
  const [events, setEvents] = useState([
    {
      id: "1",
      title: "Team planning meeting",
      start: new Date("2024-07-25T09:00:00"),
      end: new Date("2024-07-25T09:30:00"),
      color: "#1890ff",
      description: "Discuss project roadmap",
    },
    {
      id: "2",
      title: "Breakfast with Tom",
      start: new Date("2024-07-25T10:00:00"),
      end: new Date("2024-07-25T11:00:00"),
      color: "#ff4d4f",
      description: "Catch up with Tom",
    },
  ]);

  const offDays = [0, 5]; // Hide Sunday and Friday

  return (
    <WeekPlanner
      events={events}
      offDays={offDays}
      onEventAdd={(newEvent) => setEvents((prev) => [...prev, newEvent])}
      onEventUpdate={(updatedEvent) =>
        setEvents((prev) =>
          prev.map((e) => (e.id === updatedEvent.id ? updatedEvent : e))
        )
      }
      onEventClick={(event) => alert(`Clicked: ${event.title}`)}
      showViewSwitch
      showOffDaysToggle
      headerTitle={<h2>My Week Planner</h2>}
      footer={<div>Footer content here</div>}
      eventColor="#1890ff"
    />
  );
};

export default App;

🧠 Props Reference

🔹 Basic Props

| Prop | Type | Description | |----------------|------------------------------|---------------------------------------------| | events | PlannerEvent[] | Array of events to render in the week view. | | onEventAdd | (event: PlannerEvent) => void | Triggered when a new event is added. | | onEventUpdate | (event: PlannerEvent) => void | Triggered when an event is resized or updated. | | onEventClick | (event: PlannerEvent) => void | Triggered when an event is clicked. |

🔹 Days & Calendar Display

| Prop | Type | Default | Description | |------------------------|-----------|---------|---------------------------------------------| | offDays | number[] | [] | Days to hide (0 = Sunday, 6 = Saturday). | | hourFormat | 12 | 24 | 12 | Display hours in 12-hour or 24-hour format. | | hideHeader | boolean | false | Hide the planner header section. |

🔹 Controls & Customization

| Prop | Type | Description | |-------------------------|---------------------|---------------------------------------------| | showViewSwitch | boolean | Show toggle between week/day view. | | showOffDaysToggle | boolean | Toggle to show/hide off days dynamically. | | renderDayButton | React.ReactNode | Custom render for day-view button. | | renderWeekButton | React.ReactNode | Custom render for week-view button. | | controlPortalParentId | string | Render controls in a portal (by parent ID). | | customControls | React.ReactNode | Fully custom controls section. |

🔹 Custom Modal

You can override the default modal by passing a custom React component.

const MyCustomModal = ({ isOpen, onClose, onSave, defaultStart, defaultEnd }) => (
  <Modal
    title="Custom Event"
    open={isOpen}
    onCancel={onClose}
    onOk={() => onSave({ title: "New Event", start: defaultStart, end: defaultEnd })}
  >
    <p>Custom content here...</p>
  </Modal>
);

// usage
<WeekPlanner CustomModal={MyCustomModal} />;

| Prop | Type | Description | |-------------|---------------------------------------------------------------------|------------------------------------------| | CustomModal | React.ComponentType<{ isOpen, onClose, onSave, defaultStart, defaultEnd }> | Replace the built-in event creation modal. |

🔹 Header & Footer

| Prop | Type | Description | |-----------------|---------------------|---------------------------------------| | headerTitle | React.ReactNode | Custom title for the planner header. | | headerClassName | string | Custom class for header container. | | headerStyle | React.CSSProperties | Inline styles for header. | | footer | React.ReactNode | Footer slot (like Antd modals). | | footerClassName | string | Custom class for footer. | | footerStyle | React.CSSProperties | Inline styles for footer. |

🔹 Grid & Event Styling

| Prop | Type | Description | |----------------|----------------------------------------|------------------------------------| | gridClassName | string | Custom class for grid container. | | gridStyle | React.CSSProperties | Inline styles for grid container. | | eventClassName | string | (event: PlannerEvent) => string | Customize class for each event. | | eventStyle | React.CSSProperties | (event: PlannerEvent) => React.CSSProperties | Inline styles per event. | | eventColor | string | Default color for events. |

🎨 Styling

Make sure to import the CSS for styles:

import "antd-week-planner-react/dist/styles"

🧩 Type Definitions

interface PlannerEvent {
  id: string;
  title: string;
  start: Date;
  end: Date;
  color?: string;
  description?: string;
}

🧾 License

MIT © [Muhammad Awais Zeeshan]

🌟 Support

If you like this project, please ⭐ it on GitHub — it helps others discover it!