lfc-calendar-ui-drag-drop

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

Instalacao

npm i lfc-calendar-ui-drag-drop

Uso

import { useState } from 'react';
import Calendar from 'lfc-calendar-ui-drag-drop';

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

const holidays = [
  { date: '2026-03-23', name: 'Aniversario da cidade' },
  { date: '2026-03-29', name: 'Feriado local' }
];

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

  return (
    <Calendar
      items={items}
      holidays={holidays}
      initialView="month"
      allowDragAndDrop={true}
      onItemClick={(item, event) => {
        console.log('Item clicado', item);
        console.log('Shift pressionado', event.shiftKey);
      }}
      onDayClick={({ date, items, holiday }, event) => {
        console.log('Dia clicado', { date, items, holiday });
        console.log('Ctrl pressionado', event.ctrlKey);
      }}
      onMonthYearChange={({ month, year, date }) => {
        console.log('Periodo alterado', { month, year, date });
      }}
      onItemMove={(item, newDate) => {
        setItems((currentItems) =>
          currentItems.map((currentItem) =>
            currentItem.id === item.id ? { ...currentItem, date: newDate } : currentItem
          )
        );
      }}
    />
  );
}

Props

• items: array de itens no formato { id, title, subtitle, color, date }
• items: se itens do mesmo dia compartilharem a propriedade key, eles ganham uma ligacao visual sutil indicando que pertencem ao mesmo grupo
• holidays: array de feriados. Aceita ['2026-03-23'] ou [{ date: '2026-03-23', name: 'Feriado' }]
• initialView: 'month' | 'week' | 'day'
• initialDate: objeto Date
• onItemMove: callback chamado ao mover um item
• onItemClick: callback chamado ao clicar em um item. Retorna (item, event)
• onDayClick: callback chamado ao clicar em um dia. Retorna ({ date, items, holiday }, event)
• onMonthYearChange: callback chamado quando o mes/ano visivel muda. Retorna { month, year, date }
• allowDragAndDrop: habilita ou desabilita o drag and drop do calendario inteiro
• Estilo: import 'lfc-calendar-ui-drag-drop/style.css'

Desenvolvimento local

npm install
npm run dev

Build da biblioteca

npm run build