Fehlende Endzeile für 31. August 2020

[Claus Hoffmann]

Wenn ich für Monat August einstelle und für Jahr 2020 wird mir die letzte Zeile für den 31.ten nicht angezeigt.

[Gunnar Bittersmann]

@@Claus Hoffmann

Wenn ich für Monat August einstelle und für Jahr 2020 wird mir die letzte Zeile für den 31.ten nicht angezeigt.

Bevor sich jemand dranmacht, den Bug zu fixen: vielleicht doch lieber das ganze Tutorial depublizieren?

Die Tage im Kalenderlayout anzuordnen geht einfacher als mit einer Tabelle: mit Grid. Da muss man nicht die Anzahl der benötigten Zeilen (4, 5 oder 6) berechnen, sondern nur den Wochentag des Monatsersten.

Ich hatte das auch hausintern in einem kurzen Vortrag präsentiert.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Rolf B]

Hallo Gunnar,

too late, fix complete 😉

Dass eine Table nicht das beste Mittel ist, ist unstreitig. Es geht mit Grid, oder mit einer wrapping Flexbox.

Deine Berechnung der Tage im Monat ist clever, aber auch umständlich. Sollte das hier nicht hinreichend sein?

const monthLength = Date.UTC(year, month+1, 0).getDate();

Das Wiki-Sample hat ein paar visuelle Gadgets mehr, die bei Dir fehlen. Kriegt man das hin?

• Wochentagüberschriften
• Hervorhebung von Sa, So und aktuellem Tag.
• Darstellung mit Rasterlinien

Wochentagsüberschriften sind noch einfach. Tagesnamen als Spans vor's template und im CSS .calendarMonth > a:nth-of-type(1) als Selektor. Der Rest? Entweder muss man darauf verzichten, oder die Eleganz deiner Lösung verfliegt, fürchte ich.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Deine Berechnung der Tage im Monat ist clever, aber auch umständlich. Sollte das hier nicht hinreichend sein?

const monthLength = Date.UTC(year, month+1, 0).getDate();

Das könnte schiefgehen. Wenn UTC, dann überall, also getUTCDate(). Aber sonst gute Idee. Könnte ich glatt mal refactorn; der Kalender kommt ja tatsächlich zum produktiven Einsatz.

Das Wiki-Sample hat ein paar visuelle Gadgets mehr, die bei Dir fehlen. Kriegt man das hin?

• Wochentagüberschriften

Wie du schon sagtest: kein Problem. So sieht’s aus:

• Hervorhebung von Sa, So und aktuellem Tag.

In der Präse auf Speakerdeck ist doch der Codepen weekday classes verlinkt.

Der aktuelle Tag bekommt aria-current="date", was sich auch zum Stylen verwenden lässt.

• Darstellung mit Rasterlinien

Die fehlen wirklich noch in CSS Grid. Ich hoffe, das wird irgendwann mal gespecct und implementiert.

Bis dahin: Hintergrundfarben fürs Grid-Element und die Gridzellen und gap verwenden.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Claus Hoffmann]

@@Rolf B

Hallo Rolf,

Sie haben der Function Kalender zwar einen weiteren Parameter "KalenderID" hinzugefügt, verwenden diesen aber leider nicht. Das wäre z.B. sehr schön, da man sich dann gleich auch mal ganzes Quartal erzeugen lassen könnte. :-).

Und so richtig gut fände ich es, wenn sich der Kalender auch noch um Mitternacht automatisch aktualisieren würde.

Mein Vorschlag ....

KalenderRefresh()

function KalenderRefresh(){
    // altes Ding löschen ...und mit aktuellem Datum neu erstellen
    document.getElementById('kalender').innerHTML = "";
    const d = new Date(),
    dm = d.getMonth() + 1,
    dj = d.getFullYear();
    Kalender(dm, dj, 'kalender');
     // Millisekunden bis Tageswechsel(Mitternacht) berechnen
    let RestMilliSeconds = 86400000 - d.getTime() % 86400000;
    var timer = setTimeout(KalenderRefresh, RestMilliSeconds);
}

