De kalender van JEvents is zeer populair wellicht omdat de gratis versie reeds veel functionaliteiten voorziet. De vervelendste beperking bestaat uit het klein aantal kleurschema's. Dit artikel biedt hierop 2 oplossingen.

Kleuren van de kalender

Hieronder staat één van de maandkalender-varianten die de gratis JEvents-extensie aanbiedt.

Maandkalender standaard

Je kan de stijl hiervan veranderen in het JEvents-configuratiescherm waar je in een invulveld je eigen CSS kan aanbrengen. Maar de maandkalender is opgebouwd uit zodanig veel elementen dat het enig opzoekwerk vraagt om juist die te vinden waarop jouw nieuwe CSS-stijl zou toegepast moeten worden.

In het rekenblad dat je hier kan downloaden, vind je de hele lijst van belangrijkste elementen. Voor elke van hen kan je de belangrijkste stijl-elementen bepalen die je wil toepassen. Dankzij de reken-formules worden dan de nodige CSS-regels aangemaakt. Ze staan verdeeld over 2 bladen:

  1. Tabelinhoud: hierin kan je de achtergrond van de elementen en hun letterformatering aanpassen
  2. Tabelranden: bevat de elementen waarmee je de kaders van de elementen, blokken of cellen, kunt veranderen

In de rijen van deze bladen staan de opbouwende HTML- & CSS-elementen (de CSS-selectors) waarvan je de belangrijkste stijleigenschappen kan specificeren. Als je nog andere eigenschappen wil aanpassen, dan kan je in die lijst gemakkelijk vinden welke CSS-selector je daarvoor moet configureren.

Als eerste kennismaking van deze kalender-elementen kan je eventueel de verschillende elementen elk een andere opvallende kleur geven om dan daarvan het effect in de front-end te zien. Zo ontdek je gemakkelijk waarvoor elk element staat.
Er zijn ook enkele uitgewerkte kleurkeuzes voor handen.

Uit de rekenbladen inhoud en randen kopieer je steeds de kolom J met de CSS-regels. Als je de hoofding van de kolom J mee kopieert, dan kan je in de editor van JEvents gemakkelijker de grote delen in de CSS-regels onderscheiden.

Het effect van je eigen CSS in JEvents moet je steeds bekijken in de Maand-kalender én in de Week-kalender en liefst met minstens 1 activiteit gedefinieerd. Pas zo ben je zeker dat jouw aangepaste kalender in alle gevallen er naar wens uitziet.

Voor het kiezen van kleuren kan je spieken op www.html.am/html-codes/color/color-scheme.cfm . Als je op een kleur uit die tabel klikt, dan zal de geselecteerde kleur de achtergrond kleur worden van de tabel. Zo kan je het combinatie-effect zien van die kleur met de andere uit de tabel.
Wil je meer variaties dan zie je 1500 kleuren in hexadecimale waarde mooi opgelijst in www.pagetutor.com/common/bgcolors1536.html . Ook W3 School biedt een vertrouwde kleurkiezer aan op hun "color picker" waarbij je dan bij een kleurkeuze diens lichte en donkere varianten aan de rechterzijde te zien krijgt. Voor de lichtgroene kalender-voorbeeld werd dit gebruikt (zie rekenblad L. inhoud).

In het rekenblad zullen sommige cellen een grijze achtergrond hebben. Deze laat je leeg omdat die eigenschap voor dat element geen zin heeft. Zo worden sommige elementen enkel als anchor getoond, waardoor het geen zin heeft om een waarde voor color in te vullen (maar wel voor de anchor-variant van dat element).

Je kan gerust beginnen met enkel het rekenblad Tabel inhoud aan te passen. De standaardwaarden die JEvent voor de randen voorziet, passen misschien met de jouw gekozen achtergrondkleuren. Zo niet, dan specificeer je de kleuren voor de randen in het 2° blad Tabel randen.

