Les jours d'ouverture

Heures et jours d'ouverture

La période d'ouverture en temps réel s'affiche en couleur.

Horaires d'ouverture

Lundi :

Mardi :

Mercredi :

Jeudi :

Vendredi :

Samedi :

Dimanche :

Code à placer dans les propriétés de la page partie head.

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

Code à placer dans un élément HTML

                        <div id="days" > 
                        <div id="day_monday" class="day__row"> 
                        <div class="day__label">Lundi : </div> 
                        <div class="hours__slots"> </div> 
                        </div> 
                        <div  id="day_tuesday" class="day__row"> 
                        <div class="day__label">Mardi : </div>
                        <div class="hours__slots"> </div> 
                        </div> 
                        <div  id="day_wednesday" class="day__row"> 
                        <div class="day__label" >Mercredi : </div>
                        <div class="hours__slots"> </div> 
                        </div> 
                        <div id="day_thursday" class="day__row"> 
                        <div class="day__label" >Jeudi :</div> 
                        <div class="hours__slots"> </div> 
                        </div> 
                        <div id="day_friday" class="day__row"> 
                        <div class="day__label" >Vendredi : </div> 
                        <div class="hours__slots"> </div>
                        </div> 
                        <div id="day_saturday" class="day__row">
                        <div class="day__label" >Samedi : </div> 
                        <div class="hours__slots"> </div> 
                        </div> 
                        <div id="day_sunday" class="day__row"> 
                        <div class="day__label" >Dimanche : </div> 
                        <div class="hours__slots"> </div> 
                        </div> 
                        </div>
                        
                        <script>
                        
                        const closedText = "Fermé";
                        
                        const openTimes = 
                        [
                        { day: "monday", openTimes: [{start: {hours:14, minutes: 0}, stop: {hours:19, minutes: 0}}]},
                        { day: "tuesday",openTimes: [{start: {hours:9, minutes: 30}, stop: {hours:13, minutes: 30}},{start: {hours:15, minutes: 0}, stop: {hours:19, minutes: 0}}]},
                        { day: "wednesday",  openTimes: [{start: {hours:9, minutes: 30}, stop: {hours:13, minutes: 30}},{start: {hours:15, minutes: 0}, stop: {hours:19, minutes: 0}}]},
                        { day: "thursday",  openTimes: [{start: {hours:10, minutes: 0}, stop: {hours:13, minutes: 0}},{start: {hours:15, minutes: 0}, stop: {hours:19, minutes: 0}}]},
                        { day: "friday",  openTimes: [{start: {hours:10, minutes: 0}, stop: {hours:13, minutes: 0}},{start: {hours:16, minutes: 0}, stop: {hours:21, minutes: 0}}]},
                        { day: "saturday",  openTimes: [{start: {hours:10, minutes: 0}, stop: {hours:20, minutes: 0}}]},
                        { day: "sunday",   openTimes: []},
                        ];
                        
                        
                        //  jour fériés et jours fermé 
                        
                        /* 
                        
                        commentaires
                        */
                        const closeDates = ["2023/07/31"];
                        
                        
                        const date = new Date();
                        
                        $(document).ready(function() {
                        const dayOfWeek = getDayOfWeek(date);
                        
                        openTimes.forEach(day => {
                        let html = '';
                        let open = false;      
                        
                        if(dayOfWeek == day.day && isClosedDate(date)){
                        html = closedText;
                        }
                        else if(day.openTimes.length > 0) {  
                        for (let i = 0; i < day.openTimes.length; i++) {
                        const time = day.openTimes[i];
                        if(dayOfWeek == day.day){
                        var startTime= new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.start.hours, time.start.minutes, 0 );
                        var stopTime= new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.stop.hours, time.stop.minutes, 0 );
                        if(date >= startTime && date<stopTime){
                        open = true;
                        }
                        }
                        html+= (open ?'<div class="open-style">': '<div>') + getTime(time)+ '</div>';
                        }
                        }
                        else{
                        html = closedText;
                        }
                        
                        if(open){
                        $("#day_"+day.day+ " .day__label").addClass("open-style");
                        } else {
                        $("#day_"+day.day+ " .day__label").removeClass("open-style");
                        }
                        $("#day_"+day.day+ " .hours__slots").html(html);
                        });    
                        });
                        
                        function getTime(val) {
                        return format(val.start.hours)+ ':'+ format(val.start.minutes) + ' - ' + format(val.stop.hours)+':'+ format(val.stop.minutes);
                        }
                        
                        function format(val) {
                        if(val<10){
                        return '0'+val;
                        }
                        return ''+val;
                        }
                        
                        function isClosedDate(date){
                        for (let i = 0; i < closeDates.length; i++) {
                        const closedDate = new Date(closeDates[i]);
                        
                        if(closedDate.getFullYear() == date.getFullYear()
                        && closedDate.getMonth() == date.getMonth()
                        && closedDate.getDate() == date.getDate()){
                        return true;
                        }
                        }
                        return false;
                        }
                        
                        function getDayOfWeek(date) {
                        const day = date.getDay();
                        switch (day){
                        case 1: return "monday";
                        case 2: return "tuesday";
                        case 3: return "wednesday";
                        case 4: return "thursday";
                        case 5: return "friday";
                        case 6: return "saturday";
                        case 0: return "sunday";
                        }
                        }
                        </script>

Code CSS à placer dans le CSS de l'élément HTML

                        .$ #days{
                        font-family: 'Arial', sans-serif;
                        font-size: 18px;
                        display: table;
                        width:100%;
                        padding-left: 10px;
                        padding-right: 10px;
                        }
                        .$ .day__row{
                        display: table-row;
                        }
                        .$ .day__label{
                        font-weight: normal;
                        text-align: left;
                        vertical-align: top;
                        display:table-cell;
                        padding-top: 10px;
                        padding-bottom: 20px;
                        border-bottom: solid 1px #000;
                        }
                        .$ .hours__slots{
                        text-align: right;
                        vertical-align: top;
                        display:table-cell;
                        padding-top: 8px;
                        padding-bottom: 10px;
                        border-bottom: solid 1px #000;
                        }
                        .$ .open-style {
                        font-weight: bold;
                        color:#fea414;
                        }

Validation W3C

Slider et Image

Accordion

Divers 1

Divers 2

Mascarade

Lumière

Couché de soleil

Le Crozon