feat: show daily log in calendar

src/App.tsx

@@ -6,11 +6,76 @@ import day from 'dayjs'
 import 'tui-calendar/dist/tui-calendar.css'
 import 'antd/dist/antd.css'
 import './App.css'
+import { getSchedules } from './util'
+
+var templates = {
+  popupIsAllDay: function() {
+    return 'All Day';
+  },
+  popupStateFree: function() {
+    return 'Free';
+  },
+  popupStateBusy: function() {
+    return 'Busy';
+  },
+  titlePlaceholder: function() {
+    return 'Subject';
+  },
+  locationPlaceholder: function() {
+    return 'Location';
+  },
+  startDatePlaceholder: function() {
+    return 'Start date';
+  },
+  endDatePlaceholder: function() {
+    return 'End date';
+  },
+  popupSave: function() {
+    return 'Save';
+  },
+  popupUpdate: function() {
+    return 'Update';
+  },
+  popupDetailDate: function(isAllDay, start, end) {
+    var isSameDate = day(start).isSame(end);
+    var endFormat = (isSameDate ? '' : 'YYYY.MM.DD ') + 'hh:mm a';
+
+    if (isAllDay) {
+      return day(start).format('YYYY.MM.DD') + (isSameDate ? '' : ' - ' + day(end).format('YYYY.MM.DD'));
+    }
+
+    return (day(start).format('YYYY.MM.DD hh:mm a') + ' - ' + day(end).format(endFormat));
+  },
+  popupDetailLocation: function(schedule) {
+    return 'Location : ' + schedule.location;
+  },
+  popupDetailUser: function(schedule) {
+    return 'User : ' + (schedule.attendees || []).join(', ');
+  },
+  popupDetailState: function(schedule) {
+    return 'State : ' + schedule.state || 'Busy';
+  },
+  popupDetailRepeat: function(schedule) {
+    return 'Repeat : ' + schedule.recurrenceRule;
+  },
+  popupDetailBody: function(schedule) {
+    return 'Body : ' + schedule.body;
+  },
+  popupEdit: function() {
+    return 'Edit';
+  },
+  popupDelete: function() {
+    return 'Delete';
+  }
+};
 
 const DEFAULT_OPTIONS = {
   defaultView: 'month',
   taskView: true,
   scheduleView: true,
+  // template: templates,
+  useDetailPopup: true,
+  isReadOnly: true,
 }
 
 const App: React.FC<{ env: string }> = ({ env }) => {
@@ -29,6 +94,32 @@ const App: React.FC<{ env: string }> = ({ env }) => {
       }
     }
   }
+  const setSchedules = async () => {
+    const calendar = calendarRef.current
+    if (calendar) {
+      calendar.clear()
+
+      const schedules = await getSchedules() || []
+      calendar.createSchedules(schedules?.map(block => {
+        const date = block?.page?.journalDay
+        const time = block.content?.substr(0, 5)
+        const hasTime = time.split(':')?.filter(num => !Number.isNaN(Number(num)))?.length === 2
+        return {
+          id: block.id,
+          calendarId: 'journal',
+          title: block.content,
+          category: hasTime ? 'time' : 'allday',
+          dueDateClass: '',
+          start: hasTime ? day(date + ' ' + time, 'YYYYMMDD HH:mm').format() : day(String(date), 'YYYYMMDD').format(),
+          // end: hasTime ? day(date + ' ' + time, 'YYYYMMDD HH:mm').add(1, 'hour').format() : day(date, 'YYYYMMDD').add(1, 'day').format(),
+          isAllDay: !hasTime,
+        }
+      }))
+
+      calendar.render()
+
+    }
+  }
 
   const onViewChange = (value: string) => {
     console.log('[faiz:] === onViewChange',value, calendarRef.current)
@@ -58,25 +149,30 @@ const App: React.FC<{ env: string }> = ({ env }) => {
       // }
     })
     changeShowDate()
+    setSchedules()
   }, [])
 
   return (
-    <div className="w-screen h-screen flex items-center justify-center text-white">
-      <div className="w-screen h-screen fixed top-0 left-0" onClick={() => logseq.hideMainUI()}></div>
-      <div className="w-5/6 h-5/6 flex flex-col overflow-hidden">
-        <div className="mb-2 flex items-center">
-          <Select defaultValue={DEFAULT_OPTIONS.defaultView} onChange={onViewChange} style={{ width: '150px' }}>
-            <Select.Option value="day">Daily</Select.Option>
-            <Select.Option value="week">Weekly</Select.Option>
-            <Select.Option value="month">Monthly</Select.Option>
-          </Select>
-
-          <Button className="ml-4" shape="round" onClick={onClickToday}>Today</Button>
-
-          <Button className="ml-4" shape="circle" icon={<LeftOutlined />} onClick={onClickPrev}></Button>
-          <Button className="ml-1" shape="circle" icon={<RightOutlined />} onClick={onClickNext}></Button>
-
-          <span className="ml-4 text-black text-xl">{ showDate }</span>
+    <div className="w-screen h-screen flex items-center justify-center">
+      <div className="w-screen h-screen fixed top-0 left-0 bg-black bg-opacity-50" onClick={() => logseq.hideMainUI()}></div>
+      <div className="w-5/6 h-5/6 flex flex-col overflow-hidden bg-white relative rounded text-black p-3">
+        <div className="mb-2 flex items-center justify-between">
+          <div>
+            <Select defaultValue={DEFAULT_OPTIONS.defaultView} onChange={onViewChange} style={{ width: '150px' }}>
+              <Select.Option value="day">Daily</Select.Option>
+              <Select.Option value="week">Weekly</Select.Option>
+              <Select.Option value="month">Monthly</Select.Option>
+            </Select>
+
+            <Button className="ml-4" shape="round" onClick={onClickToday}>Today</Button>
+
+            <Button className="ml-4" shape="circle" icon={<LeftOutlined />} onClick={onClickPrev}></Button>
+            <Button className="ml-1" shape="circle" icon={<RightOutlined />} onClick={onClickNext}></Button>
+
+            <span className="ml-4 text-xl">{ showDate }</span>
+          </div>
+
+          <Button onClick={setSchedules} type="primary">Sync</Button>
         </div>
         <div id="calendar"></div>
       </div>

src/index.css

@@ -1,4 +1,3 @@
-@tailwind base;
 @tailwind components;
 @tailwind utilities;
 

src/util.ts

@@ -1,5 +1,11 @@
-export const getDailyLog = async () => {
+export const getSchedules = async () => {
+  console.log('[faiz:] === getSchedules start ===')
   const keyword = logseq.settings?.logKey || 'Daily Log'
-  const schedules = await logseq.DB.q(`{{query [[${keyword}]]}}`)
-  console.log('[faiz:] === schedules', schedules)
+  const schedules = await logseq.DB.q(`[[${keyword}]]`)
+  const validSchedules = schedules?.filter(s => {
+    const _content = s.content?.trim()
+    return _content.length > 0 && _content !== `[[${keyword}]]` && s?.page?.journalDay
+  })
+  console.log('[faiz:] === validSchedules', validSchedules)
+  return validSchedules
 }