# 5. PRISE EN MAIN

# Prise en main de la grille interactive

[![Capture d'écran 2026-10-01 122338.png](https://wiki.infras.fr/uploads/images/gallery/2026-10/scaled-1680-/en264LL4yregXfqy-capture-decran-2026-10-01-122338.png)](https://wiki.infras.fr/uploads/images/gallery/2026-10/scaled-1680-/en264LL4yregXfqy-capture-decran-2026-10-01-122338.png)

### **Basculer entre l'affichage natif et l'affichage interactif**

Sur la page Agenda, à côté des cases à cocher de choix des calendriers (au-dessus de la grille), un lien permet de changer d'affichage :

- **« Affichage natif »** : revient à la grille classique de Dolibarr ;
- **« Affichage interactif »** : réactive la grille interactive.

Le choix est mémorisé pour votre compte utilisateur : il est conservé d'une session à l'autre, jusqu'à ce que vous cliquiez de nouveau sur le lien.

Par défaut, les utilisateurs qui ont le droit **« Utiliser la grille interactive »** voient la grille interactive dès leur première visite. L'administrateur peut inverser ce comportement avec le réglage **« Afficher la grille interactive par défaut »** : la grille native s'affiche alors d'abord, et chaque utilisateur active la grille interactive s'il le souhaite.

<p class="callout info">Les vues « Liste », « Par utilisateur » et « Par type » restent toujours celles de ***Dolibarr***.</p>

## **Naviguer dans l'agenda**

La navigation utilise les commandes habituelles de ***Dolibarr***, mais sans rechargement de la page :

<table id="bkmrk-commandeactionfl%C3%A8che" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 40%;"></col><col style="width: 60%;"></col></colgroup><tbody><tr><th class="align-left" style="background-color: rgb(202, 111, 30); color: rgb(255, 255, 255); border: 1px solid rgb(202, 111, 30); padding: 6px 10px; text-align: left; width: 40%;">Commande

</th><th class="align-left" style="background-color: rgb(202, 111, 30); color: rgb(255, 255, 255); border: 1px solid rgb(202, 111, 30); padding: 6px 10px; text-align: left; width: 60%;">Action

</th></tr><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">Flèches « &lt; » et « &gt; »

</td><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">Période précédente ou suivante.

</td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">Lien « Aujourd'hui »

</td><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">Revenir à la date du jour.

</td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">Boutons « Mois », « Semaine », « Jour »

</td><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">Changer de vue.

</td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">Champ de date du formulaire de filtres

</td><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">Aller directement à une date.

</td></tr></tbody></table>

Les filtres de la page (utilisateur, groupe, type d'événement, état, tiers, projet, ressource, catégorie...) sont appliqués à la grille interactive. Quand vous validez les filtres, seuls les événements sont rechargés, pas la page.

L'adresse de la page (URL) est tenue à jour à chaque changement de vue ou de période : vous pouvez la copier, la mettre en favori ou actualiser la page (F5) sans perdre votre position.

### **Dans les vues Semaine et Jour**

- La grille horaire défile automatiquement jusqu'à l'heure qui précède le début de la journée de travail de la société.
- Les heures ouvrées et les jours ouvrés (réglés dans **Accueil &gt; Configuration &gt; Affichage**) sont mis en évidence, les autres plages sont grisées.
- Un trait indique l'heure actuelle.
- Les numéros de semaine sont affichés.

Le premier jour de la semaine est celui défini dans la configuration de ***Dolibarr***.

## **Lire un événement dans la grille**

Chaque événement est un bloc coloré. Il affiche sur sa première ligne :

- l'heure de début (format 08:30) pour un événement horaire ; dans les vues Semaine et Jour, elle est suivie de la durée en clair (ex. « 08:30 · 30 min » ou « 14:00 · 1 h 30 ») ;
- le titre de l'événement ;
- des marques d'état (voir tableau ci-dessous).

<table id="bkmrk-marquesignification%C2%AB" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 25%;"></col><col style="width: 75%;"></col></colgroup><tbody><tr><th class="align-left" style="background-color: rgb(202, 111, 30); color: rgb(255, 255, 255); border: 1px solid rgb(202, 111, 30); padding: 6px 10px; text-align: left; width: 25%;">Marque

</th><th class="align-left" style="background-color: rgb(202, 111, 30); color: rgb(255, 255, 255); border: 1px solid rgb(202, 111, 30); padding: 6px 10px; text-align: left; width: 75%;">Signification

</th></tr><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">« 45 % »

</td><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">Événement en cours, avec son avancement.

</td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">Coche

</td><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">Événement terminé (son titre est barré et le bloc est légèrement estompé).

</td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">Cadenas

</td><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">Événement non modifiable (droit insuffisant ou événement créé automatiquement par Dolibarr).

</td></tr></tbody></table>

Sur la deuxième ligne figurent les informations choisies par l'administrateur (voir 9.3) : tiers, contact, lieu, utilisateurs assignés, projet, état, début de la description. Elles sont séparées par un point médian.

Dans les vues Semaine et Jour, la hauteur du bloc représente la durée. Un bloc trop bas pour deux lignes n'affiche que la première ; le reste est visible dans l'infobulle.

Un événement sur la journée entière s'affiche en bandeau en haut du jour, sans heure.

### **Couleur d'un événement (ordre de priorité)**

1. La couleur de son type, si la coloration par type est active et qu'une couleur est définie pour ce type dans l'onglet **« Couleurs »**
2. Sinon, la couleur du propriétaire de l'événement (fiche utilisateur, champ « Couleur ») ;
3. Sinon, une couleur du thème attribuée par propriétaire.

La nuance éventuellement choisie dans la fenêtre (voir 6.6) s'applique ensuite. La couleur du texte (noir ou blanc) est choisie automatiquement pour rester lisible sur le fond.

## **Infobulle au survol**

Laissez la souris sur un événement : une infobulle affiche son résumé complet. Elle se place à côté de la colonne du jour, jamais par-dessus les autres événements du même jour, qui restent accessibles.

Selon le réglage choisi par l'administrateur (voir 9.2) :

<table id="bkmrk-r%C3%A9glageaffichagecart" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 25%;"></col><col style="width: 75%;"></col></colgroup><tbody><tr><th class="align-left" style="background-color: rgb(202, 111, 30); color: rgb(255, 255, 255); border: 1px solid rgb(202, 111, 30); padding: 6px 10px; text-align: left; width: 25%;">Réglage

</th><th class="align-left" style="background-color: rgb(202, 111, 30); color: rgb(255, 255, 255); border: 1px solid rgb(202, 111, 30); padding: 6px 10px; text-align: left; width: 75%;">Affichage

</th></tr><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">Carte

</td><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">Bandeau de la couleur de l'événement, type, état, titre, puis une ligne par information (dates et durée, lieu, tiers, contact, utilisateurs, projet), et le début de la description.

</td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">Compacte

</td><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">Petite infobulle sombre avec les mêmes informations sur quelques lignes.

</td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">Aucune

</td><td style="border: 1px solid rgb(204, 204, 204); padding: 6px 10px; vertical-align: top;">Pas d'infobulle.

</td></tr></tbody></table>

Pour un événement non modifiable, l'infobulle le précise (« Événement non modifiable »).

## **Liste des événements d'un jour (« +N »)**

En vue Mois, quand un jour contient plus d'événements que la grille ne peut en afficher (3 par défaut, nombre modifiable par l'option cachée `<span class="editor-theme-code">AGENDA_MAX_EVENTS_DAY_VIEW</span>` de Dolibarr), un lien « +N » apparaît.

- Cliquez sur « +N » pour ouvrir la liste complète des événements du jour.
- Si le réglage « Ouvrir la liste du jour au survol » est actif (voir 9.2), il suffit de laisser la souris un instant sur ce jour : la liste s'ouvre d'elle-même, et se referme quand la souris quitte la liste et le jour.

Depuis cette liste, vous pouvez cliquer sur un événement pour l'ouvrir et le survoler pour voir son infobulle.