Customizable iOS Calendar widget in Scriptable

scriptable-calendar-widget.md

Scriptable Calendar Widget

For ease of maintainability this project has moved from this gist to its own repository. You can go and visit it there.

@DanMumford, should be something like this: swap the order in which the title and the time are added, and add some spacing to the left of the date/time row. Unfortunately the fonts are not monospaced so the time won't align perfectly with the event name, but it should be very close.

// src/formatEvent.ts
function formatEvent(
  stack,
  event,
  { eventDateTimeOpacity, textColor, showCalendarBullet, showCompleteTitle }
) {
-  const eventLine = stack.addStack();
-
-  if (showCalendarBullet) {
-    // show calendar bullet in front of event name
-    addWidgetTextLine("‚óè ", eventLine, {
-      textColor: event.calendar.color.hex,
-      font: Font.mediumSystemFont(14),
-      lineLimit: showCompleteTitle ? 0 : 1,
-    });
-  }
-
-  // event title
-  addWidgetTextLine(event.title, eventLine, {
-    textColor,
-    font: Font.mediumSystemFont(14),
-    lineLimit: showCompleteTitle ? 0 : 1,
-  });
  let time;
  if (event.isAllDay) {
    time = "All Day";
  } else {
    time = `${formatTime_default(event.startDate)} - ${formatTime_default(
      event.endDate
    )}`;
  }
  const today = new Date().getDate();
  const eventDate = event.startDate.getDate();
  if (eventDate !== today) {
    time = `${eventDate}${getSuffix_default(eventDate)} ${time}`;
  }
+  time = `    ${time}`;
  addWidgetTextLine_default(time, stack, {
    textColor,
    opacity: eventDateTimeOpacity,
    font: Font.regularSystemFont(14),
  });
+  const eventLine = stack.addStack();
+
+  if (showCalendarBullet) {
+    // show calendar bullet in front of event name
+    addWidgetTextLine("‚óè ", eventLine, {
+      textColor: event.calendar.color.hex,
+      font: Font.mediumSystemFont(14),
+      lineLimit: showCompleteTitle ? 0 : 1,
+    });
+  }
+
+  // event title
+  addWidgetTextLine(event.title, eventLine, {
+    textColor,
+    font: Font.mediumSystemFont(14),
+    lineLimit: showCompleteTitle ? 0 : 1,
+  });
}
var formatEvent_default = formatEvent;

// src/buildEventsView.ts

hi, me again :)
Is it possible to change the active "all day" event view to "Start Date - End Date - All Day"?

@em161, I was having the same issue, managed to fix it by changing this from 2021-02-0 to 2021-06-0.

Is there a way to change the icon before the event if you have it marked tentative?