Codrops Calendario

Drupal is not really strong in presenting beautiful calendars .. Views provides a calendar but the look is pretty basic. In my quest to make Drupal 8 more beautiful i noticed the Codrops code (Calendario).

They provide code for two calendars. A fullscreen calendar and a smaller compact version. It was a challenge for this code to convert to Drupal 8 since php had to be aplied into HTML, JavaScript and CSS to make everything work properly.


1) Activate the Stark theme. Put not default. We need this for the full screen view. The other themes have many CSS and JS that they can interfere.

2) Install the third party in the libraries folder. (/ Libraries / Calendario / ...)

3) Install the dependencies

4) Install and activate the module


There are three types of content added

  1. Calendario events: preview content type which you can add content with a start date and (optional) date.

  1. Calendario Full screen calendar. Give it a title and fill in the fields to be used (machine language name). You should also upload a background image.

  1. Calendario small: The same but without the background image. However, with a possibility to adjust the color (with color field).

The module also offers the possibility of the names of days, months, ... to translate. This happens automatically with the interface of Drupal. If there is no translation, you can translate it yourself via the translation tool of Drupal.

Sole (and large) drawback of this module is that there can not be coupled multiple nodes may by date. They are there, but only the latter is shown. You can solve, if multiple activities in one day occur, combining them in a single node. 



Clicking leads to the node (here an example how I solve several activities per day)

The small version of the calendar. With adjustable color (blue here).

When you click first on a link, then shows the node.


Notwithstanding the (soluble) disadvantage of this node per day module, it can be used for a nice calendar, if necessary combined with a booking system ...