Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Customizable iOS Calendar widget in Scriptable

Scriptable Calendar Widget

scriptable calendar

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

@elllebsack
Copy link

elllebsack commented Sep 30, 2020

Where do I insert the name of my image into the code to make it invisible?

@solelo
Copy link

solelo commented Oct 6, 2020

Hi is it possible to split this code and just show the events instead of both the calendar and the event?

@rudotriton
Copy link
Author

rudotriton commented Oct 6, 2020

Hi is it possible to split this code and just show the events instead of both the calendar and the event?

I have added the section small widgets to the instructions and updated the script to support that

@solelo
Copy link

solelo commented Oct 6, 2020

Awesome thanks!

Copy link

ghost commented Oct 8, 2020

Hi, is it possible to add a bullet symbol before each event item, which can be set as a different color to the event name? For example, • Event Title

@rudotriton
Copy link
Author

rudotriton commented Oct 9, 2020

@evansr67 do you expect the bullet to match the color of the calendar from which the event originates, or would the bullet be the same color for all events and you could specify the color yourself?

Copy link

ghost commented Oct 9, 2020

@evansr67 do you expect the bullet to match the color of the calendar from which the event originates, or would the bullet be the same color for all events and you could specify the color yourself?

Yes I was looking for it to be the same color of the calendar

@deta362
Copy link

deta362 commented Oct 9, 2020

Can this code be used to also show all day events?

@rudotriton
Copy link
Author

rudotriton commented Oct 9, 2020

@evansr67 and @deta362

I have added two options to the top of the script:

  • showAllDayEvents - would either show or hide all day events.
  • showCalendarBullet - would show a ● in front of the event name which matches the calendar color from which the event originates.

scriptable calendar

@kmo425
Copy link

kmo425 commented Oct 9, 2020

This is great! Is there a way to get all day events to say "ALL DAY" instead of showing 12AM to 1159PM?

@rudotriton
Copy link
Author

rudotriton commented Oct 9, 2020

@kmo425 Yup, it's there now. It has "All Day", but if you really want you can change it to all caps.

@kmo425
Copy link

kmo425 commented Oct 9, 2020

Thank you!

Copy link

ghost commented Oct 9, 2020

Great, thanks!

@surracha1
Copy link

surracha1 commented Oct 12, 2020

Is there a way to have the small calendar widget start on Sunday rather than Monday?

@rudotriton
Copy link
Author

rudotriton commented Oct 12, 2020

hey @surracha1, I've updated the code and it should be able to do it now. Just change the variable startWeekOnSunday at the top to true.

scriptable calendar

@surracha1
Copy link

surracha1 commented Oct 12, 2020

hey @surracha1, I've updated the code and it should be able to do it now. Just change the variable startWeekOnSunday at the top to true.

scriptable calendar

Perfect, thanks so much!

@Wdavery
Copy link

Wdavery commented Oct 13, 2020

I’m having trouble with the current day hex color not affecting the widget.
Edit: looks like line 263 is using a new colour instead of the user defined

@rudotriton
Copy link
Author

rudotriton commented Oct 13, 2020

@Wdavery, Sorry, I may have copied a wrong thing there, fixed now

Looking at the revisions it may have been there for a long time, so surprising it didn't come up sooner 😯. My own script didn't have this bug, so I may have forgotten to fix it here.

@Wdavery
Copy link

Wdavery commented Oct 13, 2020

Sweet! Thanks for your work!

@Wdavery
Copy link

Wdavery commented Oct 13, 2020

Hope you don't mind, I submitted this to Awesome Scriptable!

@rudotriton
Copy link
Author

rudotriton commented Oct 13, 2020

@Wdavery, I don't mind, and thanks

@boostedgti916
Copy link

boostedgti916 commented Oct 14, 2020

Awesome widget! Is there a way to show events for the whole week? Also can we set it so it will open google calendar?

@rudotriton
Copy link
Author

rudotriton commented Oct 14, 2020

@boostedgti916 How comfortable are you with adding it to your code yourself?

