Event-Kalender mit SQLite

PHP, CSS und JavaScript lernen. Anwendungen für Webseiten
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Bestimmte Tage (blau), Wochentage (rot) oder Wochen (grün) hervorheben (optional).
Die Farbe kann man ändern, wie man möchte.

event-kalender_sqlite_wochentage_hervorheben_2.png
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

hast Du noch was geändert - oder einfach mal händisch gemacht?
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Ich habe noch was geändert, es wurden data-Attribute für die Woche: (z.b) data-woche="26" und
den Tag: data-tag="05.07.2022" hinzugefügt.

Die CSS-Anweisung dazu (Beispiel)

Code: Alles auswählen

td[data-tag="05.07.2022"],
td[data-tag="15.07.2022"],
td[data-tag="20.07.2022"],
td[data-tag="25.07.2022"] {
  background-color: #c6e3fd !important;
}

td[data-tag="07.07.2022"] {
  background-image: url("bild.jpg");
  background-size: Cover;
 }

td[data-wochentag="Samstag"],
td[data-wochentag="Sonntag"] {
  background-color: #ffcece !important;
}

tr[data-woche="26"],
tr[data-woche="29"] {
  outline: Solid 2px #11d100;
}
Eine neue Version ist aber noch nicht auf dem Server, erst morgen früh :)
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Moin,

na - bin gespannt :)

Ist das dann gleich mit im Editor wählbar - oder eher händisch in der CSS vorzunehmen?

... aber - ich werde es ja dann sehen.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Moin Tommy,

das muss man händisch in die CSS-Datei eintragen.
Wählbar ist das nicht, denn ich mache keine weiteren Optionsfelder in das Formular (5 reichen); das müsste dann auch wieder in der DB gespeichert werden.
Nicht, das es am Ende so aussieht: :D
big_ek2.png

Es hat heute länger gedauert als ich dachte, ich habe noch einige nervige Fehler beseitigt. Die meiste Zeit nimmt immer das Testen in Anspruch.

Einen schönen Sonntag
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Moin,

nee - das reicht doch vollkommen aus in der CSS - wer das nicht schafft, soll es eben sein lassen.

Ich gucke mir das gleich mal genauer an - auf den ersten Blick hast Du fast alles geändert :D
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

... alles bestens - nur bei mir passiert nichts mit [data-tag]

Code: Alles auswählen

/** Tag hervorheben */
td[data-tag="09.07.2022"],
td[data-tag="09.08.2022"] {
  background-color: #c6e3fd !important;
}
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Diese Optionen gehen gerade bei mir noch nicht

Code: Alles auswählen

/* Tag hervorheben */
td[data-tag="09.07.2022"],
td[data-tag="09.08.2022"] {
  background-color: #c6e3fd !important;
}

/* Tag mit einem Bild hervorheben */
td[data-tag="07.07.2022"] {
  background-image: url("https://www.mobirise-tutorials.com/images/Valentinstag.jpg");
  background-size: Cover;
}

/* Tag mit einem Farbverlauf (Querstreifen) hervorheben */
td[data-tag="28.07.2022"] {
  background-image: repeating-linear-gradient(45deg, Lightsteelblue, Lightsteelblue 5px, White 5px, White 10px);
}
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Das kommt davon, wenn man einen Fehler behebt, erscheint ein anderer :lachtot:

Ersetze in der Datei: kalender.php
Zeile: 177 und 178 folgendes:

Code: Alles auswählen

      $tabelle .= PHP_EOL . '  <td class="eintag' . $heute . '" data-tag="' . sprintf("%02s", $tag) . '.' . sprintf("%02s", $monat) . '.' . $jahr . '" data-wochentag="' . $wochentag . '">';
      $tabelle .= '<div class="' . (BENUTZER ? 'tag navLink' : 'keineAuswahl') . '" data-monatstag="' . $jahr . '-' . sprintf("%02s", $monat) . '-' . sprintf("%02s", $tag) . '" title="' . $title . '">' . $tag . '</div>';
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Moment - jetzt habe ich gerade einen Syntax-Fehler.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

jetzt geht ALLES (auf anderer Testseite) :)

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

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Moin,

... ich habe jetzt mal alle möglichen CSS-Anweisungen für die Hervorhebungen im Juli 2022 eingesetzt - die CSS und Farben habe ich teilweise etwas geändert:

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


CSS-Anweisungen.JPG
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

