Event-Kalender mit SQLite

[Tommy Herrmann]

Hallo Werner,

wie ich sehe, hast Du eine neue und zusätzliche Version vom Kalender mit SQLite-Datenbank entwickelt

https://werner-zenk.de/archiv/event-kalender_sqlite.php

Da steht erst ab PHP Version 8.

Ich habe noch PHP 7 am Server - aus vielen Gründen:

https://www.mobirise-tutorials.com/PHP/

Zum Beispiel sind noch viele Probleme bei der Verwendung von diesem Forum unter "PHP 8" zu erwarten:

https://www.phpbb.de/community/viewtopic.php?t=245460

Auch viele ältere Skripte, die ich verwende, könnten da größere Probleme bereiten.

Funktioniert dass auch schon mit "PHP 7"?

Gut - ich könnte auch ein bestimmtes Verzeichnis auf "PHP 8" umstellen ...

Ich finde das persönlich etwas zu früh Skripte so zu schreiben, dass diese erst ab "PHP 8" funktionieren. Meines Wissens haben die allermeisten Server das noch nicht in Verwendung.

[Werner-Zenk.de]

Hallo Tommy,
das funktioniert auch mit PHP 7. Komplett fertig, ist das Script noch nicht, wollte eigentlich ein paar PHP 8 Funktionen einbauen, um diese mal zu testen, das verschiebe ich dann auf später einmal...

Ich will auf keinen Fall die ganzen Funktionen vom großen Kalender einbauen nur das wichtigste. Ich habe es auch noch nicht auf dem Smartphone getestet, habe nur gesehen das die Pop-ups zu breit sind. Das ist nur eine erste Version, die ich in zwei Tagen geschrieben hatte. Das schwierigste ist wieder das Design, werde in den nächsten Tagen einige Änderungen daran vornehmen.

Ich hoffe der Langusten Schwanz hat geschmeckt

[Tommy Herrmann]

Moin,

das ist gut zu wissen.

Ich finde die Idee für diese abgespeckten Version des Kalenders sehr gut.

Nicht jeder benötigt die Fülle der Optionen des Original-Kalenders und viele haben sicherlich weniger "Respekt" vor dem Einbau mit der Verwendung einer "SQLite" Datenbank (Textdatei) als mit einer "MySQL" Datenbank. In jedem Fall eine tolle Alternative.

Der Langusten-Schwanz war sehr lecker und wirklich sehr einfach zu machen. Ich habe ihn mit einer eigenen Knoblauch-Kräuter-Marinade im Backofen gemacht und nur mit einer Scheibe Toast und einem guten Glas Weißwein dabei.

Ein prima Silvesteressen.

[Tommy Herrmann]

Hallo Werner,

ich habe gerade mal den neuen "Event-Kalender SQLite" (vom 02.02.2022) in Mobirise eingebaut:

https://www.mobirise-tutorials.com/Even ... er-SQLite/

... ist noch lange nicht fertig.

Ich mache das später dann weiter ...

Tausend Dank schon mal vorab für diese wieder einmal tolle Anwendung

Wo stellt man denn den Farb-Modus ein

[Werner-Zenk.de]

Wo stellt man denn den Farb-Modus ein

Bootstrap hat da einen kleinen Bug, dieser stellt Tabellenspaltenüberschriften <th> nicht zentriert dar.
Das sieht man bei dir im Kalender bei den Wochentagen, diese sind linksbündig angeordnet.
Folgende CSS-Anweisung sollte das beheben:

table#tabelle thead th {
text-align: Center !important;
font-weight: normal;
}

[Tommy Herrmann]

Ah - OK

danke Werner ...

Die Tabellen-Überschriften der Tage finde ich persönlich linksbündig besser und passender im Kalender - insofern werde ich es mal erst so lassen.

P.S.:

habe die CSS-Datei, wie von Dir beschrieben, doch noch angepasst. Ja, so werden die Tage zentriert dargestellt.

[Werner-Zenk.de]

Ein leicht verständliches Tutorial

[Tommy Herrmann]

Hallo Werner,

wie ich heute morgen gesehen habe, hast Du die Anwendung recht umfangreich mit der Version vom 03.01.2022 umgeschrieben und ich habe das übernommen:

https://www.mobirise-tutorials.com/Even ... er-SQLite/

Ich habe die CSS wieder etwas geändert, die abschattierten Kanten passen bei mir einfach nicht und sehen schrecklich aus und werden auch bei vielen anderen Probleme mit der Hintergrundfarbe erzeugen.

Die SQLite-Datenbank musste ich auch neu verwenden. Ich weiß nicht genau was Du dort geändert hattest - ich denke das Feld "uhr" ist hinzugekommen (Endzeit), denn meine DB wurde nicht mehr dargestellt. Ich konnte meine alten Daten jedoch über das CSV-Format importieren.

Nun ist aber leider die Breite am Handy nicht mehr responsive, es gibt einen kleinen Querscroller und der Kalender passt nicht mehr ganz auf das Display:

