03-06-2018 07:16
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-06-2018 07:16
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I just got a Fitbit Ionic and I am trying to create a custom clock face in Fitbit Studio. I've got the image background I want, and the time where I want it, but I would like to add the date so that it updates each day. How do I do this?? I don't know what the proper code is and I cannot find it anywhere. Please help!
Answered! Go to the Best Answer.

Accepted Solutions
03-06-2018 18:17 - edited 03-07-2018 06:52
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-06-2018 18:17 - edited 03-07-2018 06:52
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
I was playing with this the other night.
I started with the clock app, and tweaked it.
First think of the 3 spots you need to change:
Apps>index.js is where the calculating happens.
Resource>index.gui is where you define what goes on the face.
Resource>styles.css defines how it is displayed.
This may not be the most efficient, but this is how i added it:
index.js
Added these to const below the current one:
const myMonth = document.getElementById("myMonth"); const myDay = document.getElementById("myDay");
Added 2 addition "let":
let monthnum = today.getMonth(); let day = today.getDate();
Since monthnum is now the number of the month (0-11, so January is 0) I wanted to change to the name, so I created an array for the Month Names:
var month = new Array(); month[0] = "January"; month[1] = "February"; month[2] = "March"; month[3] = "April"; month[4] = "May"; month[5] = "June"; month[6] = "July"; month[7] = "August"; month[8] = "September"; month[9] = "October"; month[10] = "November"; month[11] = "December";
Then used the array to set the variable for the Month Name
let monthname = month[monthnum];
Then I assigned the labels:
myMonth.text = `${monthname}`; myDay.text = `${day}`;
That's it for Index.js
Index.gui I added the labels to the face:
<text id="myMonth" /> <text id="myDay" />
Finally I added code for the placement and formatting of text:
#myMonth { font-size: 50; font-family: Tungsten-Medium; text-length: 32; text-anchor: end; x: 90%; y: 50%+80; fill: red; } #myDay { font-size: 50; font-family: Tungsten-Medium; text-length: 32; text-anchor: end; x: 90%; y: 100%; fill: red; }
03-06-2018 18:17 - edited 03-07-2018 06:52
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-06-2018 18:17 - edited 03-07-2018 06:52
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
I was playing with this the other night.
I started with the clock app, and tweaked it.
First think of the 3 spots you need to change:
Apps>index.js is where the calculating happens.
Resource>index.gui is where you define what goes on the face.
Resource>styles.css defines how it is displayed.
This may not be the most efficient, but this is how i added it:
index.js
Added these to const below the current one:
const myMonth = document.getElementById("myMonth"); const myDay = document.getElementById("myDay");
Added 2 addition "let":
let monthnum = today.getMonth(); let day = today.getDate();
Since monthnum is now the number of the month (0-11, so January is 0) I wanted to change to the name, so I created an array for the Month Names:
var month = new Array(); month[0] = "January"; month[1] = "February"; month[2] = "March"; month[3] = "April"; month[4] = "May"; month[5] = "June"; month[6] = "July"; month[7] = "August"; month[8] = "September"; month[9] = "October"; month[10] = "November"; month[11] = "December";
Then used the array to set the variable for the Month Name
let monthname = month[monthnum];
Then I assigned the labels:
myMonth.text = `${monthname}`; myDay.text = `${day}`;
That's it for Index.js
Index.gui I added the labels to the face:
<text id="myMonth" /> <text id="myDay" />
Finally I added code for the placement and formatting of text:
#myMonth { font-size: 50; font-family: Tungsten-Medium; text-length: 32; text-anchor: end; x: 90%; y: 50%+80; fill: red; } #myDay { font-size: 50; font-family: Tungsten-Medium; text-length: 32; text-anchor: end; x: 90%; y: 100%; fill: red; }
03-07-2018 08:21
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-07-2018 08:21
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Thank you SO much! That greatly helps!
The only thing now is that I keep getting an error message which says "today is not defined". How would I go about doing that?

