What can this template do?
The calendar template allows you to visualize the timing of events in an engaging and interactive way.
Calendars have been one of the oldest data visualization types. With Flourish, through popups, filters, custom icons and a host of localization and styling options, you can bring your calendar to life and make your users' interactions more fun and interactive.
How to get started
- 1
-
Head over to the template chooser
Go to the template chooser and choose one of the calendar template starting points.
- 2
-
Add your data
Click on the Data tab and upload your data. Your dataset should feature a column of dates and the event name. You can also add columns to color by or select an icon, filter by and additional columns with information to be shown in popups.
Date Event Icon Country filter Importance 18/07/24 European Central Bank Meeting Central Bank Meeting Euro Area Medium 18/07/24 Venezuela Presidential Elections Election Venezuela Low 31/07/24 Federal Reserve Meeting Central Bank Meeting US High 31/07/24 Bank of Japan Meeting Central Bank Meeting Japan Medium 19/08/24 Democratic National Convention Election US Low 22/08/24 Jackson Hole Economic Symposium Summit US Medium - 3
-
Bind these columns to the relevant bindings in the Data tab.
- 4
-
Color categories or icons
You can either represent events by Color or by Icons.
When Coloring by, this can be a column of numbers or text. A number column will color cells numerically, while a text column will use the color palette.
To use icons, this column should contain categories that match those in the Category column in the Icons sheet and the relevant icons will be retrieved. When an icon is used for a category, it will no longer take on a color from the color palette.
An emoji, uploaded image, or Font Awesome icon keyword for the icon to be used for this category. The Font Awesome icons found at this link are supported.
- 5
-
Editing your calendar
Head over to the Preview tab, there are a number of different options you can use to start customizing your calendar!
- 6
-
Choose a yearly, monthly, weekly or continuous view for your calendar as well as the locale and start day.
You can also highlight today and load on today's date, if the date is included in the data. By turning on Style today cell, a host of styling options become available, such as bold, stroke color and stroke width.
- 6
-
With the Page header & navigation settings, you can change the alignment of the header.
As well as its content - either Month or Month and year.
If you want to change the size and color of the navigation arrow buttons, you can achieve this through the Navigation options. You can also use your own navigation icon - upload one for the "next" icon and it will be rotated for the previous icon.
- 6
-
Next, let's move to the Column & row headers settings.
You can choose between different column header lengths, such as Full, Short, or just Initial.
There is also a wide array of header styling options, such as size, padding, weight, and alignment.
- 6
-
The Cells set of options offers you in-depth customization of the calendar cells.
You can change the horizontal alignment, text weight, size, and color.
To further bring the calendar visualization closer to your vision, a host of cell styling options are available, such as padding between and inside cells, and background and empty cells color.
- 6
-
For icons, you can further customize them by changing their size, roundness and default color.
For when the content can't fit in a cel, the overflow text content option enables you to choose to display either "+..." or a custom text, such as "more".
NOTE: When there are multiple events on a day, the yearly view will automatically display a color scale to show the number of events.