This article explores how to set up a calendar that displays 24 doors on both mobile and desktop. For general design guidance on the calendar, please check our primary Calendar design guide.
On mobile devices, the calendar will per default only display one door or field per day. It is however possible to build a campaign with 24 doors on mobile as well, but please be aware that this will also increase the complexity of the setup.
Note! To make multiple fields appear simultaneously on mobile, you must use the date range option in field settings. You cannot create a 24 door calendar using 'specific day' date type. Read more in this section.
Design guide
Mobile calendar image
Number: 1
Recommended size: 300 x 500 (to ensure that the entire calendar is displayed above fold on most devices)
Types of calendar graphics:
Door styling
For the calendar doors, you can either upload a calendar graphic where doors are included OR you can have the platform generate doors for you.
Auto-generated doors allow you to upload a simple calendar background image, and the platform will create doors over it. This is a helpful option if you don’t have the capacity to create a complex graphic that includes doors. Below you can find three different examples for how you can style the calendar doors.
Example 1: Autogenerated doors
Example 2: Autogenerated doors with solid door background color
Example 3: Calendar image where doors are included
If your calendar image includes doors, you should:
Leave the field style options blank (you can still use border radius if your doors are rounded).
Remove the ‘mobile label’ in the field settings, if the doors already include a number.
Individual field images
When using the 'image' option on the calendar, it is possible to upload an individual image for each field in the calendar.
This image will display within the field of the specific day.
Number: 1-24
Recommended size: 200 x 200 px
Consider content in the individual image
If you are creating a 24 door calendar for mobile and want to use an individual image for each field you should carefully consider the content in the field image, as it will be harder to see the individual image when all 24 doors are available.
Graphics with or without numbers
Within each individual field settings, you can upload a mobile image. You can upload images where the number is included in the graphic or you can have the calendar generate the numbers. See examples below:
How to configure the campaign
Set up 'date range' fields
On mobile devices, the calendar will per default only display one door or field per day. Getting several fields to show at the same time on mobile requires a small work-around.
To enable several fields per day on mobile, you need to use date range fields.
Using date range in the field settings will provide you with the option to place the fields on the calendar.
Navigate to field settings > change all fields to a date range.
Remember to use date range on all calendar fields!
What date range should I use?
If you only want the field to be active for one day, you can set the date range to 1/12/2024 to 1/12/2024.
If you want the field to be active for several days, for example when creating an advent calendar, you can also use a longer date period, e.g. 1/12/2024 to 6/12/2024.
In the below example, the doors are only active for one day.
Place the fields on the calendar image
Once you have set all fields to date range, you need to place the fields on the calendar images of your choice.
Navigate to Game settings > Layout. Click 'Place the fields'.
Recommended number of columns per row: 4
Recommended door size: 60 x 60
When placing the fields, it can be very useful to use the 'automatic positioning' feature. This allows you to place the fields within a streamlined grid. If needed, you can also hide the date labels to get a better overview of the fields placement.
