113 lines
4.6 KiB
Markdown
113 lines
4.6 KiB
Markdown
---
|
|
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
|