rudotriton / scriptable-calendar-widget

Customizable iOS Calendar widget for https://scriptable.app/

As of October 2023 this project is now archived. However, there is a continuation with even more amazing features over at ReinforceZwei/scriptable-calendar-widget.

---

• Setting Up
• Customization
• Small Widgets
• Large Widgets
• Development

Setting Up

• Copy the script in calendar.js to a new script in Scriptable app.
• Run the script first which should prompt Scriptable to ask for calendar access.
  • If it didn't and you haven't given Scriptable calendar access before, try changing the debug setting to true and trying again.
  • To have the widget open the iOS calendar app, switch debug back to false afterwards.
• Add a medium sized Scriptable widget to your homescreen.
• Long press the widget and choose "Edit Widget".
• Set the Script to be the script you just created and When Interacting to Run Script which will then launch Calendar app when you tap on the widget.
• Return to your home screen which should now hopefully show the Scriptable calendar widget.

Customization

• debug - set to true to show the widget in Scriptable, false to open a calendar app.
• calendarApp - Tapping on the widget launches a calendar app (as long as debug: false), by default it launches the iOS Calendar app, however it can be changed to anything as long as the app supports callback URLs. Changing the calshow to something else would open other apps. E.g. for Google Calendar it is googlecalendar, for Fantastical it is x-fantastical3.
• backgroundImage - Image path to use as the widget background, which is taken either from the widget parameters, from the params variable at the top, or just replace params.bg with the image path. To get an image that can then be used to have a "transparent" widget background use this script and save it to the Scriptable folder on iCloud. Then set either the widget parameter (long press on the widget -> edit widget -> parameter) to { "bg": "my-image.jpg"} where my-image is the name of your transparent background OR change the line which has { bg: "1121.jpg" } to include your image name.
• calFilter - Optionally an array of calendars to show, shows all calendars if empty. Can be supplied as a widget parameter to only affect that particular widget.
• widgetBackgroundColor - In case of no background image, what color to use.
• todayTextColor - color of today's date
• markToday - show a circle around today or not
• todayCircleColor - if we mark days, then in what color
• showEventCircles - adds colored background for all days that have an event. The color intensity is based roughly on how many events take place that day.
• discountAllDayEvents - if true, all-day events don't count towards eventCircle intensity value
• eventCircleColor - if showing event circles, then in what color
• weekdayTextColor - color of weekdays
• weekendLetters - color of the letters in the top row
• weekendLettersOpacity - a value between 0 and 1 to dim the color of the letters
• weekendDates - color of the weekend days
• locale - a Unicode locale identifier string, this would change the weekday letters to the specified language.
• textColor - color of all the other text
• eventDateTimeOpacity - opacity value for event times
• widgetType - for small widgets it determines which side to show. This would be set through widget parameters in order to set it per widget basis, rather than setting here and having all small widgets be the same type. (check: Small widgets)
• 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.
• startWeekOnSunday - would start the week either on a Sunday or a Monday.
• showEventsOnlyForToday - would either limit the events to today or a specified number of future days with nextNumOfDays
• nextNumOfDays - if showEventsOnlyForToday is set to false, this allows specifying how far into the future to look for events. There is probably a limit by iOS on how far into the future it can look.
• showCompleteTitle - would truncate long event titles so that they can fit onto a single line to fit more events into the view.
• showPrevMonth - would show days from the previous month if they fit into the calendar view.
• showNextMonth - would show days from the next month if they fit into the calendar view.
• individualDateTargets - would allow tapping on a date to open that specific day in the calendar set by the calendarApp setting. (atm, supports default iOS calendar and Fantastical callback urls, should be possible to add more).
• flipped - the layout for the medium-sized widget can be either the default, events - calendar, or a flipped, calendar - events layout. This setting can also be given as a widget parameter (something like: { "flipped": true }) to just affect that particular widget.

Small Widgets

The script also supports small widgets in which case the widget parameter (long press on the widget -> edit widget -> parameter) should be set to something like:

