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.
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
”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
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
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 = ->
-> 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 = 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).
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
6. You might think the first day of the week would be Monday (or Saturday)… but in this case, the
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
First, we get the numbers for the current day of the week and month and save them in
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
And then the last line of our function
returns that text string.
When you call the function and
… you’ll see today’s date appear in the Console.
We can now use
todaysDate() to set our Text Layer’s
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"
Everything looks okay, so we can hide the original Sketch layer by setting its
$.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.