You can change what events to fetch in async function buildEventsView(stack). There is also .between which takes any two dates so you can specify the date range. The documentation is here.

- const events = await CalendarEvent.today([]);
+ const events = await CalendarEvent.thisWeek([]);

Also you'd possibly want to add something like this to the function formatEvent(stack, event, color, opacity) to show the date in front of the time, as otherwise you may not know when in the future the event is.

...
    time = `${formatTime(event.startDate)} - ${formatTime(event.endDate)}`;
  }

+  const today = new Date().getDate();
+  const eventDate = new Date(event.startDate).getDate();
+  // if a future event is not today, we want to show it's date
+  if (today !== eventDate) {
+    time = `${eventDate}: ${time}`;
+  }

  addWidgetTextLine(stack, time, {
    color,
...

This would get you this:

scriptable calendar

The above code would work with .thisWeek but if you use .between and get events that are months in the future then you wouldn't know if 16 means October or November.

Also, if you change calshow to googlecalendar it will open that one instead.

- const callback = new CallbackURL("calshow:" + timestamp);
+ const callback = new CallbackURL("googlecalendar:" + timestamp);

@boostedgti916
Copy link

boostedgti916 commented Oct 14, 2020

Wow awesome thank you!! I was able to add .thisWeek and it worked perfect but I can not get the + const callback = new CallbackURL("googlecalendar:" + timestamp); to work it just opens the scriptable app now.

Also thisweek shows even past events any way I can do ."thisweek" for current and future events?

@rudotriton
Copy link
Author

rudotriton commented Oct 15, 2020

@boostedgti, it would open the scriptable app when you either have debug = true at the top of the script or the widget interaction is set to open the script instead to run it.

I have updated the original script now to fix showing past events. I'm pretty sure the past events you were seeing were always all day events which the original script didn't have to think about, because with today() any all day event would only ever be today. So you should be able to just copy the whole thing and just flip the showEventsForWholeWeek flag to true and change calshow to googlecalendar.

@boostedgti916
Copy link

boostedgti916 commented Oct 15, 2020

Amazing! Everything works as it should thank you so much!

9E09C5F8-EE95-4359-8ABA-2158A5AD42A1

@FIetch
Copy link

FIetch commented Oct 23, 2020

Hi,
i looking a long time for a good calendar Widget like my lovely Widget in Android. Is it possible to change your Widget like this?

Screenshot_20201023-135807

I only need the next 4-6 Dates

@keiichidan
Copy link

keiichidan commented Oct 23, 2020

Hello! Events are removed from the list when their start time passes, how could I change the script so that they stay displayed until their end time passes instead?

@rudotriton
Copy link
Author

rudotriton commented Oct 24, 2020

@FIetch You can certainly tweak this code to be more to your liking, but to make it match your example is out of the scope of this project. You can change the time range from which dates are taken:

- events = await CalendarEvent.thisWeek([]);
+ events = await CalendarEvent.between(
+   new Date(new Date()),
+   new Date(new Date().setDate(new Date().getDate() + 7)),
+   []
+ );

This would include from today to the next 7 days. You can also comment out the calendar view if you don't want it, change const numEvents = futureEvents.length > 3 ? 3 : futureEvents.length; from 3s to 6s to have more events, and if you change how the events are formatted in formatEvent() function then you can fit more than 3 events which would get you pretty close.

@keiichidan, sorry, yeah the the code used the events' startDate, since I wasn't really thinking when I wrote that part. I've changed the original script to use the events' endDate instead, since it makes more sense this way.

@Dimmi-BY
Copy link

Dimmi-BY commented Oct 25, 2020

I get this error message, what do i wrong

Error on line 98: SyntaxError: Unexpected token '{'. Expected ')' to end an 'if' condition.

@rudotriton
Copy link
Author

rudotriton commented Oct 25, 2020

@Dimmy-BY Nothing, sorry, there was a missing ).

@ShadowEnemyx
Copy link

ShadowEnemyx commented Oct 25, 2020

224497FC-AF27-400B-8244-76607004A5EF

:(

@rudotriton
Copy link
Author

rudotriton commented Oct 25, 2020

@ShadowEnemyx You don't want the whole markdown document just what is under Code.

@Dimmi-BY
Copy link

Dimmi-BY commented Oct 26, 2020

@Dimmy-BY Nothing, sorry, there was a missing ).

Thank you, i will try it again.

@FIetch
Copy link

FIetch commented Oct 26, 2020

how can i get the complete date before a calendar entry?

not just
26: 11:00 Test
27: All day Test 2

i want it like this:

26.10.2020 11:00 Test
27.10.2020 All Day Test 2

@rudotriton
Copy link
Author

rudotriton commented Oct 26, 2020

@FIetch The date is formatted in formatEvent() function. If you do the following changes to your code it should format it as you'd want.

    time = `${formatTime(event.startDate)} - ${formatTime(event.endDate)}`;
  }

   const today = new Date().getDate();
