Events unterschiedliche Farben?

[jo94]

Hallo zusammen,

unter Events kann ich ja mehrere Events eintragen, nur kann ich diese auch unterschiedlich einfärben?
Wenn ja kann mir vielleicht jemand weiter helfen, wie ich nun vorgehen muss?

Vielleicht kurz zur Info >> Contao Version 4.4.35.

Über Eure Rückmeldung wäre ich SEHR dankebar

[Spooky]

Du kannst pro Event eine CSS Klasse eintragen.

[jo94]

Hallo danke für deine schnelle Hilfe.

Ich habe anbei mal einen screenshot beigefügt.
Ich würde gerne in diese Ansicht "Test1" eine Farbe geben und "Test2" eine andere Farbe (Siehe Screenshot 1).

Wenn ich eine CSS Klasse eintrage dann färbe ich nur den Teil ein der auftaucht wenn ich das Event anklicke!?(Siehe Screenshot 2)

Danke

[Spooky]

Ja, die CSS Klasse wird im Kalender glaube ich nicht ausgegeben...

[jo94]

Ja die konnte ich auch leider nicht finden, deshalb stehe ich jetzt etwas auf dem Schlauch :/

[hjo]

Hallo jo94,

hast du dich schon einmal mit Pseudo-Klassen auseinander gesetzt? Z.B. :nth-child. Vielleicht kannst du damit das einzelne Element ansprechen.

Unter diesen URLs findest du Infos zum Thema:
https://developer.mozilla.org/de/doc...CSS/:nth-child
oder
https://www.mediaevent.de/css/css3-selektor-pseudo.html

Vielleicht hilft das.
Ansonsten kann ein Link zur Seite vielleicht helfen.

Grüße
Hans-Jürgen

[folkfreund]

Hallo jo94,
vermutlich willst du ja auch nicht für jeden Event eine eigene Farbe, sondern du hast irgendwelche Kategorien, die durch unterschiedliche Farben dargestellt werden sollen. Du könntest z.B für jede Kategorie einen eigenen Kalender unter Events anlegen (der Begriff 'Kalender' ist hier etwas unglücklich, es ist halt eine Sammlung von Events). Das bringt gleichzeitig etwas Ordnung in deine Events.
Für die Kalenderansicht (wie in deinen Scrennshot 1) wählst du im Modul alle Kalender zur Anzeige aus. Jeder Event bekommt dann als CSS Klasse anhand des Kalenders, in dem er definiert ist, z.B. cal_1, cal_2 usw. Die kannst du dann für das Einfärben nutzen.

Gruß, folkfreund

[derRenner]

@folkfreund, finde ich einen guten Ansatz - an diese Möglichkeit hatte ich noch gar nicht gedacht ... wobei ich solch' eine Anforderung auch noch nicht hatte
Aber, grundsätzlich machbar, wäre mir aber zu "aufwändig", da man immer zwischen den unterschiedlichen Kalendern switchen und eintragen muss.

Mein Gedanke dahingehend wäre gewesen, dass man das template anpasst (cal_default.html5) und via dca-Anpassung eine "Farben-Auswahl" mit in den Event bringt. Ungeprüft frage ich mich aber, ob die eigenen Felder denn dann auch tatsächlich im cal_default-Template aufrufbar und/oder einsetzbar sind.

[Dr. Jo]

Die Erweiterung news_categories kann das:
https://github.com/codefog/contao-news_categories

[Spooky]

Die Erweiterung news_categories kann das:
https://github.com/codefog/contao-news_categories

Es geht hier aber um Events.

[Dr. Jo]

Knapp daneben ist auch vorbei - ich meinte natürlich das hier:
marebe1602/mae_event_categories

[derRenner]

Soeben getestet -
mit der Erweiterung wird die class auch ohne Vergabe einer Kategorie im Frontend ausgegeben

<td class="days active">
          <div class="header">17</div>
                      <div class="event cal_1 rot upcoming rsfh-event-1" itemscope="" itemtype="http://schema.org/Event">
              <a href="events/lorem-ipsum-dolor-sit-amet-consetetur-sadipscing.html" title="Lorem ipsum rot (Dienstag, 17. März 2020)" itemprop="url"><span itemprop="name">Lorem ipsum rot</span></a>
            </div>
                      <div class="event cal_1 blau upcoming rsfh-event-4" itemscope="" itemtype="http://schema.org/Event">
              <a href="events/lorem-ipsum-blau.html" title="Lorem ipsum blau (Dienstag, 17. März 2020)" itemprop="url"><span itemprop="name">Lorem ipsum blau</span></a>
            </div>
</td>

... warum wird das eigentlich nicht im core mit zur Verfügung gestellt?

[kmielke]

Meine Erweiterung calendar-extended-bundle bietet die Möglichkein für einen Kalender Vorder- und Hintergrundfarbe anzugeben. Wenn gesetzt, dann bekommt jedes Event aus dem Kalender diese Farben. Hilfreich, wenn man unterschiedliche Kalender in einer Übersicht hat.