Dynamic Calendars

Calendars can be very useful, especially when explaining to customers how they're being charged. Idomoo allows for the dynamic creation of calendars, on the fly, using a special group of fonts created by Idomoo for this purpose.

The following two video examples show what can be done:

Writing the name of the month is a simple matter of using a text placeholder layer, but creating the 7 by 6 array of numbered days is what the group of calendar fonts were made for.

The Calendar Fonts

The calendar fonts have characters representing the numbers 1-31 using the a-z letters (lowercase) and 1-5 numbers. Typing A on the keyboard results in the number 1. Typing B results in the number 2, and so on. Typing P results in the number 16. Typing 5 results in number 31. By typing a-b-c-d-e-f-g-enter, you get the first line of numbers. You continue to do that until a full calendar is created. As the font is a monospace font, the spacing between all the characters is the same, allowing for an aligned array.
The font contains several other shapes representing various backgrounds and icons, utilizing some of the remaining characters on the keyboard. For full list, see the end of this article.
Another important character is the ; character—the semicolon. This holds an empty character. If the first of the month needs to be a Wednesday and the week starts Monday, start by typing two semicolons.

The four fonts are a variation of these four typefaces and represent options for: sans serif; slab; serif; and a handwritten font. The fonts are freely available and you can download and use them in conjuncture with Idomoo's Calendar fonts. They are:

Using the Fonts

1. After installing the fonts they are available for you to use just like any font in After Effects.
2. Using the calendar fonts in AE design the calendar using as many placeholder layers as you need. We usually recommend a 7 by 6 array. Always take the extreme cases into account. So a 1st of the month on a Saturday or Sunday, rather than a Monday (if Monday is indeed the first day of your week).
3. Remember, the calendar text placeholder layers have all the regular limitations of a text placeholder layer.
4. Use a layer for each element in your calendar design. If we look at the example on the top left video, these are the layers used:
   1. Using calendar font:
   2. Cyan outline squares
   3. Cyan filled squares
   4. Red square start date
   5. Red square end date
   6. Pale yellow numbers
   7. Using regular font:
   8. Pale yellow month
   9. There are also static layers:
   10. Cyan calendar background
   11. Pale yellow days of the week
5. If you need to start your layer somewhere along the array (say on the 15th), use the semicolon (;), which is an empty character that produces the same space as all the other characters.

Exporting the Scene

Export the scene as you would any scene, but before you do that please change all the layers to having filled squares throughout the available range. For a 7 by 6 array you can just copy and paste the following text:

7777777
7777777
7777777
7777777
7777777
7777777

In the following downloadable RAR file, you can find all the files that make up the first example — that is, specifications for the day element, the After Effects project with all the animations, and the layers used in the After Effects project.

Character List

This is the list of available characters: