Making today’s date dynamic

The top of the “For You” screen shows today’s date. It’s an image, so on the off chance that you’re reading this on June 17, 2023 (which promises to be pleasant Saturday) it’ll be incorrect. But that can easily be fixed with a Text Layer and some lines of custom code.

Adding a Text Layer

Let’s first make a textLayer with the correct font size, weight, position, and color. When that’s in place, we’ll make its text dynamic with a function.

Our Text Layer:

today = new TextLayer
    text: "SATURDAY, JUNE 17"
    fontSize: 13.5
    color: "red"
    parent: $.Header_For_You
    x: $.Today_s_date.x
    y: $.Today_s_date.y

You don’t need to set its fontFamily because on your Mac it’ll be the same default font as it is on iOS: San Francisco. The fontSize is apparently 13.5 points. (That’ll be 27 pixels.)

I used ”red” as a contrasting (and temporary) text color to find the correct position more easily.

The existing date is in a separate layer, $.Today_s_date, and its parent is $.Header_For_You. By giving our Text Layer the same parent, we can reuse $.Today_s_date’s position.

You’ll see that the Text Layer has to move up a bit. Making its y position 7 pixels less should put it in the correct spot.

y: $.Today_s_date.y - 3.5

A function that outputs today’s date

Now, here’s the function that will give us the current day as a text string:

todaysDate = ->
    days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
    months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
    now = new Date()
    dayOfTheWeekNumber = now.getDay()
    monthNumber = now.getMonth()
    theDateAsText = days[dayOfTheWeekNumber] + ", " + months[monthNumber] + " " + now.getDate()
    return theDateAsText

I’ll explain it line by line.

The first line creates the function, todaysDate.

todaysDate = ->

The arrow -> says: “This is a function, and the following lines should run when it’s called.”

The first line in our brand-new function just creates an array, days, which contains the names of the days of the week …

days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

… and the second line does the same for the names of the months.

months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

Then we create now, a JavaScript date object, using new Date().

now = new Date()

We don’t give the Date() constructor any more information, so by default, it will contain the current date (and also time, actually, up to the millisecond).

A Date object comes with a lot of built-in functions; we’ll use three of them:

• getDay(), to get the current day of the week. It returns a number between 0 and 6. You might think the first day of the week would be Monday (or Saturday)… but in this case, the 0 represents Sunday.
• getMonth(), to get a number for the current month. No discussion here: the first one will always be January.
• getDate(), to get the day in the month. This one doesn’t use zero-based numbering (as the others above do), so it simply starts with 1.

First, we get the numbers for the current day of the week and month and save them in dayOfTheWeekNumber and monthNumber.

dayOfTheWeekNumber = now.getDay()
monthNumber        = now.getMonth()

Now we can pull all this together and construct a text string that contains everything.

theDateAsText = days[dayOfTheWeekNumber] + ", " + months[monthNumber] + " " + now.getDate()

The first part, days[dayOfTheWeekNumber], picks the correct day of the week out of the array we made earlier, and the second part, months[monthNumber], does the same for the name of the month.

We join them (with a comma and space, ”, “, between them), and stick the day of the month at the end with now.getDate().

And then the last line of our function returns that text string.

return theDateAsText

When you call the function and print it out, like this …

print todaysDate()

… you’ll see today’s date appear in the Console.

Using the function in the Text Layer

We can now use todaysDate() to set our Text Layer’s text.

today = new TextLayer
    text: todaysDate()
    fontSize: 13.5
    color: "#929292"
    parent: $.Header_For_You
    x: $.Today_s_date.x
    y: $.Today_s_date.y - 3.5
    textTransform: "uppercase"

I made two more changes: The correct text color is actually ”#929292”, and with this textTransform, all the text will change to ”uppercase”.

Everything looks okay, so we can hide the original Sketch layer by setting its visible to no:

$.Today_s_date.visible = no

I prefer to put my functions at the beginning of a project. So in the project I made a “Functions” fold that’s at the top.