title: FluidCalendar created: 2026-06-07 updated: 2026-06-07 type: app tags: [catalogue, calendar, typescript, nextjs, tasks, modern-ui] confidence: high contested: false sources: [https://selfh.st/apps/?tag=calendar, https://github.com/dotnetfactory/fluid-calendar]

FluidCalendar 📅

Interface calendrier moderne (Next.js + TypeScript) avec vue agenda, tâches, intégration CalDAV et design soigné façon Apple Calendar.

Métadonnée	Valeur
Site web	https://fluid-calendar.app
GitHub	https://github.com/dotnetfactory/fluid-calendar
License	MIT
Langage	TypeScript (Next.js)
Étoiles	63 ⭐
Dernière MAJ	2025
Catégorie	cat-calendar

Description

FluidCalendar est une application web élégante pensée comme une alternative moderne aux interfaces vieillissantes (Radicale web UI, generic CalDAV clients). Le projet mise tout sur l'expérience utilisateur : typographie soignée, animations fluides, vues multiples (jour, semaine, mois, agenda), drag-and-drop pour déplacer des événements, et un mode sombre bien calibré.

Côté fonctionnalités, FluidCalendar supporte les comptes CalDAV (lecture/écriture sur un serveur app-radicale, app-baikal ou Nextcloud existant), la gestion de tâches intégrée avec deadlines et priorités, et la synchronisation multi-comptes (superposition de plusieurs calendriers en couleurs). Une API REST permet l'intégration avec des outils tiers.

L'architecture est Next.js 14 avec App Router, base PostgreSQL ou SQLite au choix, authentification par magic-link ou credentials. Le déploiement se fait classiquement via Docker ou en one-click sur Vercel. C'est probablement l'UI calendrier la plus « design » du moment dans l'écosystème self-hosted.

Installation

Docker Compose (recommandé)

services:
  fluidcalendar:
    image: ghcr.io/dotnetfactory/fluid-calendar:latest
    container_name: fluidcalendar
    restart: unless-stopped
    environment:
      - DATABASE_URL=postgresql://fluid:***@db:5432/fluid
      - NEXTAUTH_SECRET=change...ndom
      - NEXTAUTH_URL=https://cal.example.com
    depends_on:
      - db
    ports:
      - "3000:3000"
  db:
    image: postgres:16-alpine
    container_name: fluid-db
    restart: unless-stopped
    environment:
      - POSTGRES_USER=fluid
      - POSTGRES_PASSWORD=changeme
      - POSTGRES_DB=fluid
    volumes:
      - fluid-db:/var/lib/postgresql/data

volumes:
  fluid-db:

Manuelle (Node.js)

git clone https://github.com/dotnetfactory/fluid-calendar.git
cd fluid-calendar
npm install
cp .env.example .env  # éditer DATABASE_URL, NEXTAUTH_SECRET
npm run build
npm start

Configuration

Premier lancement : créer le compte admin via l'UI.
Ajouter des comptes CalDAV : URL du serveur (Radicale, Baïkal, Nextcloud), identifiants, intervalle de synchro.
Configurer les calendriers visibles par défaut et leurs couleurs.
Activer les notifications (email ou web-push) pour les événements à venir.
Optionnel : intégrer un serveur SMTP pour les invitations.

Alternatives

Open Source : app-radicale (serveur CalDAV minimal, UI austère), Baïkal (serveur CalDAV/CardDAV), Nextcloud Calendar (intégré à Nextcloud), DAVx⁵ (client Android CalDAV)
UI moderne alternative : Cal.com (prise de RDV, plus booking-oriented), Easy!Appointments (PHP, prise de RDV)
Propriétaire : Google Calendar, Apple iCloud Calendar, Outlook.com (excellent mais fermés)
Mobile : ICSx⁵ (Android open source pour CalDAV)

Sécurité

NEXTAUTH_SECRET : obligatoire, doit être long et aléatoire (openssl rand -hex 32).
HTTPS : indispensable (magic-links d'auth dans les emails).
Reverse-proxy : Caddy/Traefik/Nginx avec HSTS, headers de sécurité.
DB credentials : variables d'environnement, jamais en clair.
Backups : exporter régulièrement la base Postgres (qui contient les comptes et préférences).

Ressources

Pages Liées

cat-calendar
recettes-docker-compose
app-radicale — serveur CalDAV compatible
app-baikal — alternative CalDAV

4.6 KiB Raw Blame History