Ich dachte ich könne die Breite von 100% der Tabelle etwas verringern, das geht aber nicht. Wie bekomme ich den Kalender wieder responsive und passend am Handy? Ich finde das (und Deine Änderung diesbezüglich) gerade nicht.


Weiterhin werden die --:-- in der Zeitangabe nicht mehr akzeptiert und dabei kam es bei mir zu einem Script-Fehler. Als ich einen solchen Eintrag (im Dezember 2021) von Dir gelöscht habe, konnte ich anschließend kein Kalender-Jahr mehr wählen - aber das ist wohl nur durch das bei mir fehlende Datenbankfeld entstanden:

[Tommy Herrmann]

Habe das Problem gefunden. In der CSS-Datei habe ich das auf 1.1rem (von 1.4rem) in einer Media-Anweisung für das Handy verringert, sonst passt es nicht in der Breite:

Code: Alles auswählen

span.zoom {
  font-size: 1.4rem;
  font-weight: normal;
}

/* Edit Tommy, Media Anweisung hinzugefügt, da sonst Schrift zu groß */
@media (max-width: 767px) {
  span.zoom {
      font-size: 1.1rem;
      font-weight: normal;
  }
}

... übrigens - bei Deinem Demo-Kalender passt es auch nicht.

Bist Du so nett und teilst mir hier mit, falls Du die CSS auch anpassen solltest und nur deswegen ein neues Versionsdatum im Download hast, mir das mitzuteilen. So muss ich nicht alles nach Änderungen durchsuchen.


Ich habe mal eine Kalender-Version in Chinesisch hinzugefügt

[Tommy Herrmann]

Bemerkung zum Firefox Browser:

Diese Tastenkombinationen:

[STRG] + [Pfeiltaste Ab] - Ein Jahr zurück.
[STRG] + [Pfeiltaste Auf] - Ein Jahr weiter.

springen übrigens bei mir gleichzeitig auch an das Ende, bzw. an den Anfang der Seite mit dem eingebauten Kalender.

Im "Edge" Browser geht das dagegen wunderbar.

[Werner-Zenk.de]

Bemerkung zum Firefox Browser:

Diese Tastenkombinationen:

[STRG] + [Pfeiltaste Ab] - Ein Jahr zurück.
[STRG] + [Pfeiltaste Auf] - Ein Jahr weiter.

springen übrigens bei mir gleichzeitig auch an das Ende, bzw. an den Anfang der Seite mit dem eingebauten Kalender.

Im "Edge" Browser geht das dagegen wunderbar.

Und die Konsole im Edge-Browser meinte, ich könnte die Anweisung( "e.preventDefault()" ) entfernen
Ich habe es danach nicht mehr im Firefox getestet

Danke für deine Bemerkung

Das span.zoom ... wurde komplett entfernt, hatte auch bemerkt das es damit beim Handy Probleme gibt.
Die Schriftgröße lässt sich nun hier anpassen:

table#tabelle td#navigation {
font-size: 1.3rem !important;
text-align: center;
white-space: nowrap;
background-image: linear-gradient(transparent, var(--bgcolor-odd));
}

Somit ist es auch einfacher eine Regel fürs Handy zu erstellen:

Code: Alles auswählen

@media (max-width: 48rem) {
  table#tabelle td#navigation {
      font-size: 1.1rem;
      font-weight: normal;
  }
}

Ich verwende da lieber die Einheit rem (1rem = 16px)

Weiterhin werden die --:-- in der Zeitangabe nicht mehr akzeptiert und dabei kam es bei mir zu einem Script-Fehler. Als ich einen solchen Eintrag (im Dezember 2021) von Dir gelöscht habe, konnte ich anschließend kein Kalender-Jahr mehr wählen - aber das ist wohl nur durch das bei mir fehlende Datenbankfeld entstanden:

Ja, die Spalte 'uhr' wurde neu in der DB-Tabelle hinzugefügt. Das hatte ich völlig vergessen, ich war froh, dass das Ding überhaupt funktioniert

Ich habe mal eine Kalender-Version in Chinesisch hinzugefügt

Ich habe die CSS wieder etwas geändert, die abschattierten Kanten passen bei mir einfach nicht und sehen schrecklich aus und werden auch bei vielen anderen Probleme mit der Hintergrundfarbe erzeugen.

Ich habe die Transparenz bei den abschattierten Kanten entfernt. Diese verlaufen nun von Grau nach Weiß oder von Grau nach Schwarz je nach verwendeten Hell.- und Dunkelmodus.

[Tommy Herrmann]

Moin Werner,

und vielen Dank für Deine Mühe

Du hast die von Dir genannten Änderungen aber noch nicht zum Download zur Verfügung gestellt. Wie ich sehe, ist das noch die unveränderte Version vom 03.01.2022.


Noch eine Kleinigkeit, die mir aufgefallen ist:

