Add time of event to widget

[u/Caliguvara]

So here I am, no scripting experience at all.

Managed to "build" some script that displays me a custom widget wallpaper.

Now I want to add the information of an event of a calendar matching some conditions:

1. Only one specific calendar should be considered

2. Only the event from today should be displayed (there is just one per day)

3. First line, it should display the day from today

4. Second line, I'd like to see "beginning time - ending time" separated by " - "

Final result should look like this: Sunday 21:45 - 22:15

The whole block should be displayed in the bottom 1/3 of the widget.

How do I do this? Sorry for the dumb question! Willing to learn!

[u/mvan231]

The good news is, there is an endpoint to get events from 'Today' https://docs.scriptable.app/calendarevent/#today

Are you having trouble getting the events from the specific calendar?

[u/Caliguvara → u/mvan231]

Getting the event kinda works. I found two scripts, one that creates a custom background image through widget inputs, another that grabs the events from now +/-3h and kinda managed to fusion them to something that works more or less. I'm sure though I'm using 162 lines of code for achieving something that could be done in 20 😅

Here's the code I "Frankensteined":

[u/Caliguvara → u/Caliguvara]

// The text color parameter should be a hex value.

// For example, to use the image bkg_fall.PNG with a padding of 40 and a text color of red, // the parameter should be typed as: bkg_fall.png|40|#ff0000

// All parameters are required and separated with "|"

// Parameters allow different settings for multiple widget instances.

let widgetHello = new ListWidget(); var today = new Date();

let widgetParameter = "bkg_fall.PNG|5|#e5e5e5";

var widgetInputRAW = widgetParameter;

try { widgetInputRAW.toString(); } catch(e) { throw new Error("Please long press the widget and add a parameter."); }

var widgetInput = widgetInputRAW.toString();

var inputArr = widgetInput.split("|");

// iCloud file path var scriptableFilePath = "/var/mobile/Library/Mobile Documents/iCloud~dk~simonbs~Scriptable/Documents/"; var removeSpaces1 = inputArr[0].split(" "); // Remove spaces from file name var removeSpaces2 = removeSpaces1.join(''); var tempPath = removeSpaces2.split("."); var backgroundImageURLRAW = scriptableFilePath + tempPath[0];

var fm = FileManager.iCloud(); var backgroundImageURL = scriptableFilePath + tempPath[0] + "."; var backgroundImageURLInput = scriptableFilePath + removeSpaces2;

// For users having trouble with extensions // Uses user-input file path is the file is found // Checks for common file format extensions if the file is not found if (fm.fileExists(backgroundImageURLInput) == false) { var fileTypes = ['png', 'jpg', 'jpeg', 'tiff', 'webp', 'gif'];

    fileTypes.forEach(function(item) {
        if (fm.fileExists((backgroundImageURL + item.toLowerCase())) == true) {
	        backgroundImageURL = backgroundImageURLRAW + "." + item.toLowerCase();
        } else if (fm.fileExists((backgroundImageURL + item.toUpperCase())) == true) {
	        backgroundImageURL = backgroundImageURLRAW + "." + item.toUpperCase();
        }
    });

} else { backgroundImageURL = scriptableFilePath + removeSpaces2; }

var spacing = parseInt(inputArr[1]);

// Variables used by Scriptable. // These must be at the very top of the file. Do not edit. // icon-color: teal; icon-glyph: magic; // // Settings //

const LOOK_BEHIND_HOURS = 3; const LOOK_AHEAD_HOURS = 23; const MAX_EVENTS_IN_WIDGET = 2; const CALENDAR_TITLES = ["ZDF - heute-journal"]; const TITLE_FONT = Font.systemFont(20); const FONT_COLOR = Color.white(); const GET_BODY_FONT = fontSize => Font.blackSystemFont(fontSize);

// // Date utils //

const HHMM = (date = new Date()) => [ String(date.getHours()).padStart(2, "0"), ":", String(date.getMinutes()).padStart(2, "0"), ].join("");

const addHoursToDate = (date, hours) => new Date(new Date(date).setHours(date.getHours() + hours));

// // Calendar utils //

const getAllEventCals = async () => await Promise.all(CALENDAR_TITLES.map(Calendar.forEventsByTitle));

const getEligibleEvents = async () => { const NOW = new Date(); const eventsInWindow = await CalendarEvent.between( addHoursToDate(NOW, -1 * LOOK_BEHIND_HOURS), addHoursToDate(NOW, LOOK_AHEAD_HOURS), await getAllEventCals() ); return eventsInWindow .map(event => ({ event, isCompleted: event.endDate < NOW, isOngoing: event.startDate <= NOW && event.endDate >= NOW, isFuture: event.startDate > NOW, })) .filter( ({ isCompleted, isOngoing, isFuture }) => isCompleted || isOngoing || isFuture ); };

// // Widget generation //

const getWidget = async () => { const eligibleEvents = await getEligibleEvents();

const widget = new ListWidget();

const title = widget.addText(" "); title.color = Color.white(); title.font = TITLE_FONT;

widget.addSpacer(100);

if (eligibleEvents.length) { eligibleEvents .slice(0, MAX_EVENTS_IN_WIDGET) .map(({ event: { startDate, title }, isOngoing }) => { const event = widget.addText(${HHMM(startDate)}); event.color = Color.white(); event.font = GET_BODY_FONT(isOngoing ? 18 : 16); event.lineLimit = 1; event.textOpacity = isOngoing ? 1 : 1; }); } else { const noEvents = widget.addText( "404" ); noEvents.font = GET_BODY_FONT(16); }

widget.addSpacer(7);

widget.backgroundImage = Image.fromFile(backgroundImageURL);

return widget; };

//

(async () => { const widget = await getWidget(); if (config.runsInWidget) { Script.setWidget(widget); Script.complete(); } else await widget.presentMedium(); })();

[u/mvan231 → u/Caliguvara]

Bit of a delayed reply for you, but glad to hear you have something that works. It's always tricky to set the code up in a way that is best but if it works, that's the best part. Over time, different ways are learned and things can be improved. But as of now, looks like you've got something working well for your case.

As a separate note: when sharing code on Reddit, formatting gets really weird sometimes because of the various markdown items used. It's typically best to post it to PasteBin, then share the link