Als je een kalender zonder achtergrondkleuren wil, dan zal je toch een kleur voor de achtergronden moeten kiezen. Bij mijn weten kan je een voorheen gedefinieerde kleur (uit de standaard JEvent stylesheets) niet inactiveren of wegdoen, tenzij door een andere kleur te specificeren. Een achtergrondfiguur kan je wel laten verdwijnen via de regel background-image: none.

Doordat de JEventprogrammeers er niet voor teruggeschrokken zijn om sommige stijl-elementen te coderen via PHP, in plaats van dit via het CSS te doen, wordt er in onze CSS-generator het commando !important gebruikt om al de rest te overschrijden. Hindert je dit, doe het weg en bekijk het resultaat in de back-end.

De spreadsheet is niet perfect maar is wel overzichtelijke en niets weerhoud je om zelf verbeteringen aan te brengen. Dit hoef je daarom niet in de spreadsheet zelf te doen. Zoek de lijn voor het bedoelde element en kopieer die dan om bijkomende CSS-regels te schrijven. Een praktische toepassing is de lijn onderaan het titelhoofd met de 7 dagen. In spreadsheet kan je maar 1 type voor de 4 randen kiezen. Voor de 7 dagen is het best mogelijk dat je een vaste lijn wil onderaan maar voor de andere randen puntjes. Daarvoor zet je in de spreadsheet de randen op dashed en kopieer dan die lijn om voor die CSS-selector de volgende CSS-eigenschap te zetten: border-bottom-style: solid; Kopieer uit veiligheid deze extra lijn als laatste in het JEvent scherm voor eigen CSS.
Zo vind je ook in het rekenblad G.inhoud een voorbeeld waarbij de cel van de maandkalender een kleurgradatie krijgt door de CSS-regel #jevents_body .todayclr { background: radial-gradient(#ccffcc,#FFFFFF) !important;} (waarbij #ccffcc genomen is uit een eerder ingevulde veld).
In de bewerkte maand-kalender hieronder zie je daar een voorbeeld van op de cel voor maandag 5 juni :

Maandkalender bewerkt

JEvents heeft in het maandoverzicht bij de hoofding voor Vorige maand en voor Volgende maand respectievelijk linkse en rechts pijltjes bijgezet, maar deze ontbreken in het Week-overzicht. De pijltjes zijn de afbeeldingen /components/com_jevents/views/ext/assets/images/mini_arrowleft.gif en /components/com_jevents/views/ext/assets/images/mini_arrowright.gif. Om een gelijkaardig affect te bekomen bij de hoofding voor Vorige week en Volgende week kunnen we de titels overschrijven via Joomla backoffice Taalbeheer: Taal overrides. In plaats van de pijltjes als afbeelding zouden we dan de tekens kleiner dan, < , en groter dan, >, kunnen gebruiken. Spijtig genoeg verdwijnen deze speciale tekens bij het bewaren in Joomla taal-override (en de tekens in een URL-encode zetten helpt niet). Toch is er een oplossing: doe een taal-override voor die 2 teksten, open daarna het override-taalbestand en wijzig daarin dan manueel de teksten (het bestand van taal-overrides vind je in de folder /language/overrides en heeft de bestands-extensie .ini).

Overriding AfgelopenWeek

 

Het Excel-bestand dat als CSS-generator werkt, bevat volgende voorbeelden

  • kalender zonder achtergrondkleuren: groen, rood en blauw
  • volledig gekleurde kalender in lichtgroen

Je kan ervoor kiezen om onmiddellijk in deze rekenbladen te werken of hiervoor de oorspronkelijke werk-bladen Tabel inhoud en Tabel randen te gebruiken.

Kleur van een evenement

JEvent laat toe om een kleur aan een activiteit toe te kennen. Deze kleur wordt dan in de front-end toegepast als streep (rond of) onder die activiteit in de kalender. Zo kan je bepaalde activiteiten doen opvallen. Als je hier geen spelregels voor de auteurs oplegt, dan kan het eindresultaat weleens te kleurrijk worden.

