What You Will Need

To create your widget, you'll need an iPad or iPhone, ideally with a keyboard. However, if your only task is to copy the code from this article, a keyboard is not essential. First, download the Scriptable app from the App Store. I have no affiliations with the developer.

What Should the Widget Do?

The high-level goal is for the script to take a list of dates and calculate the number of days remaining until each of those dates. Each date should have a title indicating its significance.

The Strategy

1. Read an array of events, each consisting of a date and its corresponding title.
2. Create a widget.
3. For each event, compute the number of days until it occurs and display the title.
4. Use the absolute value to handle past dates appropriately, relying on the title for context.
5. Add the results to the widget.

Creating the Code

To begin, install and open the Scriptable app. Create a new script and assign it a name of your choice; I opted for "Date Countdown." You will need to remember this name when you set up the widget.

Here's a video to help you get started with creating the script:

Now, copy and paste the code block below right after watching the video:

// Based on sample script, Apple Event Countdown

// W Murphy 18-10-23

//

// Define the dates you want to track in this array.

// Each record includes a date and a title.

const theDates = [

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

{ aDate: "Jul 20, 1969 0:00:00", title: " days since the 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 in 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 handles most of the work.

function createWidget(listOfDates) {

let widget = new ListWidget()

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

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

addTextToThis(widget,

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

}

// Create a gradient background for the widget.

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 the specified date.

// Uses absolute value, with the title clarifying whether the date is 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

To add your widget to the home screen, long press on the desktop. Tap the plus sign located in the upper left corner, find Scriptable, and select the larger widget option.

The Scriptable widget will not automatically know which script to execute, so long press on it to configure it. Scroll down to select your widget script.

After you’ve chosen the correct script, set it to run whenever the widget is tapped.

Upon returning to your home screen, your widget should display something like this:

And that's it! Enjoy your personalized countdown widget on your iPad or iPhone!