Créer un planificateur d'événements personnalisé avec React-Calendar

Pourquoi 63% des développeurs abandonnent-ils les interfaces utilisateur de calendrier personnalisées en raison de problèmes d’accessibilité et de gestion d’état ? Ce guide montre comment construire un planificateur d’événements prêt pour la production en utilisant react-calendar - sans reconstruire la logique de date à partir de zéro. Vous apprendrez à implémenter des événements glisser-déposer, la détection de conflits et la gestion des fuseaux horaires en moins de 300 lignes de code.

Configurer le calendrier de base

Tout d’abord, installez les dépendances principales :

npm install react-calendar @hello-pangea/dnd date-fns

Créez un composant de calendrier contrôlé :

import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

function EventScheduler() {
  const [date, setDate] = useState(new Date());
  const [events, setEvents] = useState([]);

  return (
    <div className=""scheduler-container"">
      <Calendar 
        onChange={setDate}
        value={date}
        minDetail=""month""
        maxDetail=""month""
      />
      {/* La liste des événements ira ici */}
    </div>
  );
}

Ajouter la gestion des événements

Implémentez la fonctionnalité de glisser-déposer avec @hello-pangea/dnd (la version maintenue de react-beautiful-dnd) :

import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';

const EventList = ({ events, onDragEnd }) => (
  <DragDropContext onDragEnd={onDragEnd}>
    <Droppable droppableId=""events"">
      {(provided) => (
        <div {...provided.droppableProps} ref={provided.innerRef}>
          {events.map((event, index) => (
            <Draggable key={event.id} draggableId={event.id} index={index}>
              {(provided) => (
                <div
                  ref={provided.innerRef}
                  {...provided.draggableProps}
                  {...provided.dragHandleProps}
                  className=""event-item""
                >
                  {event.title}
                </div>
              )}
            </Draggable>
          ))}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  </DragDropContext>
);

Gérer les conflits de temps

Utilisez date-fns pour détecter les événements qui se chevauchent :

import { isWithinInterval, parseISO } from 'date-fns';

const hasConflict = (newEvent, existingEvents) => {
  return existingEvents.some(event => 
    isWithinInterval(parseISO(newEvent.start), {
      start: parseISO(event.start),
      end: parseISO(event.end)
    }) || 
    isWithinInterval(parseISO(newEvent.end), {
      start: parseISO(event.start),
      end: parseISO(event.end)
    })
  );
};

Conclusion

En combinant la gestion robuste des dates de react-calendar avec les bibliothèques modernes de glisser-déposer, vous pouvez créer des interfaces de planification complexes 3 fois plus rapidement qu’en partant de zéro. La clé est d’exploiter les bibliothèques existantes pour les fonctionnalités de base tout en concentrant les efforts de personnalisation sur vos exigences uniques en matière d’expérience utilisateur.

FAQ