Merge pull request #2571 from nxdefiant/master

calendar usage changes

apps/calendar/ChangeLog

@@ -11,3 +11,5 @@
 0.10: Use default Bangle formatter for booleans
 0.11: Fix off-by-one-error on next year
 0.12: Mark dated events on a day
+0.13: Switch to swipe left/right for month and up/down for year selection
+      Display events for current month on touch

apps/calendar/README.md

@@ -4,11 +4,13 @@ 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
+- Swipe left to go to the previous month
+- Swipe right to go to the next month
+- Swipe up (Bangle.js 2 only) to go to the previous year
+- Swipe down (Bangle.js 2 only) to go to the next year
+- Touch to display events for current month
+- Press the button (button 3 on Bangle.js 1) to exit
 
 ## Settings
 
-- Starts Sunday: whether the calendar should start on Sunday (default is Monday).
 - B2 Colors: use non-dithering colors (default, recommended for Bangle 2) or the original color scheme.
-

apps/calendar/calendar.js

@@ -24,11 +24,21 @@ let fgOtherMonth = gray1;
 let fgSameMonth = white;
 let bgEvent = blue;
 const eventsPerDay=6; // how much different events per day we can display
+const date = new Date();
 
 const timeutils = require("time_utils");
 let settings = require('Storage').readJSON("calendar.json", true) || {};
 let startOnSun = ((require("Storage").readJSON("setting.json", true) || {}).firstDayOfWeek || 0) === 0;
-const events = (require("Storage").readJSON("sched.json",1) || []).filter(a => a.on && a.date); // all alarms that run on a specific date
+ // all alarms that run on a specific date
+const events = (require("Storage").readJSON("sched.json",1) || []).filter(a => a.on && a.date).map(a => {
+  const date = new Date(a.date);
+  const time = timeutils.decodeTime(a.t);
+  date.setHours(time.h);
+  date.setMinutes(time.m);
+  date.setSeconds(time.s);
+  return {date: date, msg: a.msg};
+});
+events.sort((a,b) => a.date - b.date);
 
 if (settings.ndColors === undefined) {
   settings.ndColors = !g.theme.dark;
@@ -192,6 +202,12 @@ function drawCalendar(date) {
     }
   }
 
