joplin-plugin-my-calendar 1.2.7 → 1.3.1

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.3.1](https://github.com/volodymyroliinyk/joplin-plugin-my-calendar/compare/v1.3.0...v1.3.1) (2026-02-04)
+
+
+### 🐛 Bug Fixes
+
+* eliminate UI flickering and improve mobile initialization ([01d378f](https://github.com/volodymyroliinyk/joplin-plugin-my-calendar/commit/01d378f198a416777414c2c4d92627f9b903f58c))
+
+## [1.3.0](https://github.com/volodymyroliinyk/joplin-plugin-my-calendar/compare/v1.2.7...v1.3.0) (2026-02-04)
+
+
+### ✨ Features
+
+* ui enhancements ([af04211](https://github.com/volodymyroliinyk/joplin-plugin-my-calendar/commit/af04211e1efcb8816ebd3decec7da11a74048118))
+
 ### [1.2.7](https://github.com/volodymyroliinyk/joplin-plugin-my-calendar/compare/v1.2.6...v1.2.7) (2026-02-02)
 
 

package/README.md

@@ -18,6 +18,8 @@ note-taking app.
 ## 🌟 Key Features
 
 - **Monthly Calendar Grid**: Navigate through months, view event bars, and see your schedule at a glance.
+- **Quick Month-Year Navigation**: Click the month/year header to open a picker and jump instantly to any date in the
+  past or future.
 - **Smart Day View**: Click any day to see a detailed list of scheduled events.
 - **Notes as Events**: Any note can become a calendar event simply by adding a small Markdown block.
 - **ICS Import**: Import standard `*.ics` files (from Google Calendar, Outlook, Apple, etc.) directly into your Joplin
@@ -64,8 +66,8 @@ You don't need to import files to use the calendar. Simply add the following blo
 ~~~markdown
 ```mycalendar-event
 title: Meeting with Team
-start: 2025-12-18 10:00+02:00
-end: 2025-12-18 11:30+02:00
+start: 2026-02-04 10:00+02:00
+end: 2026-02-04 11:30+02:00
 color: #3498db
 location: Conference Room B
 ```
@@ -128,14 +130,14 @@ The calendar supports several ways to specify the time and timezone of your even
    Explicitly define the time and its relation to UTC. This time will be automatically converted to your current
    device's timezone.
    ```text
-   start: 2025-12-18 10:00+02:00
+   start: 2026-02-04 10:00+02:00
    ```
 
 2. **With `tz` Property (IANA)**
    Specify the time and the exact IANA Timezone name. The plugin will handle the conversion based on daylight saving
    rules.
    ```text
-   start: 2025-12-18 10:00
+   start: 2026-02-04 10:00
    tz: America/Toronto
    ```
 
@@ -143,7 +145,7 @@ The calendar supports several ways to specify the time and timezone of your even
    If no offset or `tz` is provided, the time is considered "floating" and will be shown exactly as written, regardless
    of the device's timezone settings.
    ```text
-   start: 2025-12-18 10:00
+   start: 2026-02-04 10:00
    ```
 
 ---
@@ -189,10 +191,10 @@ Customize your experience in the Joplin Settings (`Tools` > `Options` > `My Cale
 
 ## 👨‍💻 Development
 
-### Commands:
+### Commands
 
 - `npm run build;`: Compile the project.
-- `npm run pack;`: Create the `.jpl` distribution file.
+- `npm pack;`: Create the `.jpl` distribution file.
 - `npm test;`: Run the extensive test suite (250+ cases).
 - `npm run lint;`: Check code style and common patterns.
 - `pkill -f jest || true;pkill -f node || true;rm -rf node_modules/.cache;rm -rf ~/.cache/jest;npx jest --clearCache;`:
@@ -218,6 +220,14 @@ Automates the entire release workflow: bumps version, syncs manifest, tags, push
 bash ./scripts/release.sh [patch|minor|major];
 ```
 
+#### `scripts/update-demo-ics.py`
+
+Automatically shifts dates in the demo ICS file to start from today. Useful for refreshing screenshots.
+
+```bash
+./scripts/update-demo-ics.py;
+```
+
 ### Development Workflow
 
 For a detailed guide on branch naming, commit message formats, and the release process, please see the *

package/dist/index.js

@@ -877,12 +877,6 @@ function registerUiMessageHandlers(joplin, panelId) {
             }
             if (msg.name === 'uiReady') {
                 yield (0, uiSettings_1.pushUiSettings)(joplin, panelId);
-                // Force a redraw so weekStart takes effect immediately.
-                // const pm = joplin?.views?.panels?.postMessage;
-                // if (typeof pm === 'function') {
-                //     await pm(panelId, {name: 'redrawMonth'});
-                // }
-                yield safePostMessage(joplin, panelId, { name: 'redrawMonth' });
                 return;
             }
         }));
@@ -2439,7 +2433,6 @@ function registerCalendarPanelController(joplin, panel, helpers) {
                 switch (msg.name) {
                     case 'uiReady': {
                         yield (0, uiSettings_1.pushUiSettings)(joplin, panel);
-                        yield post({ name: 'redrawMonth' });
                         return;
                     }
                     case 'requestRangeEvents': {

package/dist/manifest.json

@@ -2,9 +2,9 @@
   "manifest_version": 1,
   "id": "com.volodymyroliinyk.joplin.plugin.my-calendar",
   "app_min_version": "3.3",
-  "version": "1.2.7",
+  "version": "1.3.1",
   "name": "My Calendar",
-  "description": "Calendar view from notes with event syntax",
+  "description": "Calendar plugin for Joplin",
   "author": "Volodymyr Oliinyk",
   "homepage_url": "https://github.com/volodymyroliinyk/joplin-plugin-my-calendar",
   "repository_url": "https://github.com/volodymyroliinyk/joplin-plugin-my-calendar",

package/dist/ui/calendar.js

@@ -3,9 +3,9 @@
 (function () {
     // Ensure a single shared settings object across all UI scripts.
     window.__mcUiSettings = window.__mcUiSettings || {
-        weekStart: undefined,
-        debug: undefined,
-        dayEventsRefreshMinutes: undefined,
+        weekStart: 'monday', // Default to Monday instead of undefined
+        debug: false,
+        dayEventsRefreshMinutes: 1,
         showEventTimeline: true,
     };
 
@@ -244,6 +244,9 @@
             let current = startOfMonthLocal(new Date());
             let selectedDayUtc = localMidnightTs(new Date());
 
+            let isPickerOpen = false;
+            let pickerYear = null;
+
             // Events received for the current range of calendar grid (42 days)
             let gridEvents = [];
 
@@ -272,9 +275,10 @@
                 // Ensure immediate behavior on settings toggle without requiring a full re-render.
                 if (hidden) {
                     ul.querySelectorAll('.mc-event-timeline').forEach((el) => el.remove());
+                    ul.querySelectorAll('.mc-events-timeline-now-line-wrap').forEach((el) => el.remove());
                 }
             }
-            
+
             function markPastDayEvents() {
                 const ul = document.getElementById('mc-events-list');
                 if (!ul) return;
@@ -357,15 +361,16 @@
                 const inDay = now >= dayStartUtc && now < (dayStartUtc + DAY);
                 const pct = Math.max(0, Math.min(100, ((now - dayStartUtc) / DAY) * 100));
 
-                ul.querySelectorAll('.mc-event-timeline-now').forEach((dot) => {
-                    const el = /** @type {HTMLElement} */ (dot);
+                const line = ul.querySelector('.mc-events-timeline-now-line');
+                if (line) {
+                    const el = /** @type {HTMLElement} */ (line);
                     if (!inDay) {
                         el.style.display = 'none';
-                        return;
+                    } else {
+                        el.style.display = 'block';
+                        el.style.left = pct + '%';
                     }
-                    el.style.display = '';
-                    el.style.left = pct + '%';
-                });
+                }
             }
 
             function scheduleDayNowTimelineTick() {
@@ -402,7 +407,10 @@
                     clearTimeout(_uiReadyDebounce);
                     _uiReadyDebounce = setTimeout(() => {
                         try {
+                            log('sending uiReady again (visibility/focus)');
                             window.webviewApi?.postMessage?.({name: 'uiReady'});
+                            // Also trigger a redraw to ensure UI is not stuck
+                            drawMonth();
                         } catch (_err) {
                             // ignore
                         }
@@ -564,7 +572,7 @@
                         const firstSettingsArrived = !__mcHasUiSettings;
                         __mcHasUiSettings = true;
 
-                        if (firstSettingsArrived || weekStartChanged) {
+                        if (weekStartChanged || (firstSettingsArrived && !gridEvents.length)) {
                             drawMonth();
                         }
                     },
@@ -591,6 +599,11 @@
                         log('got rangeEvents:', (msg.events || []).length);
                         gridEvents = msg.events || [];
 
+                        if (rangeRequestTimer) {
+                            clearTimeout(rangeRequestTimer);
+                            rangeRequestTimer = null;
+                        }
+
                         setGridLoading(false);
 
                         paintGrid();
@@ -629,6 +642,83 @@
                 return b;
             }
 
+            function renderMonthYearPicker() {
+                const dropdown = document.createElement('div');
+                dropdown.className = 'mc-picker-dropdown';
+                dropdown.addEventListener('click', (e) => e.stopPropagation());
+
+                if (pickerYear === null) {
+                    pickerYear = current.getFullYear();
+                }
+
+                const yearRow = document.createElement('div');
+                yearRow.className = 'mc-picker-year-row';
+
+                const btnPrevYear = button('‹', 'Previous year', () => {
+                    pickerYear--;
+                    renderToolbar();
+                });
+                const yearLabel = document.createElement('div');
+                yearLabel.className = 'mc-picker-year';
+                yearLabel.textContent = String(pickerYear);
+                const btnNextYear = button('›', 'Next year', () => {
+                    pickerYear++;
+                    renderToolbar();
+                });
+
+                yearRow.appendChild(btnPrevYear);
+                yearRow.appendChild(yearLabel);
+                yearRow.appendChild(btnNextYear);
+                dropdown.appendChild(yearRow);
+
+                const monthsGrid = document.createElement('div');
+                monthsGrid.className = 'mc-picker-months';
+
+                const monthNames = [];
+                for (let m = 0; m < 12; m++) {
+                    const d = new Date(2000, m, 1);
+                    monthNames.push(d.toLocaleString(undefined, {month: 'short'}));
+                }
+
+                monthNames.forEach((name, idx) => {
+                    const mBtn = document.createElement('div');
+                    mBtn.className = 'mc-picker-month';
+                    if (idx === current.getMonth() && pickerYear === current.getFullYear()) {
+                        mBtn.classList.add('mc-active');
+                    }
+                    mBtn.textContent = name;
+                    mBtn.addEventListener('click', () => {
+                        current = new Date(pickerYear, idx, 1);
+                        isPickerOpen = false;
+                        pickerYear = null;
+                        drawMonth();
+                    });
+                    monthsGrid.appendChild(mBtn);
+                });
+
+                dropdown.appendChild(monthsGrid);
+
+                // const footer = document.createElement('div');
+                // footer.style.display = 'flex';
+                // footer.style.justifyContent = 'center';
+                // footer.style.marginTop = '8px';
+                // footer.style.paddingTop = '8px';
+                // footer.style.borderTop = '1px solid var(--joplin-divider-color)';
+                //
+                // const btnTodayPicker = button('Go to Today', 'Go to current month', () => {
+                //     current = startOfMonthLocal(new Date());
+                //     selectedDayUtc = localMidnightTs(new Date());
+                //     isPickerOpen = false;
+                //     pickerYear = null;
+                //     drawMonth();
+                // });
+                // btnTodayPicker.style.width = '100%';
+                // footer.appendChild(btnTodayPicker);
+                // dropdown.appendChild(footer);
+
+                return dropdown;
+            }
+
             function renderToolbar() {
                 const root = $toolbar();
                 if (!root) return;
@@ -637,15 +727,18 @@
                 wrap.className = 'mc-toolbar-inner';
 
                 const btnPrev = button('‹', 'Previous month', () => {
+                    isPickerOpen = false;
                     current = addMonthsLocal(current, -1);
                     drawMonth();
                 });
                 const btnToday = button('Today', 'Today', () => {
+                    isPickerOpen = false;
                     current = startOfMonthLocal(new Date());
                     selectedDayUtc = localMidnightTs(new Date());
                     drawMonth();
                 });
                 const btnNext = button('›', 'Next month', () => {
+                    isPickerOpen = false;
                     current = addMonthsLocal(current, +1);
                     drawMonth();
                 });
@@ -653,20 +746,40 @@
                 // Month YYYY title.
                 const title = document.createElement('div');
                 title.className = 'mc-title';
-                title.textContent = monthLabel(current);
+                title.id = 'mc-picker-trigger';
+                title.innerHTML = `${monthLabel(current)} <span class="mc-picker-arrow">▾</span>`;
+                title.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    isPickerOpen = !isPickerOpen;
+                    if (isPickerOpen) {
+                        pickerYear = current.getFullYear();
+                    }
+                    renderToolbar();
+                });
 
                 wrap.appendChild(btnPrev);
                 wrap.appendChild(btnToday);
                 wrap.appendChild(btnNext);
                 wrap.appendChild(title);
+
+                if (isPickerOpen) {
+                    const picker = renderMonthYearPicker();
+                    title.appendChild(picker);
+                }
+
                 root.appendChild(wrap);
             }
 
-            function drawMonth() {
-                if (!uiSettings.weekStart) {
-                    log('drawMonth skipped: weekStart not set');
-                    return;
+            document.addEventListener('click', () => {
+                if (isPickerOpen) {
+                    isPickerOpen = false;
+                    renderToolbar();
                 }
+            });
+
+            function drawMonth() {
+                // We no longer skip if weekStart is missing; getWeekdayMeta/startOfCalendarGridLocal have defaults.
+                // This ensures the loader and toolbar are visible immediately.
                 renderToolbar();
                 renderGridSkeleton();
 
@@ -932,6 +1045,15 @@
                     return;
                 }
 
+                if (uiSettings.showEventTimeline !== false) {
+                    const wrap = document.createElement('div');
+                    wrap.className = 'mc-events-timeline-now-line-wrap';
+                    const line = document.createElement('div');
+                    line.className = 'mc-events-timeline-now-line';
+                    wrap.appendChild(line);
+                    ul.appendChild(wrap);
+                }
+
                 for (const item of daySlices) {
                     const ev = item.ev;
                     const slice = item.slice;
@@ -955,7 +1077,7 @@
                     li.appendChild(title);
                     li.appendChild(t);
 
-                    // 24h timeline under the event (segment = event slice, dot = current time in day)
+                    // 24h timeline under the event (segment = event slice)
                     if (uiSettings.showEventTimeline !== false) {
                         const timeline = document.createElement('div');
                         timeline.className = 'mc-event-timeline';
@@ -972,11 +1094,7 @@
                         seg.style.left = left + '%';
                         seg.style.width = Math.max(0, (right - left)) + '%';
 
-                        const nowDot = document.createElement('div');
-                        nowDot.className = 'mc-event-timeline-now';
-
                         timeline.appendChild(seg);
-                        timeline.appendChild(nowDot);
                         li.appendChild(timeline);
                     }
 
@@ -1001,10 +1119,15 @@
             }
 
             // Launch
-            // Ensure backend handshake is not lost on first start
+            // Ensure backend handshake is not lost on first start.
+            // We only show the preliminary skeleton state here to avoid total empty screen.
+            renderToolbar();
+            renderGridSkeleton();
+            setGridLoading(true);
+
             ensureBackendReady(() => {
+                // Handshake will trigger uiSettings, which will then trigger full drawMonth()
             });
-            drawMonth();
 
             log('init done');
         } catch (e) {

package/dist/ui/mycalendar.css

@@ -1,35 +1,42 @@
 /* src/ui/mycalendar.css */
 
-html, body {
+html,
+body {
     height: 100%;
     margin: 0;
     overflow: auto;
 }
 
 /* TODO:[1]: parent --scrollbar-size is invisible inside of iframe, and size is 7px always. How to solve that? */
-body::-webkit-scrollbar, select::-webkit-scrollbar {
+body::-webkit-scrollbar,
+select::-webkit-scrollbar {
     width: var(--scrollbar-size, 7px);
     height: var(--scrollbar-size, 7px);
 }
 
-body::-webkit-scrollbar-corner, select::-webkit-scrollbar-corner {
+body::-webkit-scrollbar-corner,
+select::-webkit-scrollbar-corner {
     background: none;
 }
 
-body::-webkit-scrollbar-track, select::-webkit-scrollbar-track {
+body::-webkit-scrollbar-track,
+select::-webkit-scrollbar-track {
     border: none;
 }
 
-body::-webkit-scrollbar-thumb, select::-webkit-scrollbar-thumb {
+body::-webkit-scrollbar-thumb,
+select::-webkit-scrollbar-thumb {
     background: var(--scrollbar-thumb-color);
     border-radius: calc(var(--scrollbar-size, 7px) * 0.7);
 }
 
-body::-webkit-scrollbar-track:hover, select::-webkit-scrollbar-track:hover {
+body::-webkit-scrollbar-track:hover,
+select::-webkit-scrollbar-track:hover {
     background: rgba(0, 0, 0, 0.1);
 }
 
-body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
+body::-webkit-scrollbar-thumb:hover,
+select::-webkit-scrollbar-thumb:hover {
     background: var(--scrollbar-thumb-color-hover);
 }
 
@@ -37,6 +44,7 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
     --scrollbar-thumb-color: var(--joplin-scrollbar-thumb-color);
     --scrollbar-thumb-color-hover: var(--joplin-scrollbar-thumb-color-hover);
     --mc-default-event-color: #1470d9;
+    --mc-default-current-time-v-line-color: #ffa334;
     --mc-past-opacity: 0.45;
     /* Subtle weekend highlight (theme-aware) */
     --mc-weekend-head-bg: color-mix(in srgb, var(--joplin-background-color3) 70%, transparent);
@@ -44,11 +52,6 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
 
 }
 
-/*#joplin-plugin-content-root {*/
-/*    min-width: 315px;*/
-/*}*/
-
-
 /* Outer container that will actually scroll */
 #mc-cal-scroll {
     height: 100%;
@@ -94,6 +97,102 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
     flex: 1;
 }
 
+.mc-toolbar-inner .mc-title {
+    margin-left: 4px;
+    font-weight: 700;
+    flex: 1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: background 0.1s;
+    user-select: none;
+    position: relative;
+}
+
+.mc-toolbar-inner .mc-title:hover {
+    background: var(--joplin-background-color3);
+}
+
+.mc-btn.mc-calendar-nav-btn:hover {
+    background: var(--joplin-background-color3);
+}
+
+.mc-picker-dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0;
+    background: var(--joplin-background-color);
+    border: 1px solid var(--joplin-divider-color);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 1000;
+    padding: 8px;
+    min-width: 200px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    animation: mc-fade-in 0.15s ease-out;
+}
+
+@keyframes mc-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.mc-picker-year-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 4px;
+    border-bottom: 1px solid var(--joplin-divider-color);
+    padding-bottom: 8px;
+    margin-bottom: 4px;
+}
+
+.mc-picker-year {
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.mc-picker-months {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 4px;
+}
+
+.mc-picker-month {
+    padding: 6px;
+    font-size: 12px;
+    text-align: center;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.1s;
+}
+
+.mc-picker-month:hover {
+    background: var(--joplin-background-color3);
+}
+
+.mc-picker-month.mc-active {
+    background: var(--joplin-background-color3);
+    color: var(--joplin-color);
+}
+
+.mc-picker-arrow {
+    font-size: 10px;
+    opacity: 0.6;
+}
+
 #mc-grid {
     border: 1px solid var(--joplin-divider-color);
     border-radius: 8px;
@@ -105,7 +204,8 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
 #mc-grid .mc-grid-loader {
     position: absolute;
     inset: 0;
-    display: none; /* shown via .mc-loading */
+    display: none;
+    /* shown via .mc-loading */
     align-items: center;
     justify-content: center;
     background: color-mix(in srgb, var(--joplin-background-color) 70%, transparent);
@@ -142,7 +242,8 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
     }
 }
 
-.mc-grid-head, .mc-grid-body {
+.mc-grid-head,
+.mc-grid-body {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 4px;
@@ -208,8 +309,20 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
 .mc-grid-body .mc-cell {
     min-width: 0;
     padding: var(--mc-cell-pad-y) var(--mc-cell-pad-x);
+    border-right: 1px solid var(--joplin-divider-color);
+    border-top: 1px solid var(--joplin-divider-color);
+    overflow: hidden;
 }
 
+.mc-grid-body .mc-cell.mc-weekend {
+    background: var(--mc-weekend-cell-bg);
+}
+
+.mc-grid-body .mc-cell:nth-child(7n) {
+    border-right: none;
+}
+
+
 /* Scale typography inside cells */
 .mc-daynum {
     font-size: var(--mc-daynum-font);
@@ -258,24 +371,6 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
 
 /*****/
 
-.mc-grid-body .mc-cell {
-    /*position: relative;*/
-    /*min-height: 50px;*/
-    border-right: 1px solid var(--joplin-divider-color);
-    border-top: 1px solid var(--joplin-divider-color);
-    padding: 4px 6px;
-    overflow: hidden;
-}
-
-/* Highlight weekends inside the current month only (keep .mc-out styling as-is) */
-.mc-grid-body .mc-cell.mc-weekend:not(.mc-out) {
-    background: var(--mc-weekend-cell-bg);
-}
-
-.mc-grid-body .mc-cell:nth-child(7n) {
-    border-right: none;
-}
-
 .mc-daynum {
     font-size: 12px;
     opacity: 0.8;
@@ -297,7 +392,7 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
 }
 
 .mc-out {
-    background: var(--joplin-background-color3);
+    opacity: 0.6;
 }
 
 .mc-today {
@@ -309,16 +404,6 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
     box-shadow: inset 0 0 0 2px var(--joplin-color);
 }
 
-/* Past days in the month grid */
-.mc-cell.mc-past {
-    opacity: var(--mc-past-opacity);
-}
-
-/* Keep selection slightly more readable even if the day is in the past */
-.mc-cell.mc-past.mc-selected {
-    opacity: 0.7;
-}
-
 .mc-events-header {
     display: flex;
     align-items: center;
@@ -332,13 +417,15 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
     white-space: nowrap;
 }
 
-#mc-events, #mc-import {
+#mc-events,
+#mc-import {
     border: 1px solid var(--joplin-divider-color);
     border-radius: 8px;
     overflow: hidden;
 }
 
-.mc-events-header, .mc-import-header {
+.mc-events-header,
+.mc-import-header {
     background: var(--joplin-background-color3);
     padding: 6px 10px;
     font-size: 12px;
@@ -349,6 +436,7 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
     list-style: none;
     margin: 0;
     padding: 8px 6px;
+    position: relative;
 }
 
 .mc-event {
@@ -358,6 +446,8 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
     padding: 6px;
     border-radius: 6px;
     cursor: pointer;
+    position: relative;
+    z-index: 2;
 }
 
 .mc-event:hover {
@@ -384,7 +474,6 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
 
 /* The container of strips in the cell */
 .mc-bars {
-    /*position: absolute;*/
     left: 4px;
     right: 4px;
     bottom: 6px;
@@ -404,17 +493,16 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
 
 /* Badge-chiller is up to the right */
 .mc-count {
-    /*position: absolute;*/
     top: 2px;
     right: 4px;
     font-size: 14px;
     font-weight: bold;
     text-align: center;
     line-height: 1;
-    padding: 2px 4px;
-    border-radius: 6px;
+    padding: 3px 4px;
+    border-radius: 4px;
     background: var(--joplin-background-color3);
-    border: 1px solid var(--joplin-divider-color);
+    border: 0px solid var(--joplin-divider-color);
     opacity: 0.85;
     z-index: 3;
 }
@@ -424,8 +512,10 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
 }
 
 .mc-calendar-nav-btn {
-    color: var(--joplin-color) !important; /* make the text white */
-    background: transparent; /* The background is transparent */
+    color: var(--joplin-color) !important;
+    /* make the text white */
+    background: transparent;
+    /* The background is transparent */
     border: none;
     font-size: 12px;
     font-weight: 700;
@@ -433,7 +523,8 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
 }
 
 .mc-calendar-nav-btn:hover {
-    color: var(--joplin-color) !important; /* lighter when creeping */
+    color: var(--joplin-color) !important;
+    /* lighter when creeping */
 }
 
 /* --- Events panel layout: list scroll + import at bottom --- */
@@ -450,7 +541,8 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
 #mc-ics-import-form .mc-grid-loader {
     position: absolute;
     inset: 0;
-    display: none; /* shown via .mc-loading */
+    display: none;
+    /* shown via .mc-loading */
     align-items: center;
     justify-content: center;
     background: color-mix(in srgb, var(--joplin-background-color) 70%, transparent);
@@ -489,8 +581,10 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
 /* Container to be scrolled */
 #mc-import-body {
     margin: 0;
-    max-height: 260px; /* choose the height that suits you */
-    padding: 8px 6px; /* so that the scroll does not "stick" to the content */
+    max-height: 260px;
+    /* choose the height that suits you */
+    padding: 8px 6px;
+    /* so that the scroll does not "stick" to the content */
 }
 
 /* Very important for <input type="file"> in flex-line: otherwise it can inflate the width */
@@ -545,7 +639,6 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
     position: relative;
     flex: 0 0 100%;
     height: 2px;
-    /*margin-top: 4px;*/
     border-radius: 999px;
     background: color-mix(in srgb, var(--joplin-color) 18%, transparent);
     overflow: hidden;
@@ -560,16 +653,28 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
     opacity: 0.9;
 }
 
-/* dot “now” */
-.mc-event-timeline .mc-event-timeline-now {
+/* shared vertical line “now” */
+.mc-events-timeline-now-line-wrap {
     position: absolute;
-    top: 50%;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-    background: var(--joplin-color);
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--joplin-background-color) 65%, transparent);
+    top: 0;
+    bottom: 0;
+    left: 12px;
+    /* 6px (ul padding) + 6px (li padding) */
+    right: 12px;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.mc-events-timeline-now-line {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: color-mix(in srgb, var(--mc-default-current-time-v-line-color) 40%, transparent);
+    box-shadow: 0 0 2px color-mix(in srgb, var(--mc-default-current-time-v-line-color) 20%, transparent);
+    z-index: 1;
+    display: none;
+    /* shown via JS when inDay */
 }
 
 /* slightly mute the timeline for past events */
@@ -689,7 +794,7 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
         gap: 2px;
     }
 
-    .mc-cell {
+    .mc-grid-body .mc-cell {
         padding: 6px;
     }
 
@@ -697,7 +802,8 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
         font-size: 12px;
     }
 
-    .mc-events-header, .mc-import-header {
+    .mc-events-header,
+    .mc-import-header {
         font-weight: normal;
         font-size: 12px;
     }
@@ -721,4 +827,8 @@ body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
     .mc-grid-head-cell.mc-weekend {
         background: var(--mc-weekend-head-bg);
     }
-}
+
+    .mc-count {
+        padding: 2px 4px;
+    }
+}

package/manifest.json

@@ -2,9 +2,9 @@
   "manifest_version": 1,
   "id": "com.volodymyroliinyk.joplin.plugin.my-calendar",
   "app_min_version": "3.3",
-  "version": "1.2.7",
+  "version": "1.3.1",
   "name": "My Calendar",
-  "description": "Calendar view from notes with event syntax",
+  "description": "Calendar plugin for Joplin",
   "author": "Volodymyr Oliinyk",
   "homepage_url": "https://github.com/volodymyroliinyk/joplin-plugin-my-calendar",
   "repository_url": "https://github.com/volodymyroliinyk/joplin-plugin-my-calendar",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "joplin-plugin-my-calendar",
-  "version": "1.2.7",
+  "version": "1.3.1",
   "description": "Calendar plugin for Joplin",
   "author": "Volodymyr Oliinyk",
   "license": "MIT",

package/publish/com.volodymyroliinyk.joplin.plugin.my-calendar.json

@@ -2,9 +2,9 @@
   "manifest_version": 1,
   "id": "com.volodymyroliinyk.joplin.plugin.my-calendar",
   "app_min_version": "3.3",
-  "version": "1.2.7",
+  "version": "1.3.1",
   "name": "My Calendar",
-  "description": "Calendar view from notes with event syntax",
+  "description": "Calendar plugin for Joplin",
   "author": "Volodymyr Oliinyk",
   "homepage_url": "https://github.com/volodymyroliinyk/joplin-plugin-my-calendar",
   "repository_url": "https://github.com/volodymyroliinyk/joplin-plugin-my-calendar",