Vielleicht wäre es schöner, bei der Eingabe einer Zeitspanne - also z.B. wie beim Eintrag "Zahnarzt" am 24.01.2022:

14:30-15:45

einen Umbruch zu generieren, denn hinter diesem Zeit-Eintrag passen nur noch 5-6 Buchstaben und fast jedes Wort wird daher dort umgebrochen - siehe meinen Probe-Eintrag im Screenshot am 25.01.2022.

Ich habe da jetzt ein <br> Tag gesetzt - also so:

Code: Alles auswählen

<br>Zahnarzt 🦷

Das hat natürlich auch im Pop-up Fenster diesen Umbruch über dem Eintrag zur Folge - vielleicht geht das ja noch besser.

Das ist aber bitte nur eine Idee - ich komme damit auch so sehr gut zurecht.

https://www.mobirise-tutorials.com/Even ... er-SQLite/

Hier übrigens mal die Breakpoints zur Info, die das Framework "Bootstrap 5" verwendet, die dort immer in Pixeln angegeben werden:

https://getbootstrap.com/docs/5.0/layout/breakpoints/

Ich versuche möglichst dabei zu bleiben, sonst erhalte ich ja noch mehr Breakpoints als diese üblichen. Diese Größenangaben gelten (meines Wissens) heute in fast jeder Software, angelehnt an Bootstrap, als Standard:

[Werner-Zenk.de]

Moin Tommy,

ich bin da noch am Testen, deswegen auch keine neue Version. Der Firefox zeigt am Handy immer noch einen kleinen Querscroller an, beim Edge ist alles ok.
Ich habe die Schriftgröße am Handy jetzt auf 0.8rem festgelegt und das Padding beim Pop-up reduziert damit da noch mehr Inhalt Platz findet.

Wenn ich da einen Umbruch (<br>) nach der Uhrzeit hinzufüge, dann wird da grundsätzlich eine zweite Zeile angezeigt, obwohl das auf einem großen Monitor nicht notwendig ist.

Mittlerweile funktioniert die CSS-Anweisung: hyphens: auto; auch im Edge-Browser. Ich habe diese Anweisung aber deaktiviert, weil: word-break: break-all; bessere Ergebnisse liefert.

Code: Alles auswählen

div.event {
  font-size: clamp(0.8rem, 1vw, 1.2rem);
  padding: 3px;
  border-radius: 3px;
  box-shadow: 1px 1px 2px 0px #777777;
  margin: 0px 1px 3px 0px;
  /* -ms-hyphens: Auto;
  -webkit-hyphens: Auto;
  hyphens: Auto; */
  word-break: break-all;
  user-select: text;
}

Mag sein das es noch kleinere Handys gibt, aber ich lass das mal jetzt so. Es gibt da noch andere Sachen, die angepasst werden müssen

[Tommy Herrmann]

Moin,

bin gerade erst vom Einkauf nach Hause.

Toll - Deine Beispiel-Kalender geht schon mal am Firefox

Das andere muss ich erst "vorsichtig" ausprobieren. Blöderweise neige ich dazu ganz schnell ganz viel selbst zu ändern und weiß dann nicht mehr was ich gemacht hatte

... ich habe Deine Version von heute bereits herunter geladen, weil ich eben mit Deiner Version möglichst gleich sein will.

[Tommy Herrmann]

Hallo Werner,

habe jetzt Deine Version von heute auf meiner Seite eingebaut. Ohne irgendwelche Änderungen alles so belassen.

Es funzt prächtig

https://www.mobirise-tutorials.com/Even ... er-SQLite/

P.S.:

In Deiner Datei "lies_mich.txt" hast Du das Versions-Datum (oben) vergessen zu ändern.

[Werner-Zenk.de]

Vielen Dank Tommy, das Datum hatte ich vergessen

Ich habe heute nochmal daran etwas geändert. Die Größe des Pop-up Fensters lässt sich jetzt verändern, außerdem wurde das Design an Windows 11 angepasst (siehe Screenshot).

Ich glaube das reicht jetzt, möchte mich wieder einem anderen Projekt widmen

[Tommy Herrmann]

Moin,

alles klar - ich habe die neueste Version vom 06.01.2022 gerade übernommen.

[Tommy Herrmann]

@ Werner,

was ich noch fragen wollte:

Warum ist da das kleine Uhren-Symbol neben der Zeiteingabe in Deinem Screenshot (unten):

Bei mir erscheint das nicht

[Werner-Zenk.de]

Das Uhr-Symbol erscheint nur in Chromium Browsern (wie z. B.: im Edge), wenn man da draufklickt, öffnet sich eine zweiteilige Liste, in der man die Stunde und Minute auswählen kann.

[Tommy Herrmann]

danke Werner - hätte ich ja auch erst einmal selbst gucken können

... ich bin immer noch mir Mrs. Firefox verheiratet - ich denke über eine Scheidung nach