• { "bg": "top-left.jpg", "view": "events" }
• { "bg": "top-right.jpg", "view": "cal" }

Where "events" specifies the events view and "cal" the calendar view. (Setting the background is not necessary).

Large Widgets

The script should detect on its own that it is running in a large widget and will adjust accordingly.

Development

• npm install - install dev dependencies
• npm run dev - this watches for file changes, bundles them, fixes syntax and copies the output file to iCloud. This workflow is not tested on any other system but mine which is a macOS, so it is very likely to break on anything else.

scriptable-calendar-widget's Issues

Switch left and right side?

Is there a way in the medium-sized widget to make the calendar appear on the left and the events appear on the right?

Localization

You mind add locale code to be localization for another languages as well as calendars?!

I want to widen the gap between calender and event.

I want to widen the gap between calender and event. Please tell me which part to modify and the number to enter. There are two types of users: iPhone 12 mini and 12promax. I like your calendar because the color is pretty and the size is very constant.

Show date above Event List

Is it possible to show the current date above the list of events? i.e:

SAT 05 DEC

Event Title 1
21:00 - 22:00

active allday events with highlight color

Hi,
how can i change it to highlight the allday events if the starting date is not today?
if i make a event from today about 6 days long, it only show today in highlight event color with this code
one day later the color is gone

• const isEventToday = new Date().getDate() === event.startDate.getDate();
  // event title
  addWidgetTextLine(eventLine, event.title, {

• color,

• color: isEventToday ? "#ffff00" : color,
  font: Font.mediumSystemFont(14),

Open Fantastical instead of native Calendar app

Would it be possible to modify the codebase (or the readme) to offer/instruct a user how to have the widget open Fantastical instead of the native Calendar app?

Empty Dates

Hi,

I have been using your script for a while and it’s great!
I’m trying to edit the script so that the previous month dates show instead of empty days at the start of the month (when the 1st of month isn’t on a Sunday).

I have used var date = new Date(); date.setDate(0); to get the last day of the previous month but I’m stuck on how to apply this to the ‘buildMonthVertical’ function - any advice would be appreciated!

Thanks!

Events of the next 7 days as an alternative option

Actually the widget only has the option to show the events in this week.
At a sunday I would like to see the upcoming events of the next week.
So I changed thisWeek with between.

Font Size

Hey, first thanks for the great widget!
Talking about the event view, do you know an option to make the text font bold or to increase the font size?

Date and day is off instead of the 17 on Wednesday it show the 17 on Tuesday and so on and on. How can I fix this? thank you

Cannot disable all-day events

I set showAllDayEvents to false, but I’m still seeing all-day events in the widget.

Feature suggestion for calender widget

Hey,

it would be great, If calendar widget will be configurable in this way:

I'm looking for an solution who only display all upcoming events as a list.
Unfortunately, the Agenda+ app has been removed from the App Store.

Thank you
Thomas

Can’t hide all-day events in calendar

Hi, how can I prevent the calendar from highlighting days with all-day events? Alternatively, can I select which calendars to show/hide?

Error: iCloud is not supported

I received a message trying to implement this script stating: "Error on line 503:34: iCloud is not supported. Make sure that you are logged into iCloud in the device settings". However, I am logged into my iCloud account and have logged out and back in, and turned it off and on for Scriptables; but the same error persisted.

Wishings for a large widget

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.

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

showCompleteTitle doesn’t work

The variable showCompleteTitle doesn’t seem to work; event titles will still be truncated whether it’s set to true or false. To see the full event title, is there a way to increase the line limit? Would that fix this issue?

Date and day not aligned

I’m having an issue where the date and day aren’t being aligned. For instance, today is January 13, which is a Thursday. But on the widget it says that it is January 13, Wednesday. I saw that someone else had the same issue in the “closed” issues section but it was not resolved.
I’m using the latest version of the code and I’ve tried on multiple devices, so I’m not sure what’s going on.
If you could help out, that would be great! Thank you!