---
title: "Widget horaires d’ouverture"
description: "Afficher les jours et horaires d’ouverture Google des 7 prochains jours et le statut « ouvert aujourd’hui »."
canonical_url: "https://docs.millcheck.fr/widgets/horaires-ouverture"
---
# Widget horaires d’ouverture

> Afficher les jours et horaires d’ouverture Google des 7 prochains jours et le statut « ouvert aujourd’hui ».

Le widget horaires affiche les horaires d’ouverture d’un établissement pour les **7 prochains jours**, issus de sa fiche Google et synchronisés quotidiennement par Millcheck. Une bannière indique si l’établissement est **ouvert ou fermé aujourd’hui**.

<opening-hours-preview>



</opening-hours-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/opening-hours.js"></script>

<div class="millcheck-opening-hours"
     data-id="123456789"
     data-lang="fr"
     data-day-format="long"
     data-header="true"
     data-banner="true"
></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/opening-hours.js" type="script" :required="true">

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

</field>

<field name="div.millcheck-opening-hours" 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>
        long
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data-header
      </code>
    </td>
    
    <td>
      Affiche le titre du widget
    </td>
    
    <td>
      <code>
        true
      </code>
      
      , <code>
        false
      </code>
    </td>
    
    <td>
      Non
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data-banner
      </code>
    </td>
    
    <td>
      Affiche la bannière ouvert / fermé aujourd’hui
    </td>
    
    <td>
      <code>
        true
      </code>
      
      , <code>
        false
      </code>
    </td>
    
    <td>
      Non
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
  </tr>
</tbody>
</table>

<note>

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

</note>

## Mise en forme

Comme pour le widget planning, tous les éléments générés portent des **classes CSS** préfixées `millcheck-oh-` que vous pouvez surcharger. Les couleurs principales sont exposées sous forme de **variables CSS** :

```css
body .millcheck-oh {
  --millcheck-oh-open: #00ff00;
  --millcheck-oh-closed: #ff0000;
}
```

Avec ce code, les couleurs « ouvert » et « fermé » sont remplacées par `#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>
        --millcheck-oh-open
      </code>
    </td>
    
    <td>
      Couleur « ouvert »
    </td>
    
    <td>
      <code>
        #3e9041
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        --millcheck-oh-closed
      </code>
    </td>
    
    <td>
      Couleur « fermé »
    </td>
    
    <td>
      <code>
        #252525
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        --millcheck-oh-text
      </code>
    </td>
    
    <td>
      Couleur du texte
    </td>
    
    <td>
      <code>
        inherit
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        --millcheck-oh-text-muted
      </code>
    </td>
    
    <td>
      Couleur du texte secondaire (ex. « Fermé »)
    </td>
    
    <td>
      <code>
        #6b7280
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        --millcheck-oh-border
      </code>
    </td>
    
    <td>
      Couleur des séparateurs horizontaux
    </td>
    
    <td>
      <code>
        #e5e7eb
      </code>
    </td>
  </tr>
</tbody>
</table>

### Classes principales

<table>
<thead>
  <tr>
    <th>
      Classe
    </th>
    
    <th>
      Élément
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        .millcheck-oh
      </code>
    </td>
    
    <td>
      Conteneur du widget
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        .millcheck-oh-header
      </code>
      
      , <code>
        .millcheck-oh-title
      </code>
    </td>
    
    <td>
      En-tête et titre
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        .millcheck-oh-banner
      </code>
    </td>
    
    <td>
      Bannière ouvert / fermé aujourd’hui
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        .millcheck-oh-schedule
      </code>
    </td>
    
    <td>
      Liste des jours
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        .millcheck-oh-day
      </code>
      
      , <code>
        .millcheck-oh-day-name
      </code>
      
      , <code>
        .millcheck-oh-day-hours
      </code>
    </td>
    
    <td>
      Ligne d’un jour, nom du jour, horaires
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        .millcheck-oh-closed
      </code>
    </td>
    
    <td>
      Mention « Fermé »
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        .millcheck-oh-footer
      </code>
      
      , <code>
        .millcheck-oh-signature
      </code>
    </td>
    
    <td>
      Pied du widget et mentions de source
    </td>
  </tr>
</tbody>
</table>


## Sitemap

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