Event-Kalender mit SQLite

PHP, CSS und JavaScript lernen. Anwendungen für Webseiten
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3056
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Hallo Werner,

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

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.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 586
Registriert: Di 8. Dez 2020, 19:42

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von 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 ;)
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3056
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von 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.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3056
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von 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 :freude: :hurra:

Wo stellt man denn den Farb-Modus ein :confused:
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 586
Registriert: Di 8. Dez 2020, 19:42

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Tommy Herrmann hat geschrieben: Mo 3. Jan 2022, 07:34 Wo stellt man denn den Farb-Modus ein :confused:

farbmodus_firefox.png

farbmodus_edge.png

darkmode.png


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;
}
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3056
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von 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.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 586
Registriert: Di 8. Dez 2020, 19:42

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Ein leicht verständliches Tutorial :tu:
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3056
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von 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:


Screenshot_20220104-064908_Samsung Internet.jpg


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:


Fehler.JPG
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3056
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von 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 :D


Kalender-Chinesisch.JPG
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3056
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von 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.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 586
Registriert: Di 8. Dez 2020, 19:42

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Tommy Herrmann hat geschrieben: Di 4. Jan 2022, 12:31 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 :confused:
Ich habe es danach nicht mehr im Firefox getestet :(

Danke für deine Bemerkung :tu:

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)

Tommy hat geschrieben: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 :D
:D :tu:
Tommy hat geschrieben: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.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3056
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Moin Werner,

und vielen Dank für Deine Mühe :tu:

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/


Event Umbruch bei Zeiteingabe.JPG


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:


Bootstrap Breakpoints.JPG
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 586
Registriert: Di 8. Dez 2020, 19:42

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von 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;
}
test_412x914.png
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 :)
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3056
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Moin,

bin gerade erst vom Einkauf nach Hause.

Toll - Deine Beispiel-Kalender geht schon mal am Firefox :tu:

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 :D

... ich habe Deine Version von heute bereits herunter geladen, weil ich eben mit Deiner Version möglichst gleich sein will.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3056
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Hallo Werner,

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

Es funzt prächtig :tu:

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.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 586
Registriert: Di 8. Dez 2020, 19:42

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Vielen Dank Tommy, das Datum hatte ich vergessen :tu:

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).

anpassung_win11.png
Ich glaube das reicht jetzt, möchte mich wieder einem anderen Projekt widmen ;)
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3056
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Moin,

alles klar - ich habe die neueste Version vom 06.01.2022 gerade übernommen.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3056
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

@ Werner,

was ich noch fragen wollte:

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


event-kalender_sqlite_eintragen.png


Bei mir erscheint das nicht :confused:
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 586
Registriert: Di 8. Dez 2020, 19:42

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von 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.

uhr_chromium.png
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3056
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

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


Edge Browser Ansicht.JPG


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

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 0 Gäste