Create a Countdown Widget for Free for Your iPad or iPhone in 10 Minutes

It’s easy to do with the free JavaScript app, Scriptable. Just copy the JavaScript from this article. No coding skills required.

Ever been caught out when an event has sneaked up on you? Your birthday is tomorrow? What? Of course, I’ve booked a restaurant. (Who doesn’t love McDonald’s?)

I know that’s what we have diaries for, and calendar apps for, and even alarms warning about calendar events. But you have to remember to keep checking the calendar and have the discipline to not ignore warning alarms.

A widget on your home screen that warns you about how many days you have left until the event is a good way forward. It’s just sitting there staring at you when you unlock your iPhone or iPad.

Now you can buy apps with widgets to do just that, but it’s a simple script to write, especially in JavaScript. Of course, Apple uses Shortcuts for scripting, not JavaScript. Luckily, there’s a free app that fills that gap: Scriptable.

So here’s what you need to do. Download the app, copy the JavaScript in this article, and paste it into the app.

You can then install your very own count down widget on your Home Screen. Let’s get to it.

What you’ll need

You’ll need an iPad or an iPhone, preferably with a keyboard. If all you’re going to do is copy my code, then you probably don’t even need a keyboard.

Then download this free app from the App Store. I have no connection with the developer.

What should it do? (the spec)

The 50,000-foot view is that the script reads in a list of dates and works out how many days will elapse before that date. Then it puts the results into the widget on the home screen.

We should also associate a title with each date to say what its significance is. Enough with requirements capture.

The strategy

* Read in an array of event records, each consisting of a date and a title.

* Create a widget.

* From each event, calculate the number of days until the event and add the title.

* Use the absolute value, to avoid issues with dates in the past. Rely on the title to make sense of that.

* Add the result to the widget.

Creating the code

Install and run the Scriptable app. Create a new script and give it a name you like. I called mine, “Date Countdown.” You’ll need to know the name when you’re installing the widget.

Copy and paste the code block below, just after the video showing how to create the script. So much easier than documenting an Apple Shortcuts!

Here’s a video of how to do it:

Here’s the code to copy.

//

// Based on sample script, Apple Event Countdown

// W Murphy 18-10-23

//

// The dates you want to track are in this array.

// Each array record holds the date and a title for the date.

const theDates = [

{ aDate: "Dec 25, 2023 0:00:00", title: " days until Xmas"},

{ aDate: "Jul 20, 1969 0:00:00", title: " days since moon landing"},

{ aDate: "Oct 23, 2023 0:00:00", title: " days until my birthday" },

{ aDate: "Jan 1, 2024 0:00:00", title: " days left in this year" }

]

// Sort the dates into ascending order

theDates.sort((a, b) => new Date(a.aDate) - new Date(b.aDate));

// Launch the widget

if (config.runsInWidget) {

let widget = createWidget(theDates)

Script.setWidget(widget)

Script.complete()

}

// function to create widget: this does most of the work.

function createWidget(listOfDates) {

let widget = new ListWidget()

// Loop through the array of date records and put them in the widget.

for(let i = 0; i < listOfDates.length; i++) {

addTextToThis(widget,

theDaysUntil(listOfDates[i].aDate).toLocaleString("en-US") + listOfDates[i].title)

}

//make a gradient for the widget background.

let startColor = new Color("#3050cc")

let endColor = new Color("#050530")

let gradient = new LinearGradient()

gradient.colors = [startColor, endColor]

gradient.locations = [0.0, 1]

widget.backgroundGradient = gradient

widget.backgroundColor = new Color("#ff5401")

return widget

}

// helper function to calculate days until date.

// Uses absolute value, and the title indicates whether it's in the past.'

function theDaysUntil(aDate) {

var countDownDate = new Date(aDate).getTime();

var now = new Date().getTime();

var distance = countDownDate - now;

var days = Math.ceil(distance / (1000 * 60 * 60 * 24));

return Math.abs(days)

}

// Format the message for the date

function addTextToThis(widget, line1) {

let title = widget.addText(line1)

title.font = Font.semiboldSystemFont(20);

title.centerAlignText()

title.textColor = Color.white()

}

Using the widget

- Long press on the desktop.

- Tap on the plus sign in the top left-hand corner.

- Find scriptable and choose the wider widget.

The Scriptable widget doesn’t know which script to run, so long tap on it to configure it. Scroll down and find your widget script.

Once you’ve selected the correct script, configure it to run any time the widget is tapped.

When you return to your Home Screen, you should see something like this.

Enjoy!