- const eventDate = new Date(event.startDate).getDate();

  // if a future event is not today, we want to show it's date
- if (today !== eventDate) {
-   time = `${eventDate}: ${time}`;
+  if (today !== event.startDate.getDate()) {
+    time = `${event.startDate.getDate()}.${
+    event.startDate.getMonth() + 1
+   }.${event.startDate.getFullYear()}: ${time}`;
  }

  // event time
  addWidgetTextLine(stack, time, {

scriptable calendar

@bheliot
Copy link

bheliot commented Oct 27, 2020

Great widget, I love it! In the month view, is it possible to change the color of days that have events?

@FIetch
Copy link

FIetch commented Oct 27, 2020

@rudotriton thnx, working :)

and i have a question for the transparancy. I tried it with the parameter and within ur script, but none work. I still get a black background.
If i go the the photo options in ios settings, i get the options that scriptable is allowed to add photos or none.
is this right? Do i need get scripatable more rights for photos maybe?

@DanMumford
Copy link

DanMumford commented Oct 27, 2020

Nice widget, thanks for sharing it!
Is it possible to get the date ordinals, like 1st, 2nd etc after the day? Thanks

@rudotriton
Copy link
Author

rudotriton commented Oct 27, 2020

@bheliot It's something I want to add, specifically encoding the number of events in the background color for each day. I just need to figure out what's the best approach for this.


@FIetch I assume you successfully managed to create an image of the right size with this script. I guess that the calendar script cannot find the image, which is why it shows the black background. If you open up the Files app on your iPhone and navigate to iCloud Drive -> Scriptable, then you should see all your scripts in there, move the widget-sized image also there. For images you don't see their extension, but the script saves them as .jpgs so even though the image below is 1112, it's full name is 1112.jpg. This is the name that the script looks for. Since it is using iCloud, it shouldn't actually need access to photos, but the script that creates the "transparent" backgrounds does.

icloud


@DanMumford very likely yes. I guess you'd want:

● My Event
28: 10:00 - 11:00

to look like this:

● My Event
28th 10:00 - 11:00

If so, then that's pretty straightforward. If not and I misunderstood, then I'd like you to be a bit more specific.

@DanMumford
Copy link

DanMumford commented Oct 27, 2020

@rudotriton Yes that's what i meant! thanks!

@rudotriton
Copy link
Author

rudotriton commented Oct 27, 2020

@DanMumford alright I've updated the original script and it's there now

@DanMumford
Copy link

DanMumford commented Oct 27, 2020

@rudotriton Brilliant, just updated the script, thanks!
I have a slight issue now though, the full event name is going off the screen instead of going to the next line?

e.g
"Pickup groceries from
the store at 8"

Now looks like "Pickup groceries from the..."

@rudotriton
Copy link
Author

rudotriton commented Oct 27, 2020

@DanMumford That was how it was initially intended to work, but I guess some time ago I deleted something so it started to show full titles again. Now it got "fixed", but I've added a new variable: showCompleteTitle to the top of the script, change this to true and it should work as you'd expect.

@DanMumford
Copy link

DanMumford commented Oct 27, 2020

@rudotriton Great, thanks again!

@solelo
Copy link

solelo commented Oct 27, 2020

This might be far fetched but is there anyway to add reminders to this script?

@rudotriton
Copy link
Author

rudotriton commented Oct 27, 2020

@solelo Unfortunately they don't play nice together, because events and reminders contain slightly different data, so it looks like too much work to have them both interleaved in the same list, but in case you want a widget to just show you a list of your reminders then I can give you a script for that.

scriptable calendar

const debug = false;

const reminders = await Reminder.allIncomplete([]);

if (config.runsInWidget) {
  let widget = await createWidget();
  Script.setWidget(widget);
  Script.complete();
} else if (debug) {
  Script.complete();
  let widget = await createWidget();
  await widget.presentMedium();
} else {
  const callback = new CallbackURL("x-apple-reminderkit:");
  callback.open();
  Script.complete();
}

async function createWidget() {
  let widget = new ListWidget();
  widget.backgroundColor = new Color("#000000");
  setWidgetBackground(widget, "1121.jpg");
  widget.setPadding(16, 16, 16, 16);

  // show at most 9 reminders, if there are less show all
  const numReminders = reminders.length > 9 ? 9 : reminders.length;

  // create a text line for each reminder
  for (let i = 0; i < numReminders; i += 1) {
    formatReminder(widget, reminders[i]);
  }
  return widget;
}

function formatReminder(stack, reminder) {
  let reminderLine = stack.addStack();

  // show list bullet in front of reminder name
  addWidgetTextLine(reminderLine, "● ", {
    color: reminder.calendar.color.hex,
    font: Font.mediumSystemFont(14),
    lineLimit: 0,
  });

  // reminder's text
  addWidgetTextLine(reminderLine, reminder.title, {
    color: "#ffffff",
    font: Font.regularSystemFont(14),
    lineLimit: 0,
  });
}

function addWidgetTextLine(
  widget,
  text,
  {
    color = "#ffffff",
    opacity = 1,
    font = "",
    lineLimit = 0,
  }
) {
  let textLine = widget.addText(text);
  textLine.textColor = new Color(color);
  textLine.lineLimit = lineLimit;
  if (typeof font === "string") {
    textLine.font = new Font(font, textSize);
  } else {
    textLine.font = font;
  }
  textLine.textOpacity = opacity;
}

function getImageUrl(name) {
  let fm = FileManager.iCloud();
  let dir = fm.documentsDirectory();
  return fm.joinPath(dir, `${name}`);
}

function setWidgetBackground(widget, imageName) {
  const imageUrl = getImageUrl(imageName);
  widget.backgroundImage = Image.fromFile(imageUrl);
}

@FIetch
Copy link

FIetch commented Oct 28, 2020

@rudotriton is it possible to highlight todays events?! maybe make it yellow?!

@rudotriton
Copy link
Author

rudotriton commented Oct 28, 2020

@FIetch it is possible yes, in formatEvent() function:

+ const isEventToday = new Date().getDate() === event.startDate.getDate();
  // event title
  addWidgetTextLine(eventLine, event.title, {
- color,
+ color: isEventToday ? "#ffff00" : color,
  font: Font.mediumSystemFont(14),

@DanMumford
Copy link

DanMumford commented Oct 28, 2020

@rudotriton Hey, just another quick thought, if you have it set to show all the week's events, is it possible to have it say something like "This Week" above them? Maybe centred above the events? Thanks! 👍

@rudotriton
Copy link
Author

rudotriton commented Oct 28, 2020

@DanMumford, it is. In the buildEventsView() function which is around line 70, add the following if statement:

  if (showEventsForWholeWeek) {
    addWidgetTextLine(leftStack, "This week", {
      color: textColor,
      font: Font.boldSystemFont(13),
    });
  }

between vertical layout and the spacer:

leftStack.layoutVertically();
+
+ if (showEventsForWholeWeek) {
+   addWidgetTextLine(leftStack, "This week", {
+     color: textColor,
+     font: Font.boldSystemFont(13),
+   });
+ }
+
// center the whole left part of the widget
leftStack.addSpacer();

@solelo
Copy link

solelo commented Oct 29, 2020

Awesome thanks for that script. I'll give it a shot. I figured Calendar and Reminders wouldn't play well.

@FIetch
Copy link

FIetch commented Oct 29, 2020

How can I move the month name down a bit?
And why do I have the green calendar in there? This is not activated in my calendar settings.

image

@rudotriton
Copy link
Author

rudotriton commented Oct 29, 2020

@FIetch The month is off the screen because the left column takes up too much vertical space. You can try and reduce the spacer size that is between the events, leftStack.addSpacer(8); from 8 to something smaller or remove it completely. Or try reducing or removing the spacer that is between the month and the calendar view, rightStack.addSpacer(5);.

The script is not aware of your calendar settings which is why you see all your calendars. You can filter it out by adding the following line, where the calendar-name is the name of the calendar in which that event is. It's probably holidays or something like this.

if (
      (showAllDayEvents &&
        event.isAllDay &&
        event.startDate.getTime() >
          new Date(new Date().setDate(new Date().getDate() - 1))) ||
      (event.endDate.getTime() > date.getTime() &&
        !event.title.startsWith("Canceled:")
+ && event.calendar.title !== "calendar-name"
)
    ) {

@FIetch
Copy link

FIetch commented Oct 29, 2020

if i made this entry only events with time like 11:00 - 12:00 will hide out.
All day events like my Halloween entry are still there.

And something else, how can i edit that all Events hide if the event is over. now all events hide if the start.

@rudotriton
Copy link
Author

rudotriton commented Oct 29, 2020

@FIetch, alright, I should've seen that it only applied to normal events. Change it back and add this line instead which is a few lines above where you made the last change.

+events = events.filter((event) => event.calendar.title !== "calendar-name");
  const futureEvents = [];

The script is updated to already do that, but since you haven't copied those changes in a while then your script is behind on that. Anyway it is that line where you probably have startDate, change it to endDate and it should hide the event after the current time is later than the event's end time:

if (
      (showAllDayEvents &&
        event.isAllDay &&
        event.startDate.getTime() >
          new Date(new Date().setDate(new Date().getDate() - 1))) ||
-      (event.startDate.getTime() > date.getTime() &&
+      (event.endDate.getTime() > date.getTime() &&
        !event.title.startsWith("Canceled:")
)
    ) {

@FIetch
Copy link

FIetch commented Oct 29, 2020

ok, now its working to hide some calendars :)
and yes, seems like that i dont have updated the complete script.
But with this changes it looks good now.

i think i´m on the finish line for my needed changes of your script.
Thank you for your help and patience :)

@rudotriton
Copy link
Author

rudotriton commented Oct 30, 2020

@bheliot The script now shows all the days with events.

scriptable calendar

@bheliot
Copy link

bheliot commented Oct 30, 2020

@bheliot The script now shows all the days with events.

scriptable calendar

Awesome, thanks!

@bheliot
Copy link

bheliot commented Oct 31, 2020

Line 57 is widget.widgetBackgroundColor = new Color(widgetBackgroundColor); if I want a solid color background shouldn't that be widget.backgroundColor = new Color(widgetBackgroundColor); ?

Because I'm using a white background color, I'm also having a little trouble getting the todayColor circle to work, any advice?

One more thing, I'm unable to filter out the holidays calendar even by adding events = events.filter((event) => event.calendar.title !== "holidays"); before
const futureEvents = []; - is there a way of limiting the widget to just one synced calendar? I thought maybe events = events.filter((event) => event.calendar.title === "the name of the calendar I want to see"); before
const futureEvents = []; would work, but I seem to be missing something.

@rudotriton
Copy link
Author

rudotriton commented Oct 31, 2020

@bheliot the line 57 should indeed be widget.backgroundColor. It got replaced in an unfortunate replace-all action when I renamed the background color variable.

The todayColor circle has a varying background color just like any other, so if you have no events today, it won't show anything. For that case I added the todayTextColor so that you can at least color the date. However, you can overwrite it so that no matter how many events you have today it is always a solid background color.

// if the day is today, highlight it
      if (month[i][j] === date.getDate().toString()) {
        const highlightedDate = getDateImage(
          month[i][j],
          todayColor,
          todayTextColor,
-         showEventCircles
-           ? eventCounts[parseInt(month[i][j]) - 1] * intensity
-           : 1
+       1
        );

You are correct about the filtering and you can flip the !== to a === to show just a single calendar. I suspect the issue is that your calendar names are capitalized, but you are maybe checking for a lowercase name? So if your calendar name is Work, but you check for === "work" it doesn't do anything. If changing the case won't fix it, you can toggle the debug variable to true at the top of the script and throw in a console.log(events) before const futureEvents = []; and when you run the script, it logs you all of the calendar events that it fetched, so you can see exactly what the calendar title is. The log will show when you tap on that button there:

scriptable calendar

The log isn't formatted so it may be a bit difficult to parse, but you should find something that resembles the object below. Here the calendar title is Home. Mine are usually capitalized by default, unless it's some other email account name. Or maybe your calendar.title has some unexpected characters in it which your calendar app doesn't show, then this approach gives you the exact title.

{
    "identifier": "A-BUNCH-OF-NUMBERS-AND-LETTERS",
    "title": "My Event",
    "location": null,
    "notes": null,
    "startDate": "2020-10-01T19:30:00.000Z",
    "endDate": "2020-10-01T20:00:00.000Z",
    "isAllDay": false,
    "attendees": null,
    "availability": "busy",
    "timeZone": "Europe",
    "calendar": {
      "identifier": "A-BUNCH-OF-NUMBERS-AND-LETTERS",
      "title": "Home",
      "isSubscribed": false,
      "allowsContentModifications": true,
      "color": {
        "hex": "F9AAB3",
        "red": 0.9764705896377563,
        "green": 0.6666666865348816,
        "blue": 0.7019608020782471,
        "alpha": 1
      }
    }
  }

@bheliot
Copy link

bheliot commented Oct 31, 2020

@rudotriton Thank you so so much for the help! I think I’ve figured it out now.

@DanMumford
Copy link

DanMumford commented Nov 1, 2020

@rudotriton Hey, there seems to be a slight bug with the script now, it's showing the 1st of November as starting on a Monday so everyday is off by 1.

@rudotriton
Copy link
Author

rudotriton commented Nov 1, 2020

@DanMumford, thanks, this fixes it and the script is updated now. They index days from 0 starting with a Sunday, I saw that Monday was a 1 so I wrongly assumed that Sunday would be a 7.

@DanMumford
Copy link

DanMumford commented Nov 1, 2020

@rudotriton Thanks, that fixed it, but now the current day isn't outlined with the circle.

@rudotriton
Copy link
Author

rudotriton commented Nov 1, 2020

@DanMumford, possibly you didn't have any events today. It had a varying background transparency depending on the number of events like any other day. I got rid of it, so it should be back to always being a solid color now. I've realized that it wasn't the best user experience.

@jerrylein
Copy link

jerrylein commented Nov 2, 2020

thanks for the Script.
Is at possible to get the same color on bullet and calendar?

@rudotriton
Copy link
Author

rudotriton commented Nov 2, 2020

@jerrylein possibly yes, depends on what exactly you mean by calendar?

@jerrylein
Copy link

jerrylein commented Nov 2, 2020

can you give me some hints where to adjust it.
thx

  • todayColor should always be red.
  • bullets colors are from original event.
  • circles on calendar should have the same color
    example: I have only Events in green and red.
    IMG_9193

@rudotriton
Copy link
Author

rudotriton commented Nov 2, 2020

@jerrylein The script unfortunately doesn't support multiple circle colors. The intensity of the background color depends on the number of events you have that day, but you can change it so that it is always the brightest:

const dateImage = getDateImage(
          month[i][j],
          eventCircleColor,
          dateTextColor,
-         showEventCircles
-           ? eventCounts[parseInt(month[i][j]) - 1] * intensity
-           : 0
+         1
        );

const eventCircleColor let's you change the circle color. The green bullet in front of your event is #70dd33.

@sleepyhellow
Copy link

sleepyhellow commented Nov 9, 2020

Hello rudotriton,

thanks a lot for this widget. I like it very mutch.

Would it be possible to have a large widget with these options:

  • View events for the next 7 or better 10 days (to see events at the next week).
  • Show the events left and under the month view in 2 columns.
  • Show the day over the event.
  • Seperate the days with a line.
  • Have a grey bar over the days to see them better.

I think at the picture you can see good what I mean.

Kalender (2)

What do you think? Can you make my wish comes true? ;-)

@LTLNEMO
Copy link

LTLNEMO commented Dec 13, 2020

Calendar app isn’t opening when clicking unless I put the url scheme in the options under widget configuration.

@rudotriton
Copy link
Author

rudotriton commented Dec 13, 2020

@LTLNEMO If it opens Scriptable and shows the widget in there, then you have left debug on true. Also, When Interacting under configuration should be Run Script.

@ellllie
Copy link

ellllie commented Dec 17, 2020

thanks for the widget!
how do change the color only for the weekend?

@jigadijac
Copy link

jigadijac commented Dec 26, 2020

2020-12-26 20:26:23: Error on line 416:28: TypeError: null is not an object (evaluating 'event.calendar.color')

I get this error when I copy and run the script.
how do I rectify this?

@rudotriton
Copy link
Author

rudotriton commented Dec 27, 2020

@ellllie I updated the script to enable this. You can color the letters, change their opacity, and change the color of the actual dates.

An example:

scriptable calendar

@DanMumford
Copy link

DanMumford commented Dec 27, 2020

@rudotriton Hey, I've been using this calendar widget for a while now but with an older version of your code, I just copied/updated to the newest version with the colours for weekends as above but it doesn't seem to show the coloured circles for all event days anymore? Is there something I need to change? Thanks!

A5A4829A-2155-43EC-BC50-B2F55CE41570

@rudotriton
Copy link
Author

rudotriton commented Dec 27, 2020

@DanMumford I did just find an issue whereby an all day event that runs into the next month would cause it to break, but I suspect it's not what you're seeing - judging by missing circles. Since the weekend customization change didn't touch any of the code that's responsible for calculating the background intensity, unfortunately I cannot say with certainty what's going wrong here.

You can see all of the differences between the two versions if you put your working code and the new version into something like a diffchecker

You can possibly log and see how many events are counted:

const { eventCounts, intensity } = await countEvents();
+ console.log(eventCounts);
+ console.log(intensity);

Something like this:

scriptable calendar

would then be logged as:

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2,1]
0.3333333333333333

@katemliz
Copy link

katemliz commented May 19, 2021

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

@rudotriton
Copy link
Author

rudotriton commented May 19, 2021

@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"}

@katemliz
Copy link

katemliz commented May 19, 2021

@katemliz
Copy link

katemliz commented May 19, 2021

@em161
Copy link

em161 commented May 22, 2021

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:
IMG_6894
And this is with startWeekOnSunday set to true:
IMG_6893

@DanMumford
Copy link

DanMumford commented Jul 13, 2021

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!

@rudotriton
Copy link
Author

rudotriton commented Jul 13, 2021

@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

@FIetch
Copy link

FIetch commented Jul 29, 2021

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

@AthleticShip5
Copy link

AthleticShip5 commented Sep 18, 2021

@em161, I was having the same issue, managed to fix it by changing this from 2021-02-0 to 2021-06-0.
0BE344B6-C89A-4224-A0D1-77751CCBFD6D

@kmo425
Copy link

kmo425 commented Sep 30, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment