v0.0.5

src/App.vue

@@ -5,6 +5,7 @@ import PlannerPage from './components/PlannerPage.vue'
 
 const viewMode = ref('focus')
 const selectedDate = ref(new Date())
+const calendarViewDate = ref(new Date(selectedDate.value))
 
 const hours = [
   '6', '7', '8', '9', '10', '11', '12',
@@ -182,11 +183,13 @@ const secondaryDate = computed(() => {
 const secondaryPlanner = computed(() => getPlannerRecord(secondaryDate.value))
 
 const monthLabel = computed(() =>
-  `${selectedDate.value.getFullYear()}.${`${selectedDate.value.getMonth() + 1}`.padStart(2, '0')}`,
+  `${calendarViewDate.value.getMonth() + 1}`.padStart(2, '0'),
 )
 
+const yearLabel = computed(() => `${calendarViewDate.value.getFullYear()}`)
+
 const calendarDays = computed(() => {
-  const base = selectedDate.value
+  const base = calendarViewDate.value
   const first = new Date(base.getFullYear(), base.getMonth(), 1)
   const start = new Date(first)
   start.setDate(first.getDate() - first.getDay())
@@ -203,6 +206,12 @@ const calendarDays = computed(() => {
   })
 })
 
+const markedDateKeys = computed(() =>
+  Object.entries(plannerRecords)
+    .filter(([, record]) => hasPlannerContent(record))
+    .map(([key]) => key),
+)
+
 const completedTasks = computed(() => planner.value.tasks.filter((task) => task.checked).length)
 const completionRate = computed(() => Math.round((completedTasks.value / planner.value.tasks.length) * 100))
 
@@ -219,6 +228,24 @@ function shiftDate(amount) {
   const next = new Date(selectedDate.value)
   next.setDate(next.getDate() + amount)
   selectedDate.value = next
+  calendarViewDate.value = new Date(next)
+}
+
+function shiftCalendarMonth(amount) {
+  const next = new Date(calendarViewDate.value)
+  next.setMonth(next.getMonth() + amount)
+  calendarViewDate.value = next
+}
+
+function shiftCalendarYear(amount) {
+  const next = new Date(calendarViewDate.value)
+  next.setFullYear(next.getFullYear() + amount)
+  calendarViewDate.value = next
+}
+
+function selectDate(date) {
+  selectedDate.value = new Date(date)
+  calendarViewDate.value = new Date(date)
 }
 
 function updateComment(record, value) {
@@ -240,6 +267,15 @@ function updateMemo(record, { index, value }) {
 function updateTimetable(record, nextTimetable) {
   record.timetable = nextTimetable
 }
+
+function hasPlannerContent(record) {
+  return Boolean(
+    record.comment.trim() ||
+    record.tasks.some((task) => task.title.trim() || task.checked) ||
+    record.memo.some((item) => item.trim()) ||
+    record.timetable.some(Boolean),
+  )
+}
 </script>
 
 <template>
@@ -344,9 +380,13 @@ function updateTimetable(record, nextTimetable) {
 
           <MiniCalendar
             :month-label="monthLabel"
+            :year-label="yearLabel"
             :days="calendarDays"
             :selected-key="toKey(selectedDate)"
-            @select="selectedDate = $event"
+            :marked-keys="markedDateKeys"
+            @shift-month="shiftCalendarMonth"
+            @shift-year="shiftCalendarYear"
+            @select="selectDate"
           />
 
           <section class="grid grid-cols-2 gap-4">