calendar-react-js-demo

Componente de calendario para React com visualizacao de mes, semana e dia, navegacao e drag and drop.

Instalacao

npm i calendar-react-js-demo

Uso

import { useState } from 'react';
import Calendar from 'calendar-react-js-demo';

const initialItems = [
  {
    id: '1',
    name: 'Joao Silva',
    role: 'Desenvolvedor',
    color: '#2196F3',
    date: '2026-03-23'
  }
];

export default function App() {
  const [items, setItems] = useState(initialItems);

  return (
    <Calendar
      items={items}
      initialView="month"
      allowDragAndDrop={true}
      onItemMove={(item, newDate) => {
        setItems((currentItems) =>
          currentItems.map((currentItem) =>
            currentItem.id === item.id ? { ...currentItem, date: newDate } : currentItem
          )
        );
      }}
    />
  );
}

Props

• items: array de itens no formato { id, name, role, color, date }
• initialView: 'month' | 'week' | 'day'
• initialDate: objeto Date
• onItemMove: callback chamado ao mover um item
• allowDragAndDrop: habilita ou desabilita o drag and drop do calendario inteiro

Desenvolvimento local

npm install
npm run dev

Build da biblioteca

npm run build