(nur die Abstzung der Wochenenden nicht:
Abstzung? Absetzung, Unterstützung

Die Wochenenden sehen ein bisschen komisch aus ;)
Ich habe auch versucht auch einen anderen Farbverlauf einzubinden, aber der WOW-Effekt hält sich in Grenzen.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

... ich habe jetzt mal für die Wochenenden diesen BASE64 Code verwendet:

Code: Alles auswählen

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=);
https://stackoverflow.com/questions/136 ... 3#25076323

... wie kann man da eigentlich eine Farbe anpassen :confused:

Dein Download ist noch deaktiviert?!
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Das ist ein Bild, das in einem Base64-Code Zeichenkette konvertiert wurde da lässt sich keine Farbe ändern :D
Zurück codieren -> Farbe mit Paint ändern und dann wieder codieren ...
Base64 Decoder - Es sollten allerdings nur kleine Bilder verwendet werden, der Webserver braucht lange bis das Bild kodiert ist.

Hier mal in Gold (#ffd700)

Code: Alles auswählen

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mP4f53hPwMyAAAsYwLWkAFHOQAAAABJRU5ErkJggg==);
Sieht dann so aus:
base64_hintergrundbild.png
Dein Download ist noch deaktiviert?!
Ich habe die fehlerhafte Datei auf dem Server gelöscht dann erscheint diese Meldung.
Noch keine Zeit gehabt das zu ändern!
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

... ah - keine Ahnung wie das mit dem Code funktioniert.

... aber wie Du schon sagtest, ist das natürlich immer auch Geschmackssache und natürlich auch farblich dem eigenen Design anzupassen. Da kann man dann nur einen möglichst neutralen Vorschlag im Skript hinterlegen.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Ich habe bemerkt das da noch andere Fehler drin waren, zum Beispiel wurde der aktuelle Tag nicht mit einem blauen Rahmen markiert.

Eine aktualisierte Version ist auf dem Server und Danke fürs Testen :tu:
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

ja - hatte eben (vorsichtshalber) noch die Dateien mit "WinMerge" verglichen und das gesehen.

Danke für den tollen Kalender :tu:
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Moin Werner,

das mit dem BASE64 habe ich noch nicht verstanden.

Werner-Zenk.de hat geschrieben: So 16. Jan 2022, 13:40 Zurück codieren -> Farbe mit Paint ändern und dann wieder codieren ...
Base64 Decoder - Es sollten allerdings nur kleine Bilder verwendet werden, der Webserver braucht lange bis das Bild kodiert ist.

Wie genau muss man das machen? Mit Deinem "Base64 Decoder" geht das doch nicht oder wie?

Wie und wo kann ich meinen Code "zurück" kodieren und was kommt da als Ergebnis dann genau raus? Welchen Teil der URL muss ich überhaupt dann verwenden?

Code: Alles auswählen

url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=);
Wenn ich diese URL z.B. hier eingebe:

https://de.functions-online.com/base64_decode.html

... erhalte ich dieses Ergebnis. Das Ergebnis ist aber kein gültiger .png Inhalt. Ich müsste doch ein gültiges Bildformat als Resultat erhalten, um es dann auch mit einem Bildbearbeitungsprogramm ändern zu können.



Base64-Decoder.JPG



... auch bei der Eingabe von dem nur "data:" Teil komme ich nicht weiter:

Code: Alles auswählen

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=

P.S.:

... ich wollte es nur verstehen - brauchen tue ich es gerade nicht mehr, da ich das Raster wieder entfernt habe und nun auch eine Farbe (#e1e1e1) in meinem Kalender für das Wochenende verwendet habe.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Moin Tommy,

hier steht alles beschrieben: https://werner-zenk.de/scripte/grafiken ... ichern.php

Und wie du aus einem Base64-String wieder ein Bild machst:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA[...]AAAAABJRU5ErkJggg==" alt="Stern">
[...] = (Base64)-Code wurde gekürzt.

Speicherst du in eine HTML-Datei und lässt dir das Bild im Browser anzeigen.
Dann kopierst du per drag and drop das Bild auf deinem Desktop und nun kannst du es mit Paint bearbeiten :)

Ich habe den Base64-Coder Generator erweitert, jetzt kann auch ein Base64 String wieder als Bild dargestellt werden: https://werner-zenk.de/tools/base64decoder.php
Antworten

Wer ist online?

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