03-07-2018 11:40
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-07-2018 11:40
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Just add the line:
let today = new Date();
before it is used.
03-07-2018 11:42
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-07-2018 11:42
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Odd... maybe I missed a change. Here is the whole index.js for me:
import clock from "clock"; import document from "document"; import { preferences } from "user-settings"; import * as util from "../common/utils"; // Update the clock every minute clock.granularity = "minutes"; // Get a handle on the <text> element const myLabel = document.getElementById("myLabel"); const myMonth = document.getElementById("myMonth"); const myDay = document.getElementById("myDay"); // Update the <text> element every tick with the current time clock.ontick = (evt) => { let today = evt.date; let hours = today.getHours(); let monthnum = today.getMonth(); let day = today.getDate(); var month = new Array(); month[0] = "January"; month[1] = "February"; month[2] = "March"; month[3] = "April"; month[4] = "May"; month[5] = "June"; month[6] = "July"; month[7] = "August"; month[8] = "September"; month[9] = "October"; month[10] = "November"; month[11] = "December"; let monthname = month[monthnum]; if (preferences.clockDisplay === "12h") { // 12h format hours = hours % 12 || 12; } else { // 24h format hours = util.zeroPad(hours); } let mins = util.zeroPad(today.getMinutes()); myLabel.text = `${hours}:${mins}`; myMonth.text = `${monthname}`; myDay.text = `${day}`; }
03-07-2018 11:52
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-07-2018 11:52
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
It seems most of the times I get one of those kind of errors it is a missing or errant ; or other character, so I would check that as well.

03-08-2018 16:46
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-08-2018 16:46
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Try changing you today thing to
let today = new Date();
I read somewher the `new` part is important.

03-22-2018 06:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-22-2018 06:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Since I had already used today in this way, in my code (for getting steps):
import { today } from "user-activity";
adding your code collided and caused some issues, so I just renamed that variable to thisDay like this:
(inside the clock tick area)
let thisDay = evt.date;
let monthnum = thisDay.getMonth();
let day = thisDay.getDate();
...and that sorted things out for me.
Thanks for sharing your great example!

10-16-2018 11:25
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

10-16-2018 11:25
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I am trying to use your code, but I am getting the following error
>Unhandled TypeError: Cannot set property 'text' of null myMonth at app/index.js:40,1
I am not sure what I am doing wrong.

10-16-2018 17:34
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

10-16-2018 17:34
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Did you add it to the styles.css and the index.gui? Did you add it to the document.getElementById in your index.js?

10-17-2018 09:16
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

10-17-2018 09:16
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I have not touched any of this since not long after I posted it. The null might indicate that monthname is not getting set properly, therefore getting a null error. I would look at your assignment there.

12-27-2018 20:29
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

12-27-2018 20:29
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
It works! Thank you!
@Bsherm wrote:Odd... maybe I missed a change. Here is the whole index.js for me:
import clock from "clock"; import document from "document"; import { preferences } from "user-settings"; import * as util from "../common/utils"; // Update the clock every minute clock.granularity = "minutes"; // Get a handle on the <text> element const myLabel = document.getElementById("myLabel"); const myMonth = document.getElementById("myMonth"); const myDay = document.getElementById("myDay"); // Update the <text> element every tick with the current time clock.ontick = (evt) => { let today = evt.date; let hours = today.getHours(); let monthnum = today.getMonth(); let day = today.getDate(); var month = new Array(); month[0] = "January"; month[1] = "February"; month[2] = "March"; month[3] = "April"; month[4] = "May"; month[5] = "June"; month[6] = "July"; month[7] = "August"; month[8] = "September"; month[9] = "October"; month[10] = "November"; month[11] = "December"; let monthname = month[monthnum]; if (preferences.clockDisplay === "12h") { // 12h format hours = hours % 12 || 12; } else { // 24h format hours = util.zeroPad(hours); } let mins = util.zeroPad(today.getMinutes()); myLabel.text = `${hours}:${mins}`; myMonth.text = `${monthname}`; myDay.text = `${day}`; }
@Bsherm wrote:Odd... maybe I missed a change. Here is the whole index.js for me:
import clock from "clock"; import document from "document"; import { preferences } from "user-settings"; import * as util from "../common/utils"; // Update the clock every minute clock.granularity = "minutes"; // Get a handle on the <text> element const myLabel = document.getElementById("myLabel"); const myMonth = document.getElementById("myMonth"); const myDay = document.getElementById("myDay"); // Update the <text> element every tick with the current time clock.ontick = (evt) => { let today = evt.date; let hours = today.getHours(); let monthnum = today.getMonth(); let day = today.getDate(); var month = new Array(); month[0] = "January"; month[1] = "February"; month[2] = "March"; month[3] = "April"; month[4] = "May"; month[5] = "June"; month[6] = "July"; month[7] = "August"; month[8] = "September"; month[9] = "October"; month[10] = "November"; month[11] = "December"; let monthname = month[monthnum]; if (preferences.clockDisplay === "12h") { // 12h format hours = hours % 12 || 12; } else { // 24h format hours = util.zeroPad(hours); } let mins = util.zeroPad(today.getMinutes()); myLabel.text = `${hours}:${mins}`; myMonth.text = `${monthname}`; myDay.text = `${day}`; }