Bei einem Test gibt "document.getElementById('kalender')" im rekursiven Aufruf nix zurück :-(. Aber das muß doch irgendwie gehen ... oder ???

Gruß Claus

[Rolf B]

Hallo Claus,

wir duzen uns hier. Das ist das Internet 😉

Der Fehler mit der nicht verwendeten Kalender-ID war im Wiki, nicht im Frickl (das Ding, was hochkommt, wenn man "ausprobieren" klickt). Leider sind das zwei verschiedene Codebasen und man muss immer parallel ändern.

Ich habe noch eine Abfrage hinzugefügt ob das Element auch gefunden wird. Das geht noch ausführlicher: man könnte auch prüfen ob's oberhaupt ein table Element ist. Das kannst Du auf deiner eigenen Seite gerne um beliebige Fehlerprüfungen erweitern.

Die Aktualisierung um Mitternacht ist so eine Sache. Die meisten Webseiten werden nicht stundenlang auf dem Bildschirm sein, d.h. im Normalfall wird der Refresh nie zuschlagen. Ein typischer 20/80 Fall: die letzten 20% der Funktionen machen 80% des Aufwandes aus...

Grundsätzlich sollte das aber so funktionieren, wie Du es gebaut hast. Warum getElementById bei Dir nichts liefert, kann ich nicht sagen. Die Logik hat nur den kleinen Haken, dass nicht jeder Tag 86400 Sekunden hat. Manche haben 86401, manche haben 82800, oder 90000, oder 82801, oder 900001, je nach Sommerzeitänderung und Erdrumpeln-Schaltsekunde. Wobei ich nicht weiß ob diese Schaltsekunde von JavaScript gezeigt wird...

Du findest das bestimmt raus.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Die Logik hat nur den kleinen Haken, dass nicht jeder Tag 86400 Sekunden hat. Manche haben 86401, manche haben 82800, oder 90000,

oder 86399 (auch wenn das noch nie vorgekommen ist)

oder 82801, oder 900001, je nach Sommerzeitänderung und Erdrumpeln-Schaltsekunde.

Nö, Zeitumstellung und Schaltsekunde fallen niemals auf einen Tag. (Die Schaltsekunde wird am 30. Juni oder 31. Dezember eingefügt/weggelassen.)

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gunnar Bittersmann]

@@Gunnar Bittersmann

oder 82801, oder 900001, je nach Sommerzeitänderung und Erdrumpeln-Schaltsekunde.

Nö, Zeitumstellung und Schaltsekunde fallen niemals auf einen Tag. (Die Schaltsekunde wird am 30. Juni oder 31. Dezember eingefügt/weggelassen.)

Diese Angabe ist in UTC. Für uns (MEZ/MESZ) ist es bereits 1. Juli bzw. 1. Januar.

Wikipedia meint, die Schaltsekunde könnte auch am 31. März oder 30. September (UTC) eingefügt/weggelassen weden. Wenn dieser auf einen Sonntag fällt, wäre für Gebiete westlich des Nullmeridians (also nicht für uns) tatsächlich ein Zusammentreffen von Zeitumstellung und Schaltsekunde möglich, falls denn irgendwann mal vom März- oder September-Schaltsekundentermin gebrauchgemacht werden sollte, was ich nicht glaube. „Seit Einführung des Systems 1972 wurden ausschließlich die Zeitpunkte im Dezember und Juni benutzt.“

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Matthias Apsel]

Hallo Rolf B,

Der Fehler mit der nicht verwendeten Kalender-ID war im Wiki, nicht im Frickl (das Ding, was hochkommt, wenn man "ausprobieren" klickt). Leider sind das zwei verschiedene Codebasen und man muss immer parallel ändern.

