How to customize the calendar
After making a simple theme, we proceed to customize the calendar, like the following Office Board theme:
By default, each calendar can show 3 lines of text:
- Main line, February 26 in the above example
- Upper line, Sunday
- Lower line (hidden for this clock theme)
Now let’s try a theme development feature:
- Open the app information screen by clicking the i icon
- Scroll to Theme development section
- Enable “Show calendar frame”
- Click Done
The 3 calendar frames is now visible:
To customize a calendar like the Office Board theme, let’s edit the about.json file:
{
"theme": "Office Board",
"version": "1.0",
"author": "Volkov Evgeny",
"website": "http://the-m2.tumblr.com",
"cal-text-font": "Futura",
"cal-text-size": 20.0,
"cal-text-offset-x": 60,
"cal-text-offset-y": -5,
"cal-text-size-width": 140,
"cal-text-size-height": 40,
"cal-upper-text-font": "Futura",
"cal-upper-text-size": 18.0,
"cal-upper-text-offset-x": 60,
"cal-upper-text-offset-y": -25,
"cal-upper-text-size-width": 140,
"cal-upper-text-size-height": 30,
"cal-lower-text-offset-x": 60,
"cal-lower-text-offset-y": 1000,
"remark": "Cork board and office stuff inspired"
}
The Main calendar line is controlled by:
"cal-text-font": "Futura", "cal-text-size": 20.0, "cal-text-offset-x": 60, "cal-text-offset-y": -5, "cal-text-size-width": 140, "cal-text-size-height": 40,
We can customize the font, font color, frame offset, and frame size.
Font and frame size is straight forward. The offset-x and offset-y define the center of each frame. So “cal-text-offset-x”: 60 means 60 points right hand side from the screen center. “cal-text-offset-y”: -5 means 5 points above the screen center. The screen center is coordinate (0, 0).
To hide the Lower frame, just place it out of the screen:
"cal-lower-text-offset-x": 60, "cal-lower-text-offset-y": 1000,
To set the text color, using css-style color:
"cal-text-color": "#e1e9ef",
To set the text alignment (either Left, Center, or Right):
"cal-text-align": "Right",
Tip:
To speed up development, we can enable the “Load Documents folder” option. Such that we don’t have to zip, copy, and reload a theme .zip file every time we change something. When the “Load Documents folder” option is on, the app will load about.json and other .png files from the app’s Documents folder directly. After copying the about.json or any .png file, click the reload button.
Enjoy!
