option to open specific dates

README.md

@@ -47,6 +47,7 @@
 - `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).
 
 ## Small Widgets
 

calendar.js

@@ -26,6 +26,7 @@ var settings = {
   showCompleteTitle: false,
   showPrevMonth: true,
   showNextMonth: true,
+  individualDateTargets: false,
 };
 var settings_default = settings;
 
@@ -311,6 +312,36 @@ function isWeekend(index, startWeekOnSunday = false) {
 }
 var isWeekend_default = isWeekend;
 
+// src/createUrl.ts
+function createUrl(day, month, date, settings2) {
+  let url;
+  let year;
+  const currentMonth = date.getMonth();
+  if (currentMonth === 11 && Number(month) === 1) {
+    year = date.getFullYear() + 1;
+  } else if (currentMonth === 0 && Number(month) === 11) {
+    year = date.getFullYear() - 1;
+  } else {
+    year = date.getFullYear();
+  }
+  if (settings2.calendarApp === "calshow") {
+    const appleDate = new Date("2001/01/01");
+    const timestamp =
+      (new Date(`${year}/${Number(month) + 1}/${day}`).getTime() -
+        appleDate.getTime()) /
+      1e3;
+    url = `calshow:${timestamp}`;
+  } else if (settings2.calendarApp === "x-fantastical3") {
+    url = `${settings2.calendarApp}://show/calendar/${year}-${
+      Number(month) + 1
+    }-${day}`;
+  } else {
+    url = "";
+  }
+  return url;
+}
+var createUrl_default = createUrl;
+
 // src/buildCalendarView.ts
 async function buildCalendarView(date, stack, settings2) {
   const rightStack = stack.addStack();
@@ -348,7 +379,11 @@ async function buildCalendarView(date, stack, settings2) {
       const dayStack = weekdayStack.addStack();
       dayStack.size = new Size(spacing, spacing);
       dayStack.centerAlignContent();
-      const day = calendar[i][j].split("/").reverse()[0];
+      const [day, month] = calendar[i][j].split("/").reverse();
+      if (settings2.individualDateTargets) {
+        const callbackUrl = createUrl_default(day, month, date, settings2);
+        if (j > 0) dayStack.url = callbackUrl;
+      }
       if (calendar[i][j] === `${date.getMonth()}/${date.getDate()}`) {
         if (settings2.markToday) {
           const highlightedDate = createDateImage_default(day, {

src/buildCalendar.ts

@@ -12,10 +12,11 @@ export interface CalendarInfo {
 /**
  * Creates an array of arrays, where the inner arrays include the same weekdays
  * along with a weekday identifier in the 0th position
+ * days are in the format of MM/DD, months are 0 indexed
  * [
- *   [ 'M', ' ', '7', '14', '21', '28' ],
- *   [ 'T', '1', '8', '15', '22', '29' ],
- *   [ 'W', '2', '9', '16', '23', '30' ],
+ *   [ 'M', ' ',   '8/7', '8/14', '8/21', '8/28' ],
+ *   [ 'T', '8/1', '8/8', '8/15', '8/22', '8/29' ],
+ *   [ 'W', '8/2', '8/9', '8/16', '8/23', '8/30' ],
  *   ...
  * ]
  *
@@ -53,7 +54,7 @@ function buildCalendar(
   // increment from 0 to 6 until the month has been built
   let dayStackCounter = 0;
 
-  // fill with empty slots up to the firstDay
+  // fill with empty slots or days from the prev month, up to the firstDay
   for (; index < firstDay; index += 1) {
     if (showPrevMonth) {
       calendar[index - offset].push(

src/buildCalendarView.ts

@@ -4,6 +4,7 @@ import countEvents from "./countEvents";
 import createDateImage from "./createDateImage";
 import isDateFromBoundingMonth from "./isDateFromBoundingMonth";
 import isWeekend from "./isWeekend";
+import createUrl from "./createUrl";
 import { Settings } from "./settings";
 
 /**
@@ -60,7 +61,12 @@ async function buildCalendarView(
 
       // splitting "month/day" or "D"
       // a day marker won't split so if we reverse and take first we get correct
-      const day = calendar[i][j].split("/").reverse()[0];
+      const [day, month] = calendar[i][j].split("/").reverse();
+      // add callbacks to each date
+      if (settings.individualDateTargets) {
+        const callbackUrl = createUrl(day, month, date, settings);
+        if (j > 0) dayStack.url = callbackUrl;
+      }
       // if the day is today, highlight it
       if (calendar[i][j] === `${date.getMonth()}/${date.getDate()}`) {
         if (settings.markToday) {

src/createDateImage.ts

@@ -1,7 +1,6 @@
 /**
- * Creates the image for a date, which if set, also draws the circular
- * background indicating events, for bounding months there are drawn
- * smaller
+ * Creates the image for a date, if set, also draws the circular background
+ * indicating events, for bounding months these are drawn smaller
  */
 function createDateImage(
   text: string,

src/createUrl.ts

@@ -0,0 +1,47 @@
+import { Settings } from "settings";
+
+/**
+ * Create a callback url to open a calendar app on that day
+ *
+ * @name createUrl
+ * @function
+ * @param {string} day
+ * @param {Date} date
+ * @param {Settings} settings
+ */
+function createUrl(
+  day: string,
+  month: string,
+  date: Date,
+  settings: Settings
+): string {
+  let url: string;
+  let year: number;
+
+  const currentMonth = date.getMonth();
+  if (currentMonth === 11 && Number(month) === 1) {
+    year = date.getFullYear() + 1;
+  } else if (currentMonth === 0 && Number(month) === 11) {
+    year = date.getFullYear() - 1;
+  } else {
+    year = date.getFullYear();
+  }
+
+  if (settings.calendarApp === "calshow") {
+    const appleDate = new Date("2001/01/01");
+    const timestamp =
+      (new Date(`${year}/${Number(month) + 1}/${day}`).getTime() -
+        appleDate.getTime()) /
+      1000;
+    url = `calshow:${timestamp}`;
+  } else if (settings.calendarApp === "x-fantastical3") {
+    url = `${settings.calendarApp}://show/calendar/${year}-${
+      Number(month) + 1
+    }-${day}`;
+  } else {
+    url = "";
+  }
+  return url;
+}
+
+export default createUrl;

src/settings.ts

@@ -5,8 +5,9 @@ const settings: Settings = {
   // set to true to initially give Scriptable calendar access
   // set to false to open Calendar when script is run - when tapping on the widget
   debug: false,
-  // what app to open when the script is run in a widget, calshow is the ios
-  // calendar app
+  // what app to open when the script is run in a widget,
+  //   "calshow" is the ios calendar app
+  //   "x-fantastical3" for fantastical
   calendarApp: "calshow",
   // a separate image can be specified per widget in widget params:
   // Long press on widget -> Edit Widget -> Parameter
@@ -55,6 +56,8 @@ const settings: Settings = {
   showPrevMonth: true,
   // shows the last days of the previous month if they fit
   showNextMonth: true,
+  // tapping on a date opens that specific one
+  individualDateTargets: false,
 };
 
 export interface Settings {
@@ -83,6 +86,7 @@ export interface Settings {
   showCompleteTitle: boolean;
   showPrevMonth: boolean;
   showNextMonth: boolean;
+  individualDateTargets: boolean;
 }
 
 export default settings;