Zum Glück 😉

Dass du auch das Recht hast, Beispiele zu bearbeiten, weißt du?

Ich glaube, es wäre das Sinnvollste, wenn du die Änderungen einpflegtest.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

hab ich doch. Oder habe ich etwas übersehen?

Rolf

[Matthias Apsel]

Hallo Rolf B,

hab ich doch.

Stimmt.

Oder habe ich etwas übersehen?

nur beim ersten Beispiel https://wiki.selfhtml.org/wiki/Beispiel:JS-Anwendung-Tabellen-dynamisch.html

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

beim erstem Beispiel war - meine ich - das falsche Frickl hinterlegt. Das ist jetzt berichtigt gewesen.

Ich habe nun Beispiel und Wiki gleichgezogen und da wir die HTMLTable...Element Doku im SelfWiki nicht haben, passende Verweise auf MDN gesetzt (und dort die referenzierten Artikel ins Deutsche übersetzt).

Rolf

[Matthias Apsel]

Hallo Rolf B,

cool. Vielen lieben Dank.

Bis demnächst
Matthias

[Claus Hoffmann]

Hallo Rolf,

nach einigem Probieren hab ich für das Refreshen eine funktionierende Lösung gefunden.

KalenderRefresh(document.getElementById('kalender'))

function KalenderRefresh(tabelle){
  if (tabelle){tabelle.innerHTML = ""};
  const d = new Date();
  var dm = d.getMonth() + 1;
  var dj = d.getFullYear();
  Kalender(dm, dj, tabelle);
   // Millisekunden bis Tageswechsel(Mitternacht) berechnen
  let RestMilliSeconds = 86400000 - d.getTime() % 86400000;
  var recall = "KalenderRefresh(document.getElementById('kalender'))";
  setTimeout(recall, RestMilliSeconds);
}

function Kalender (Monat, Jahr, tabelle) {

In der function Kalender muss dann die Definition für tabelle entfernt werden

//const tabelle = document.getElementById('kalender');

Ich bin hier Neuling und möchte nicht einfach so Quelltexte ändern, ohne das es ein Profi gesehen hat :-)

Gruß Claus

Nachtrag: Unsere Posts haben sich überschnitten ....

[Rolf B]

Hallo Claus,

es ist nicht sinnvoll, die Funktion als String zu übergeben. Das führt zu einem eval(), den kannst Du in "JavaScript - The Good, the Bad and the Ugly" für Eli Wallach casten. Besser ist eine anonyme Funktion:

  var recall = function() { 
   KalenderRefresh(document.getElementById('kalender'));
  };

oder als Pfeilfunktion (was im Internet Explorer nicht geht)

  var recall = () => KalenderRefresh(document.getElementById('kalender'));

wobei ich nicht wirklich verstehe, warum du das Element immer wieder neu ermitteln musst. Eigentlich muss auch das hier funktionieren:

  var recall = function() { KalenderRefresh(tabelle); };
// oder
  var recall = () => KalenderRefresh(tabelle);

Und das kann man noch verkürzen, wenn man die Tatsache nutzt, dass setTimeout mehr als zwei Parameter kennt. Was man ab Pos. 3 übergibt, wird an die Timeout-Funktion übergeben. Damit sollte man auf den recall-Helper ganz verzichten können.

  let RestMilliSeconds = 86400000 - d.getTime() % 86400000;
  setTimeout(KalenderRefresh, RestMilliSeconds, tabelle);

Aber wie gesagt, für's Wiki halte ich das für zu viel. Man müsste dafür auch ein Frickl bereitstellen, und die Wiki-Leser müssen die Nacht durchmachen um den Effekt beobachten zu können…

Rolf

[Claus Hoffmann]

Hallo Rolf

Danke für die vielen Tipps.

Wenn man zu faul ist mit F12 den Debuger aufzurufen und anstatt console.(log) --- document.write() benutzt ... dann passiert sowas :-).

