Zur Navigation

Geöffnet/geschlossen mit Zeit [3]

21 Jörg

Da die Zeilen in einer <tr> enthalten sind, kannst du diese mit der jeweiligen ID auszeichnen:

<tr id="Freitag">
<td>Freitag</td>
<td>10.00 - 11.30 Uhr</td>
</tr>

Die Style-Anweisung würde ich an das Ende des Scriptes einfügen. Das Script selbst sollte unterhalb der Tabelle stehen, so dass die IDs beim Ausführen des Scriptes bekannt sind.

14.06.2020 09:29 | geändert: 14.06.2020 09:33

22 Marco T. (Gast)

Ich denke, ich bin zu doof für das Script :-)

Der heutige Tag wird nicht fett angezeigt.

Dann hätte ich noch eine zusätzliche Frage. Ist es möglich, eine übergeordnete Regel hinzuzufügen, dass wenn z.B. der Tag 2020-06-25 ist, geschlossen steht.


<p>Jetzt: <span id="is-open"></span></p>

<script>
var openingHours = [
[ 'Montag', '10:00', '11:30' ],
[ 'Dienstag', '10:00', '11:30' ],
[ 'Dienstag', '14:00', '18:00' ],
/* ... und so weiter ... */
];

var weekdays = [
'Sonntag',
'Montag',
'Dienstag',
'Mittwoch',
'Donnerstag',
'Freitag',
'Samstag'
];
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var day = now.getDate();
var weekday = now.getDay();

var open = false;
for (var i = 0; i < openingHours.length; i++) {
var openingHour = openingHours[i];
var openingDay = openingHour[0];
var beginTime = openingHour[1].split(':');
var endTime = openingHour[2].split(':');
var begin = new Date(year, month, day, beginTime[0], beginTime[1]);
var end = new Date(year, month, day, endTime[0], endTime[1]);
if (
weekdays[weekday] == openingDay &&
now >= begin &&
now < end
) {
open = true;
}
}

var spanIsOpen = document.querySelector('#is-open');
if (open) {
spanIsOpen.innerText = 'geöffnet';
spanIsOpen.style.color = 'green';
} else {
spanIsOpen.innerText = 'geschlossen';
spanIsOpen.style.color = 'red';
}
</script>

<tr id="Montag">
<td>Montag</td>
<td>10.00 - 11.30 Uhr</td>
</tr>

<tr id="Dienstag">
<td>Dienstag</td>
<td>10.00 - 11.30 Uhr</td>
</tr>

<tr id="Mittwoch">
<td>Mittwoch</td>
<td>10.00 - 11.30 Uhr</td>
</tr>

<tr id="Donnerstag">
<td>Donnerstag</td>
<td>10.00 - 11.30 Uhr</td>
</tr>

<tr id="Freitag">
<td>Freitag</td>
<td>10.00 - 11.30 Uhr</td>
</tr>

16.06.2020 08:47

23 Jörg

Wie von mir geschrieben:

Das Script selbst sollte unterhalb der Tabelle stehen, so dass die IDs beim Ausführen des Scriptes bekannt sind.

Der Browser liest den HTML-Quelltext von oben nach unten ein und führt das Script sofort aus. Da er die Tabelle mit den IDs dadrunter noch nicht eingelesen hat, wird dort auch nichts eingefettet.

Darüber hinaus fehlt deiner Tabelle das <table> Element

Edit:

... und diese Zeile muss natürlich auch noch an das Ende des Scripts:

document.querySelector('#' + weekdays[weekday]).style.fontWeight = 'bold';

... anderfalls ist ja kein Wunder, wenn nichts eingefettet wird.

16.06.2020 11:39 | geändert: 16.06.2020 11:41

24 Marco T. (Gast)

Ah, das wusste ich nicht, dass das Script danach kommt (Die Style-Anweisung würde ich an das Ende des Scriptes einfügen. Das Script selbst sollte unterhalb der Tabelle stehen, so dass die IDs beim Ausführen des Scriptes bekannt sind. - Diese zwei Sätze habe ich überlesen, sorry). Schon wieder etwas gelernt. Herzlichen Dank Jörg.

Dann hätte ich noch eine zusätzliche Frage. Ist es möglich, eine übergeordnete Regel hinzuzufügen, dass wenn z.B. der Tag 2020-06-25 ist, geschlossen steht.

16.06.2020 16:27

25 Jörg

Das Datum als Feiertag definieren:

var holiday = '2020-06-25';

... und dann die for Schleife zum Auslesen der Öffnungszeiten nur noch ausführen, wenn der Feiertag nicht gleich der heutige Tag ist:

var open = false;
if (holiday != now.toISOString().substring(0, 10)) {
    for (var i = 0; i < openingHours.length; i++) {
        /* ... */
    }
}

18.06.2020 18:46

26 Marco T. (Gast)

Hallo Jörg

Besten Dank. Ich habe leider zu wenig Ahnung, wo ich das ganze im Script integrieren muss. Danke aber trotzdem und einen schönen Tag.

Gruss Marco

24.06.2020 14:30

... 1 Jahr und 9 Monate später ...

27 Lo (Gast)

Hallo Jörg,
bei mir funktioniert das Script super aber leider nur für einen Feiertag. Wie muss das Script angepasst werden, um mehrere Feiertage abzudecken.
Vielen Dank für die Hilfe.

29.03.2022 16:26

28 Jörg

Ein Array mit den Feiertagen anlegen:

var holidays = [
    '2022-04-15',
    '2022-04-18'
];

Dieses Array in einer Schleife durchlaufen und die enthaltenen Tage auf Gleichheit mit dem heutigen Tag überprüfen und ggf. die Variable isHoliday auf true setzen:

var isHoliday = false;
for (var holiday of holidays) {
    if (holiday == now.toISOString().substring(0, 10)) {
        isHoliday = true;
        break;
    }
}

Nur wenn isHoliday == false, die weitere Überprüfung der Uhrzeit vornehmen:

var open = false;
if (! isHoliday) {
    for (var i = 0; i < openingHours.length; i++) {
        /* ... */
    }
}

29.03.2022 18:06 | geändert: 29.03.2022 18:07

29 Lo (Gast)

Hallo Jörg,
du bist der absolute Hammer, funktioniert bestens.
Tausend Dank. Wie kann ich dir ein Bier/einen Kaffee ausgeben?
Beste Grüße

30.03.2022 10:54

30 Jörg

Ich muss meinen Kaffee-Konsum reduzieren - ich verweis mal stattdessen auf den letzten Punkt der FAQ :)

30.03.2022 11:59

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]