Als er bij de evenementen een bepaalde systematiek voor kleurtoewijzing gebruikt wordt, dan kan je er aan denken om dit te automatiseren. In de (gratis versie van) JEvents is hiervoor niets voorzien, maar ook hiervoor hebben we een oplossing: de toekenning via data-base triggers laten gebeuren. Dit houdt enkele beperkingen in:

  • Je moet als administrator toegang hebben tot de data-base (en uiteraard enige SQL-kennis).
  • Na sommige updates van JEvent-extensie gebeurt het dat de data-base trigger verwijderd werd waardoor je hem opnieuw moet definëren.
  • Niet alles is mogelijk omdat je de risico op fouten (in de data-base) moet vermijden.

Vooral deze laatste beperking is vervelend. Je zou namelijk een kleur kunnen toe wijzen aan de hand van de categorie waaronder het evenement gedefinieerd werd. Maar de categorie-ID zit niet gespecificeerd in de tabel waar de kleur in staat (er is wel een kolom categories maar die lijkt ongebruikt), de categorie staat in een aparte tabel (#_jevents_vevent, ze bestaat waarschijnlijk om herhalende evenementen beter te beheren). Doordat we niet zeker zijn wat de orde van creatie is (het herhalende elementen voor of na het hoofdrecord), kunnen we niet riskeren bij creatie van de éne de ander op te roepen in zijn data-base-trigger. Daarom beperken we ons in de data-base trigger tot die velden die in de tabel #_jevents_vevdetail zitten.

Bepaal of je met de gewenste kleur-systematiek je op een bepaald veld van de tabel #_jevents_vevdetail kunt baseren. Probeer het criterium eerst uit door een SELECT-query op waarin je het criterium in toepast.

Hieronder zie je 2 voorbeelden waarbij de kleur bepaald wordt aan de hand van de titel.

Voorbeeld van een lokale vereniging waarbij is overeengekomen dat de titel steeds begint met de plaats van het gebeuren.

CREATE TRIGGER jos_jevents_vevdetail_before-ins
BEFORE INSERT
ON jos_jevents_vevdetail FOR EACH ROW
begin
if NEW.color is null or NEW.Color = ''
then
if NEW.summary like 'Mortsel %' then set NEW.color = '#008027';
elseif NEW.summary like 'Boechout %' then set NEW.color = '#709500';
elseif NEW.summary like 'Vremde %' then set NEW.color = '#76990C';
elseif NEW.summary like 'Lint %' then set NEW.color = '#005580';
else set NEW.color = '#8999A9';
end if;
end if;
end;

Definieren van DB trigger

Kleurbepaling aan de hand van het type sport in de titel:

CREATE TRIGGER jos_jevents_vevdetail_before-ins
BEFORE INSERT
ON jos_jevents_vevdetail FOR EACH ROW
begin
if NEW.color is null or NEW.Color = ''
then
if NEW.summary like '%bal%'or NEW.summary like '%ugby%' then set NEW.color = '#008000';
elseif NEW.summary like '%wem%' or NEW.summary like '%duik%' then set NEW.color = '#0000FF';
elseif NEW.summary like '%ennis%|%' or NEW.summary like '%adming%' then set NEW.color = '#FFA500';
else set NEW.color = '#D3D3D3';
end if;
end if;
end;

(Bemerk de toepassing van de hoofdlettergevoeligheid: voor de balsporten komt het woord 'bal' steeds achteraan en zal het dus nooit als 'Bal' voorkomen, maar rugby kan zowel in het begin van de titel ('Rugby ...') als verder in de titel voorkomen ( '...rugby ...'), de schrijfwijze '%ugby%' vangt deze beide op.

De kleurcodes moeten in hexadecimaal formaat gezet worden!


Veel succes!

Heb je een toffe kleurcombinatie uitgedokterd en wil je ze delen? Heb je opmerkingen of tips?
Contacteer de auteur M. Ampe