Bei einem Test gibt "document.getElementById('kalender')" im rekursiven Aufruf nix zurück :-(. Aber das muß doch irgendwie gehen ... oder ???

Meine neue function berücksichtigt Zeitumstellungen.

// Kalender aktuell halten
var MilliSeconds = new Date(Jahr,Monat,DieserTag + 1).getTime()
                     - newDate(Jahr,Monat,DieserTag).getTime();
setTimeout(function(){Kalender(Monat,Jahr,tabelle)}, MilliSeconds);

das kann man mit folgender function testen

zeitumstellung();
function zeitumstellung(){
  // Sommerzeit 2020
  console.log("Sommerzeit 2020");
  for (var t=28; t < 31;t++){
    console.log(t + " -> " + (new Date(2020,2,t+1).getTime() - new Date(2020,2,t).getTime()));
  }
  console.log("Winterzeit 2020");
  // Winterzeit 2020
  for (var t=24; t < 27;t++){
    console.log(t + " -> " + (new Date(2020,9,t+1).getTime() - new Date(2020,9,t).getTime()));
  }
}

Ob dabei das Erdrumpeln berücksichtigt wird ist mir unbekannt :-).

Mit ein paar kleinen Änderungen habe ich den rekursive Aufruf sogar mit in die Kalender Funktion (vor return true;) integrieren können.

Jedenfalls Danke ich Euch für all diese Anregungen !!!

Gruß Claus

[Matthias Scharwies]

Servus!

Ich hatte das auch hausintern in einem kurzen Vortrag präsentiert.

Vielen Dank für den interessanten Link! Ich habe mich durch einige Präsentationen geklickt und über die Wortspiele gefreut:

• Children of a lesser div - den ähnlich lautenden Film habe ich noch zu Schulzeiten gesehen.

• It's dangerous to go Stallone. Go Glyphhanger! 😀

Irgendwie finde ich aber, dass die Idee Text in Grafiken/als Screenshots im Netz zu präsentieren allem widerspricht, was ich (von Dir) gelernt habe:

• nicht in Suchmaschinen indizierbar 😟 (Deshalb nur so wenige Betrachter?)
• nicht durch Screenreader lesbar 😟

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Ich habe mich durch einige Präsentationen geklickt und über die Wortspiele gefreut:

• Children of a lesser div - den ähnlich lautenden Film habe ich noch zu Schulzeiten gesehen.

Wo ich schon mit Grid to the Future angefangen hatte, dachte ich mir, ich mach mit der Verhunzung von Filmtiteln weiter.

Nach 1985 und 1986 wären dann Filme aus 1987 und 1988 dran gewesen. Vortragstitel und eine Vorstellung von den Titelfolien hatte ich schon: Dirty Enhancing und The Naked Gunnar.

Aber dazu kam’s nicht mehr; ich bin nicht mehr bei dieser Agentur.

Die Idee hatte ich von der From the Front gekl genommen. Die braucht das ja nicht mehr, weil’s sie nicht mehr gibt. Meh. 😭

(2011 Back to the Front, 2012 The Treasure of Frontend Island, 2013 The Frontend Brothers, 2014 From the Front and the Temple of DOM, 2015 Frontend in Wonderland, 2016 The Frontend Guide to Live, the Universe and Everything)

Irgendwie finde ich aber, dass die Idee Text in Grafiken/als Screenshots im Netz zu präsentieren allem widerspricht, was ich (von Dir) gelernt habe:

• nicht in Suchmaschinen indizierbar 😟 (Deshalb nur so wenige Betrachter?)
• nicht durch Screenreader lesbar 😟

Unter Transcript ist bei Speakerdeck der Text von den Folien zu sehen. Das müsste nur richtig gepflegt werden – zu den Folien …

🖖 Stay hard! Stay hungry! Stay alive! Stay home!