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.

Alright, I’m still confused. What line of the script exactly do I update with the image I want as the background. I’ve tried everything and nothing has been working! Please help

@katemliz, this is the line.

You can either replace it with something like: backgroundImage: params.bg ? params.bg : "my-image.jpg", where the image is located in your iCloud's Scriptable folder.

Or alternatively you can change the widget setting's (long press on the widget to get there) parameter field to look something like {"bg":"my-image.jpg"}

awesome! thank you so much for the help :)

On Wed, May 19, 2021 at 12:07 PM Raigo Jerva ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ @katemliz <https://github.com/katemliz>, this <https://github.com/rudotriton/scriptable-calendar-widget/blob/968d1b3293ce1e489f1ceb5cea48331ad704e87f/calendar.js#L6> is the line. You can either replace it with something like: backgroundImage: params.bg ? params.bg : "my-image.jpg", where the image is located in your iCloud's Scriptable folder. Or alternatively you can change the widget setting's (*long press on the widget to get there*) parameter field to look something like {"bg":"my-image.jpg"} — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/b51d227c3d1d9cb497829ae45583224f#gistcomment-3749019>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUEM7T4SBLOQWDPN4FBU6KDTOPO37ANCNFSM4R7SMXJA> .

-- Katelyn Lisznyai

would you be willing to help me trouble shoot a transparent background on a different script?

On Wed, May 19, 2021 at 12:07 PM Raigo Jerva ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ @katemliz <https://github.com/katemliz>, this <https://github.com/rudotriton/scriptable-calendar-widget/blob/968d1b3293ce1e489f1ceb5cea48331ad704e87f/calendar.js#L6> is the line. You can either replace it with something like: backgroundImage: params.bg ? params.bg : "my-image.jpg", where the image is located in your iCloud's Scriptable folder. Or alternatively you can change the widget setting's (*long press on the widget to get there*) parameter field to look something like {"bg":"my-image.jpg"} — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/b51d227c3d1d9cb497829ae45583224f#gistcomment-3749019>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUEM7T4SBLOQWDPN4FBU6KDTOPO37ANCNFSM4R7SMXJA> .

-- Katelyn Lisznyai

Thanks for the script! I'm trying to set it up but the dates and the weekend highlighting are off by one day.
This is with startWeekOnSunday set to false:

And this is with startWeekOnSunday set to true:

Hi again @rudotriton, just wondering, is it possible to move the date/time of events to be above the event name? And also so it's inline with the event, but not the bullet point? Thanks, Dan!

@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?