Prise en main

Bienvenue dans DayFlow ! Ce guide vous accompagne pas à pas jusqu'à votre premier calendrier.

Installation

CLI (recommandé)

Lancez l'assistant de configuration interactif : il détecte votre gestionnaire de paquets, vous laisse choisir un framework et des plugins, puis installe le tout en une seule étape.

npm create dayflow@latest

pnpm create dayflow@latest

yarn create dayflow

bun create dayflow@latest

Terminal

Installation manuelle

Vous préférez installer les paquets vous-même ? Sélectionnez votre framework et votre gestionnaire de paquets :

npm install @dayflow/react @dayflow/core

pnpm add @dayflow/react @dayflow/core

yarn add @dayflow/react @dayflow/core

bun add @dayflow/react @dayflow/core

Importer les styles DayFlow

Important : vous devez importer les styles DayFlow dans votre application. Ajoutez cet import à votre composant App principal ou à votre fichier de mise en page :

// In App.tsx or layout.tsx
import '@dayflow/core/dist/styles.css';

Vous pouvez également l'importer depuis votre fichier CSS :

/* src/index.css */
@import '@dayflow/core/dist/styles.css';

Vous utilisez Tailwind CSS ?

Importez plutôt styles.components.css afin d'éviter les conflits entre le reset CSS et vos styles existants :

@import '@dayflow/core/dist/styles.components.css';
@import 'tailwindcss';

Consultez l'intégration de Tailwind v4 pour plus de détails.

Astuce : si vous utilisez l'assistant create-dayflow et répondez « Oui » pour Tailwind CSS, cet import sera ajouté automatiquement.

Utilisation de base

Sélectionnez votre framework pour voir comment intégrer DayFlow dans votre application.

import {
  useCalendarApp,
  DayFlowCalendar,
  createDayView,
  createWeekView,
  createMonthView,
  createEventsPlugin,
} from '@dayflow/react';
import { createDragPlugin } from '@dayflow/plugin-drag';
import { createEvent, createAllDayEvent } from '@dayflow/core';
import '@dayflow/core/dist/styles.css';

function App() {
  const calendar = useCalendarApp({
    views: [createDayView(), createWeekView(), createMonthView()],
    plugins: [createDragPlugin(), createEventsPlugin()],
    calendars: [
      {
        id: 'work',
        name: 'Work',
        colors: {
          lineColor: '#2563eb',
          eventColor: '#dbeafe',
          eventSelectedColor: '#bfdbfe',
          textColor: '#1e3a8a',
        },
      },
    ],
    events: [
      createEvent({
        id: '1',
        title: 'Team Meeting',
        start: new Date(2025, 10, 15, 10, 0),
        end: new Date(2025, 10, 15, 11, 0),
        calendarId: 'work',
      }),
      createAllDayEvent({
        id: '2',
        title: 'Conference',
        start: new Date(2025, 10, 20),
        calendarId: 'work',
      }),
    ],
    initialDate: new Date(),
  });

  return <DayFlowCalendar calendar={calendar} />;
}

<template>
  <DayFlowCalendar :calendar="calendar" />
</template>

<script setup>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/vue';
  import {
    createDayView,
    createWeekView,
    createMonthView,
    createEventsPlugin,
    createEvent,
    createAllDayEvent
  } from '@dayflow/core';
  import { createDragPlugin } from '@dayflow/plugin-drag';
  import '@dayflow/core/dist/styles.css';

  const calendar = useCalendarApp({
    views: [createDayView(), createWeekView(), createMonthView()],
    plugins: [createDragPlugin(), createEventsPlugin()],
    calendars: [
      {
        id: 'work',
        name: 'Work',
        colors: {
          lineColor: '#2563eb',
          eventColor: '#dbeafe',
          eventSelectedColor: '#bfdbfe',
          textColor: '#1e3a8a',
        },
      },
    ],
    events: [
      createEvent({
        id: '1',
        title: 'Team Meeting',
        start: new Date(2025, 10, 15, 10, 0),
        end: new Date(2025, 10, 15, 11, 0),
        calendarId: 'work',
      }),
      createAllDayEvent({
        id: '2',
        title: 'Conference',
        start: new Date(2025, 10, 20),
        calendarId: 'work',
      }),
    ],
    initialDate: new Date(),
  });
</script>

import { Component } from '@angular/core';
import {
  createDayView,
  createWeekView,
  createMonthView,
  createEventsPlugin,
  createEvent,
  createAllDayEvent
} from '@dayflow/core';
import { createDragPlugin } from '@dayflow/plugin-drag';
import { DayFlowCalendarModule } from '@dayflow/angular';
import '@dayflow/core/dist/styles.css';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DayFlowCalendarModule],
  template: `
    <dayflow-calendar [calendar]="calendar"></dayflow-calendar>
  `
})
export class AppComponent {
  calendar = {
    views: [createDayView(), createWeekView(), createMonthView()],
    plugins: [createDragPlugin(), createEventsPlugin()],
    calendars: [
      {
        id: 'work',
        name: 'Work',
        colors: {
          lineColor: '#2563eb',
          eventColor: '#dbeafe',
          eventSelectedColor: '#bfdbfe',
          textColor: '#1e3a8a',
        },
      },
    ],
    events: [
      createEvent({
        id: '1',
        title: 'Team Meeting',
        start: new Date(2025, 10, 15, 10, 0),
        end: new Date(2025, 10, 15, 11, 0),
        calendarId: 'work',
      }),
      createAllDayEvent({
        id: '2',
        title: 'Conference',
        start: new Date(2025, 10, 20),
        calendarId: 'work',
      }),
    ],
    initialDate: new Date(),
  };
}

<script>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/svelte';
  import {
    createDayView,
    createWeekView,
    createMonthView,
    createEventsPlugin,
    createEvent,
    createAllDayEvent
  } from '@dayflow/core';
  import { createDragPlugin } from '@dayflow/plugin-drag';
  import '@dayflow/core/dist/styles.css';

  const calendar = useCalendarApp({
    views: [createDayView(), createWeekView(), createMonthView()],
    plugins: [createDragPlugin(), createEventsPlugin()],
    calendars: [
      {
        id: 'work',
        name: 'Work',
        colors: {
          lineColor: '#2563eb',
          eventColor: '#dbeafe',
          eventSelectedColor: '#bfdbfe',
          textColor: '#1e3a8a',
        },
      },
    ],
    events: [
      createEvent({
        id: '1',
        title: 'Team Meeting',
        start: new Date(2025, 10, 15, 10, 0),
        end: new Date(2025, 10, 15, 11, 0),
        calendarId: 'work',
      }),
      createAllDayEvent({
        id: '2',
        title: 'Conference',
        start: new Date(2025, 10, 20),
        calendarId: 'work',
      }),
    ],
    initialDate: new Date(),
  });
</script>

<DayFlowCalendar {calendar} />

Personnaliser les styles

Par défaut, le calendrier occupe toute la largeur de son conteneur. Vous pouvez personnaliser la hauteur et les autres styles en CSS. Par exemple, pour définir une hauteur responsive :

.df-calendar-container {
  --df-calendar-height: 760px !important;
  height: var(--df-calendar-height, 760px) !important;
}

@media (max-width: 768px) {
  .df-calendar-container {
    --df-calendar-height: 550px !important;
  }
}

Remarque : la bibliothèque utilise l'API Temporal moderne pour la gestion des dates et des heures. Les fonctions utilitaires (createEvent) permettent de créer des événements sans manipuler Temporal directement.