mark the day with dot that has a note entry

leenzhu · Sep 3, 2024 · 361e172 · 361e172
1 parent 7480a5c
commit 361e172
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 14 deletions.
diff --git a/src/calendar.ts b/src/calendar.ts
@@ -27,7 +27,6 @@ const monday_first = date_ele.getAttribute('iso8601') === 'true'
 const timeFmt:any = parseInt(date_ele.getAttribute('timeFmt'),10)
 const theme:any = date_ele.getAttribute('theme')
 const enableWeekNum = date_ele.getAttribute('weekNum') === 'true'
-const calendarHighlightColor = date_ele.getAttribute('calendarHighlightColor')
 const enableCalendarHighlight = date_ele.getAttribute('enableCalendarHighlight') === "true"
 
 const calendar = new VanillaCalendar('#datepicker', {
@@ -48,8 +47,7 @@ const calendar = new VanillaCalendar('#datepicker', {
             if(enableCalendarHighlight){
                 webviewApi.postMessage({"type": "noteExists", "date": date}).then(res => {
                     if(res){
-                        HTMLButtonElement.style["border"] = `1px solid ${calendarHighlightColor}`
-                        HTMLButtonElement.style["margin"] = "1px"
+                        HTMLButtonElement.classList.add("vanilla-calendar-day_noted");
                     }
                 })
             }

diff --git a/src/index.ts b/src/index.ts
@@ -232,6 +232,7 @@ joplin.plugins.register({
 		await dialogs.addScript(dialog, "./vanilla-calendar.min.css");
 		await dialogs.addScript(dialog, "./light.min.css");
 		await dialogs.addScript(dialog, "./dark.min.css");
+		await dialogs.addScript(dialog, "vnilla-calendar-ext.css");
 		await dialogs.addScript(dialog, "./calendar.js");
 		await dialogs.setButtons(dialog, [
 			{ id: "ok", title: "OK" },
@@ -243,9 +244,8 @@ joplin.plugins.register({
 			const timeFmt = await joplin.settings.value('TimeFmt') || 0;
 			const theme = await joplin.settings.value('Theme') || "light"
 			const enableWeekNum = await joplin.settings.value('WeekNum') || false
-			const calendarHighlightColor = await joplin.settings.value('HighlightCalendarColor')
 			const enableCalendarHighlight = await joplin.settings.value("HighlightCalendar")
-			await dialogs.setHtml(dialog, `<form name="picker"><div id="datepicker" iso8601=${iso8601} timeFmt=${timeFmt} theme=${theme} weekNum=${enableWeekNum} calendarHighlightColor=${calendarHighlightColor} enableCalendarHighlight=${enableCalendarHighlight}></div><input id="j_date" name="date" type="hidden"><input id="j_time" name="time" type="hidden"></form>`);
+			await dialogs.setHtml(dialog, `<form name="picker"><div id="datepicker" iso8601=${iso8601} timeFmt=${timeFmt} theme=${theme} weekNum=${enableWeekNum} enableCalendarHighlight=${enableCalendarHighlight}></div><input id="j_date" name="date" type="hidden"><input id="j_time" name="time" type="hidden"></form>`);
 			joplin.views.panels.onMessage(dialog, async (msg) => {
 				if(msg.type == "noteExists"){
 					// Convert the date to local time
@@ -461,15 +461,6 @@ joplin.plugins.register({
 				label: 'Enable Calendar Highlights',
 				description: "Highlight days with notes on the calendar",
 			},
-			'HighlightCalendarColor': {
-				value: "#7070ff",
-				type: SettingItemType.String,
-				section: 'Journal',
-				public: true,
-				advanced: true,
-				label: 'Calendar Highlight Color',
-				description: "CSS color of calendar highlight",
-			},
 		});
 
 		await joplin.commands.register({

diff --git a/src/vnilla-calendar-ext.css b/src/vnilla-calendar-ext.css
@@ -0,0 +1,9 @@
+.vanilla-calendar-day_noted::after {
+    content: '';
+    position: absolute;
+    bottom: 0px;
+    width: 6px;
+    height: 6px;
+    border-radius: 3px;
+    background-color: gray;
+}