+  const weekBeforeMonth = new Date(date.getTime());
+  weekBeforeMonth.setDate(weekBeforeMonth.getDate() - 7);
+  const week2AfterMonth = new Date(date.getFullYear(), date.getMonth()+1, 0);
+  week2AfterMonth.setDate(week2AfterMonth.getDate() + 14);
+  const eventsThisMonth = events.filter(ev => ev.date > weekBeforeMonth && ev.date < week2AfterMonth);
+
   let i = 0;
   for (y = 0; y < rowN - 1; y++) {
     for (x = 0; x < colN; x++) {
@@ -215,18 +231,20 @@ function drawCalendar(date) {
         );
       }
 
-      // Display events for this day
-      const eventsCurDay = events.filter(ev => ev.date === curDay.toLocalISOString().substr(0, 10));
-      if (eventsCurDay.length > 0) {
+      if (eventsThisMonth.length > 0) {
+        // Display events for this day
         g.setColor(bgEvent);
-        eventsCurDay.forEach(ev => {
-          const time = timeutils.decodeTime(ev.t);
-          const hour = time.h + time.m/60.0;
-          const slice = hour/24*(eventsPerDay-1); // slice 0 for 0:00 up to eventsPerDay for 23:59
-          const height = (y2-2) - (y1+2); // height of a cell
-          const sliceHeight = height/eventsPerDay;
-          const ystart = (y1+2) + slice*sliceHeight;
-          g.fillRect(x1+1, ystart, x2-2, ystart+sliceHeight);
+        eventsThisMonth.forEach((ev, idx) => {
+          if (sameDay(ev.date, curDay)) {
+            const hour = ev.date.getHours() + ev.date.getMinutes()/60.0;
+            const slice = hour/24*(eventsPerDay-1); // slice 0 for 0:00 up to eventsPerDay for 23:59
+            const height = (y2-2) - (y1+2); // height of a cell
+            const sliceHeight = height/eventsPerDay;
+            const ystart = (y1+2) + slice*sliceHeight;
+            g.fillRect(x1+1, ystart, x2-2, ystart+sliceHeight);
+
+            eventsThisMonth.splice(idx, 1); // this event is no longer needed
+          }
         });
       }
 
@@ -242,23 +260,51 @@ function drawCalendar(date) {
   }
 }
 
-const date = new Date();
-drawCalendar(date);
-clearWatch();
-Bangle.on("touch", area => {
-  const month = date.getMonth();
-  if (area == 1) {
-    let prevMonth = month > 0 ? month - 1 : 11;
-    if (prevMonth === 11) date.setFullYear(date.getFullYear() - 1);
-    date.setMonth(prevMonth);
-  } else {
-    let nextMonth = month < 11 ? month + 1 : 0;
-    if (nextMonth === 0) date.setFullYear(date.getFullYear() + 1);
-    date.setMonth(nextMonth);
-  }
-  drawCalendar(date);
-});
+function setUI() {
+  Bangle.setUI({
+    mode : "custom",
+    swipe: (dirLR, dirUD) => {
+      if (dirLR<0) { // left
+        const month = date.getMonth();
+        let prevMonth = month > 0 ? month - 1 : 11;
+        if (prevMonth === 11) date.setFullYear(date.getFullYear() - 1);
+        date.setMonth(prevMonth);
+        drawCalendar(date);
+      } else if (dirLR>0) { // right
+        const month = date.getMonth();
+        let nextMonth = month < 11 ? month + 1 : 0;
+        if (nextMonth === 0) date.setFullYear(date.getFullYear() + 1);
+        date.setMonth(nextMonth);
+        drawCalendar(date);
+      } else if (dirUD<0) { // up
+        date.setFullYear(date.getFullYear() - 1);
+        drawCalendar(date);
+      } else if (dirUD>0) { // down
+        date.setFullYear(date.getFullYear() + 1);
+        drawCalendar(date);
+      }
+    },
+    btn: (n) => n === (process.env.HWVERSION === 2 ? 1 : 3) && load(),
+    touch: (n,e) => {
+      const menu = events.filter(ev => ev.date.getFullYear() === date.getFullYear() && ev.date.getMonth() === date.getMonth()).map(e => {
+        const dateStr = require("locale").date(e.date, 1);
+        const timeStr = require("locale").time(e.date, 1);
+        return { title: `${dateStr} ${timeStr}` + (e.msg ? " " + e.msg : "") };
+      });
+      if (menu.length === 0) {
+        menu.push({title: /*LANG*/"No events"});
+      }
+      menu[""] = { title: require("locale").month(date) + " " + date.getFullYear() };
+      menu["< Back"] = () => {
+        E.showMenu();
+        drawCalendar(date);
+        setUI();
+      };
+      E.showMenu(menu);
+    }
+  });
+}
 
-// Show launcher when button pressed
-setWatch(() => load(), process.env.HWVERSION === 2 ? BTN : BTN3, { repeat: false, edge: "falling" });
+drawCalendar(date);
+setUI();
 // No space for widgets!

apps/calendar/metadata.json

@@ -1,11 +1,11 @@
 {
   "id": "calendar",
   "name": "Calendar",
-  "version": "0.12",
+  "version": "0.13",
   "description": "Simple calendar",
   "icon": "calendar.png",
   "screenshots": [{"url":"screenshot_calendar.png"}],
-  "tags": "calendar",
+  "tags": "calendar,tool",
   "supports": ["BANGLEJS","BANGLEJS2"],
   "readme": "README.md",
   "allow_emulator": true,