This article ONLY works when using Avonni Creator. Only customers with an active subscription that was activated on or before December 31, 2021 have access to Avonni Creator.
This article is only valid when working on a Creator project.

Design a calendar

Final Result

How to?

Create the Layout

  • Drag a Layout of 3 columns
  • Set the Horizontal Alignment to Spread
  • Set the Vertical Alignment to Middle
  • Leave Gutters and Gutters Direct unchecked

Add chevrons on the left and right side

Add a button icon element

  • Variant: Bare
  • Size: Medium
  • Icon: Chevronleft and Chevronright

Add a radio button group element to display the months

  • Variant: Label hidden

Create a layout to display days of a week

  • Drag a Grid element
  • Set the manual layout to 7
  • Horizontal alignement: Full
  • Gutters: checked

Add text element to design days

Add Grid to highlight calendar content

  • Drag a Grid element with manual layout to 7 columns
  • Add a DIV element inside each column
  • Set a background color for the DIV element
  • Set a Height (e.g 54px)
  • Set a All sides padding spacing
  • Add a text element inside
  • Duplicate each DIV element for any other columns


Avonni Designer vs Avonni Builder comparison table

View all the differences between Avonni Designer and Avonni Builder.