---
title: "Widget planning"
description: "Afficher le calendrier des disponibilités d’un hébergement sur sa fiche, et personnaliser son rendu."
canonical_url: "https://docs.millcheck.fr/widgets/planning"
---
# Widget planning

> Afficher le calendrier des disponibilités d’un hébergement sur sa fiche, et personnaliser son rendu.

Le widget planning affiche, mois par mois, les disponibilités d’un hébergement. Lorsque l’objet comporte **au moins deux entités** (chambres, types de logement…), un sélecteur permet de passer de l’une à l’autre.

<planning-preview>



</planning-preview>

## Code d’intégration

```html
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://api.millcheck.fr/widgets/v1.2/widget.js"></script>

<div class="millcheck-widget" data-id="111111" data-lang="fr" data-day-format="short"></div>
```

### Décomposition du code

<field-group>
<field name="jquery-3.7.1.min.js" type="script">

Appel de la librairie jQuery. Cette ligne n’est pas requise si votre site intègre déjà jQuery de manière globale.

</field>

<field name="widgets/v1.2/widget.js" type="script" :required="true">

Appel de la librairie Millcheck, qui génère l’affichage du widget.

</field>

<field name="div.millcheck-widget" type="élément HTML" :required="true">

Le nœud HTML qui reçoit le contenu du widget. Ses attributs `data-*` définissent les paramètres d’affichage.

</field>
</field-group>

## Attributs

<table>
<thead>
  <tr>
    <th>
      Attribut
    </th>
    
    <th>
      Désignation
    </th>
    
    <th>
      Valeurs acceptées
    </th>
    
    <th>
      Obligatoire
    </th>
    
    <th>
      Par défaut
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        data-id
      </code>
    </td>
    
    <td>
      Identifiant SIT de l’objet
    </td>
    
    <td>
      Entier ou chaîne
    </td>
    
    <td>
      <strong>
        Oui
      </strong>
    </td>
    
    <td>
      
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data-lang
      </code>
    </td>
    
    <td>
      Langue du widget
    </td>
    
    <td>
      <code>
        fr
      </code>
      
      , <code>
        en
      </code>
    </td>
    
    <td>
      Non
    </td>
    
    <td>
      <code>
        fr
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data-day-format
      </code>
    </td>
    
    <td>
      Format des jours de la semaine
    </td>
    
    <td>
      <code>
        short
      </code>
      
      , <code>
        long
      </code>
      
      , <code>
        letter
      </code>
    </td>
    
    <td>
      Non
    </td>
    
    <td>
      <code>
        short
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data-date-start
      </code>
    </td>
    
    <td>
      Mois affiché par défaut
    </td>
    
    <td>
      Date <code>
        YYYY-MM-DD
      </code>
    </td>
    
    <td>
      Non
    </td>
    
    <td>
      Date du jour
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data-legend
      </code>
    </td>
    
    <td>
      Afficher la légende des couleurs
    </td>
    
    <td>
      <code>
        0
      </code>
      
      , <code>
        1
      </code>
    </td>
    
    <td>
      Non
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
  </tr>
</tbody>
</table>

<note>

Pour le lundi, `short` affiche **LUN**, `long` affiche **LUNDI** et `letter` affiche **L**.

</note>

<tip>

En désactivant la légende (`data-legend="0"`), vous pouvez la reconstruire de façon totalement sur mesure dans votre page.

</tip>

## Mise en forme

Une mise en forme standard permet d’afficher le widget avec le seul code ci-dessus. Pour l’adapter à la charte graphique de votre site, vous pouvez surcharger le rendu dans votre feuille de style : tous les éléments générés portent des **classes CSS**.

Pour simplifier les personnalisations les plus courantes, notamment les couleurs, le widget expose des **variables CSS** :

```css
body .millcheck-widget {
  --var-millcheck-available: #00ff00;
  --var-millcheck-complete: #ff0000;
}
```

Avec ce code, les jours disponibles et complets s’affichent en `#00ff00` et `#ff0000`.

### Variables disponibles

<table>
<thead>
  <tr>
    <th>
      Variable
    </th>
    
    <th>
      Désignation
    </th>
    
    <th>
      Par défaut
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        --var-millcheck-maxwidth
      </code>
    </td>
    
    <td>
      Largeur maximale du calendrier (ex. <code>
        300px
      </code>
      
      , <code>
        100%
      </code>
      
      )
    </td>
    
    <td>
      <code>
        380px
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        --var-millcheck-align
      </code>
    </td>
    
    <td>
      Alignement dans la flexbox : <code>
        flex-start
      </code>
      
      , <code>
        center
      </code>
      
      , <code>
        flex-end
      </code>
    </td>
    
    <td>
      <code>
        center
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        --var-millcheck-available
      </code>
    </td>
    
    <td>
      Couleur « disponible »
    </td>
    
    <td>
      <code>
        #3e9041
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        --var-millcheck-complete
      </code>
    </td>
    
    <td>
      Couleur « complet »
    </td>
    
    <td>
      <code>
        #db1919
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        --var-millcheck-close
      </code>
    </td>
    
    <td>
      Couleur « fermé »
    </td>
    
    <td>
      <code>
        #252525
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        --var-millcheck-fewplace
      </code>
    </td>
    
    <td>
      Couleur « quelques places disponibles »
    </td>
    
    <td>
      <code>
        #ff7b00
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        --var-millcheck-unset
      </code>
    </td>
    
    <td>
      Couleur « non défini »
    </td>
    
    <td>
      <code>
        #efefef
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        --var-millcheck-prevnextbg
      </code>
    </td>
    
    <td>
      Fond des boutons « précédent » / « suivant »
    </td>
    
    <td>
      <code>
        #ff7b00
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        --var-millcheck-prevnextcolor
      </code>
    </td>
    
    <td>
      Couleur des flèches « précédent » / « suivant »
    </td>
    
    <td>
      <code>
        #ffffff
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        --var-millcheck-selectbgcolor
      </code>
    </td>
    
    <td>
      Fond du sélecteur d’entité
    </td>
    
    <td>
      <code>
        #efefef
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        --var-millcheck-selectradius
      </code>
    </td>
    
    <td>
      Arrondi du sélecteur d’entité (ex. <code>
        0
      </code>
      
      , <code>
        10px
      </code>
      
      )
    </td>
    
    <td>
      <code>
        6px
      </code>
    </td>
  </tr>
</tbody>
</table>

<note>

**À propos des entités.** La notion d’entité ne s’applique pas à tous les objets : chaque utilisateur de Millcheck décompose son offre selon ses besoins. Une maison d’hôtes peut par exemple avoir deux entités « Chambre 1 » et « Chambre 2 », un hôtel peut utiliser ses typologies de chambres. Le sélecteur n’apparaît que lorsqu’au moins deux entités sont disponibles.

</note>


## Sitemap

See the full [sitemap](https://docs.millcheck.fr/sitemap.md) for all pages.