Codrops Calendario

Drupal is niet echt sterk in het mooi presenteren van kalenders.. Views zorgt voor een kalender maar de look is nogal basic. In mijn zoektocht om Drupal 8 wat mooier te laten ogen is de Codrops code (Calendario) opgevallen.

Ze leveren code voor 2 kalenders. Een full screen kalender en een kleinere compacte versie. Het was een ware uitdaging om deze code om te zetten naar Drupal 8 aangezien er php aan te pas komt tussen de HTML , javascript en CSS om alles naar behoren te laten werken.

De code genereert alle dagen (tot in de eeuwigheid) zonder nodes te gebruiken. Het houdt rekening met schrikkeljaren, de 100- en 400 jaarse uitzondering en de 1000 jarige uitzondering daarop...

Installatie

1) Activeer het Stark thema. Niet standaard zetten. We hebben dit nodig voor de full screen weergave. De andere thema's hebben zelf zoveel CSS en JS dat ze kunnen storen.

2) Installeer de third party in de map libraries. (/libraries/Calendario/...)

3) Installeer de afhankelijkheden

4) Installeer en activeer de module

Werkwijze

Er zijn drie inhoudstypes bijgekomen

  1. Calendario events: een voorbeeld inhoudstype waarmee je inhoud kunt toevoegen met een startdatum en (facultatief) einddatum.

  1. Calendario: Full screen kalender. Geef het een titel en vul de velden in die gebruikt moeten worden (machinetaal naam). Je moet ook een achtergrondafbeelding uploaden.

  1. Calendario small: Het zelfde maar zonder achtergrondafbeelding. Wel met een mogelijkheid om de kleur in te stellen (met colorfield).

De module biedt ook de mogelijkheid om de namen van dagen, maanden,... te vertalen. Dit gebeurt automatisch met de interface van Drupal. Als er nog geen vertaling is, dan kan je dit via de vertalingstool van Drupal zelf vertalen.

Enig (en groot) nadeel van deze module is dat er per datum geen meerdere nodes kunnen gekoppeld worden. Ze zijn er wel, maar enkel de laatste wordt getoond. Je kunt dit opvangen door, als er meerder activiteiten zijn op een dag, deze te bundelen in één node. Je kunt ook een veiligheid inbouwen door bijvoorbeeld een unieke veldwaarde in te stellen (er bestaan modules voor). 

Voorstelling

Responsive...

Bij klikken komt men op de node: (hier ook een voorbeeld hoe ik meerdere activiteiten per dag oplos)

De kleine versie van de kalender. Met instelbare kleur (hier blauw).

Bij klikken komt men eerst op een link, daarna op de node.

Besluit

Niettegenstaande het (oplosbaar) nadeel van 1 node per dag kan deze module gebruikt worden voor een knappe kalender, desnoods gecombineerd met een boekingssysteem...