---
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é)

```yaml
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)

```bash
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](https://github.com/sabre-io/Baikal) (serveur CalDAV/CardDAV), [Nextcloud Calendar](https://nextcloud.com/calendar/) (intégré à Nextcloud), [DAVx⁵](https://www.davx5.com/) (client Android CalDAV)
- **UI moderne alternative** : [Cal.com](https://github.com/calcom/cal.com) (prise de RDV, plus booking-oriented), [Easy!Appointments](https://github.com/alextselegidis/easyappointments) (PHP, prise de RDV)
- **Propriétaire** : Google Calendar, Apple iCloud Calendar, Outlook.com (excellent mais fermés)
- **Mobile** : [ICSx⁵](https://icsx5.bitfire.at/) (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

- [selfh.st — Calendar](https://selfh.st/apps/?tag=calendar)
- [GitHub dotnetfactory/fluid-calendar](https://github.com/dotnetfactory/fluid-calendar)
- [Demo live](https://demo.fluid-calendar.app) (si disponible)

## Pages Liées

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