feat: add calendar app

apps.json

@@ -1514,5 +1514,26 @@
     "data": [
       {"name": "ballmaze.json"}
     ]
+  },
+  {
+    "id": "calendar",
+    "name": "Calendar",
+    "icon": "calendar.png",
+    "version": "0.01",
+    "description": "Simple calendar",
+    "tags": "calendar",
+    "readme": "README.md",
+    "allow_emulator": true,
+    "storage": [
+      {
+        "name": "calendar.app.js",
+        "url": "calendar.js"
+      },
+      {
+        "name": "calendar.img",
+        "url": "calendar-icon.js",
+        "evaluate": true
+      }
+    ]
   }
 ]

apps/calendar/ChangeLog

@@ -0,0 +1 @@
+0.01: Basic calendar

apps/calendar/README.md

@@ -0,0 +1,8 @@
+# Calendar
+
+Basic calendar
+
+## Usage
+
+- Use `BTN4` (left screen tap) to go to the previous month
+- Use `BTN5` (right screen tap) to go to the next month

apps/calendar/calendar-icon.js

@@ -0,0 +1,5 @@
+require("heatshrink").decompress(
+  atob(
+    "mEwxH+AH4A/ADuIUCARRDhgePCKIv13YAEDoYJFAA4RJFyQvcGBYRGy4dDy4uLCJgv/DoOBDgOBF5oRLF6IeBDgIvNCJYvQDwQuNCJovRADov/F9OsAEgv/F/4vhwIACAqYv/F/4vnd94vvX/4v/F/7vvF96//F/4v/d94v/F/4wsFxQwjFxgA/AH4A/AH4AZA=="
+  )
+)

apps/calendar/calendar.js

@@ -0,0 +1,160 @@
+const maxX = 240;
+const maxY = 240;
+const rowN = 7;
+const colN = 7;
+const headerH = maxY / 7;
+const rowH = (maxY - headerH) / rowN;
+const colW = maxX / colN;
+const color1 = "#035AA6";
+const color2 = "#4192D9";
+const color3 = "#026873";
+const color4 = "#038C8C";
+const color5 = "#03A696";
+const black = "#000000";
+const white = "#ffffff";
+const gray1 = "#444444";
+const gray2 = "#888888";
+const gray3 = "#bbbbbb";
+const red = "#d41706";
+
+function drawCalendar(date) {
+  g.setBgColor(color4);
+  g.clearRect(0, 0, maxX, maxY);
+  g.setBgColor(color1);
+  g.clearRect(0, 0, maxX, headerH);
+  g.setBgColor(color2);
+  g.clearRect(0, headerH, maxX, headerH + rowH);
+  g.setBgColor(color3);
+  g.clearRect(colW * 5, headerH + rowH, maxX, maxY);
+  for (let y = headerH; y < maxY; y += rowH) {
+    g.drawLine(0, y, maxX, y);
+  }
+  for (let x = 0; x < maxX; x += colW) {
+    g.drawLine(x, headerH, x, maxY);
+  }
+
+  const month = date.getMonth();
+  const year = date.getFullYear();
+  const monthMap = {
+    0: "January",
+    1: "February",
+    2: "March",
+    3: "April",
+    4: "May",
+    5: "June",
+    6: "July",
+    7: "August",
+    8: "September",
+    9: "October",
+    10: "November",
+    11: "December"
+  };
+  g.setFontAlign(0, 0);
+  g.setFont("6x8", 2);
+  g.setColor(white);
+  g.drawString(`${monthMap[month]} ${year}`, maxX / 2, headerH / 2);
+  g.drawPoly([10, headerH / 2, 20, 10, 20, headerH - 10], true);
+  g.drawPoly(
+    [maxX - 10, headerH / 2, maxX - 20, 10, maxX - 20, headerH - 10],
+    true
+  );
+
+  g.setFont("6x8", 2);
+  const dowLbls = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+  dowLbls.forEach((lbl, i) => {
+    g.drawString(lbl, i * colW + colW / 2, headerH + rowH / 2);
+  });
+
+  date.setDate(1);
+  const dow = date.getDay();
+  const dowNorm = dow === 0 ? 7 : dow;
+
+  const monthMaxDayMap = {
+    0: 31,
+    1: (2020 - year) % 4 === 0 ? 29 : 28,
+    2: 31,
+    3: 30,
+    4: 31,
+    5: 30,
+    6: 31,
+    7: 31,
+    8: 30,
+    9: 31,
+    10: 30,
+    11: 31
+  };
+
+  let days = [];
+  let nextMonthDay = 1;
+  let thisMonthDay = 51;
+  let prevMonthDay = monthMaxDayMap[month > 0 ? month - 1 : 11] - dowNorm;
+  for (let i = 0; i < colN * (rowN - 1) + 1; i++) {
+    if (i < dowNorm) {
+      days.push(prevMonthDay);
+      prevMonthDay++;
+    } else if (thisMonthDay <= monthMaxDayMap[month] + 50) {
+      days.push(thisMonthDay);
+      thisMonthDay++;
+    } else {
+      days.push(nextMonthDay);
+      nextMonthDay++;
+    }
+  }
+
+  let i = 0;
+  for (y = 0; y < rowN - 1; y++) {
+    for (x = 0; x < colN; x++) {
+      i++;
+      const day = days[i];
+      const isToday =
+        today.year === year && today.month === month && today.day === day - 50;
+      if (isToday) {
+        g.setColor(red);
+        g.drawRect(
+          x * colW,
+          y * rowH + headerH + rowH,
+          x * colW + colW - 1,
+          y * rowH + headerH + rowH + rowH
+        );
+      }
+      g.setColor(day < 50 ? gray3 : white);
+      g.drawString(
+        (day > 50 ? day - 50 : day).toString(),
+        x * colW + colW / 2,
+        headerH + rowH + y * rowH + rowH / 2
+      );
+    }
+  }
+}
+
+const date = new Date();
+const today = {
+  day: date.getDate(),
+  month: date.getMonth(),
+  year: date.getFullYear()
+};
+drawCalendar(date);
+clearWatch();
+setWatch(
+  () => {
+    const month = date.getMonth();
+    const prevMonth = month > 0 ? month - 1 : 11;
+    if (prevMonth === 11) date.setFullYear(date.getFullYear() - 1);
+    date.setMonth(prevMonth);
+    drawCalendar(date);
+  },
+  BTN4,
+  { repeat: true }
+);
+setWatch(
+  () => {
+    const month = date.getMonth();
+    const prevMonth = month < 11 ? month + 1 : 0;
+    if (prevMonth === 0) date.setFullYear(date.getFullYear() + 1);
+    date.setMonth(month + 1);
+    drawCalendar(date);
+  },
+  BTN5,
+  { repeat: true }
+);
+setWatch(Bangle.showLauncher, BTN2, { repeat: false, edge: "falling" });