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">

src/components/MiniCalendar.vue

@@ -4,6 +4,10 @@ defineProps({
     type: String,
     required: true,
   },
+  yearLabel: {
+    type: String,
+    required: true,
+  },
   days: {
     type: Array,
     required: true,
@@ -12,16 +16,59 @@ defineProps({
     type: String,
     required: true,
   },
+  markedKeys: {
+    type: Array,
+    required: true,
+  },
 })
 
-const emit = defineEmits(['select'])
+const emit = defineEmits(['select', 'shift-month', 'shift-year'])
 </script>
 
 <template>
   <section class="border border-stone-200 bg-white/80 p-5">
-    <div class="mb-4 flex items-center justify-between">
-      <h2 class="text-[11px] font-bold tracking-[0.22em] text-ink">CALENDAR</h2>
-      <span class="text-[11px] font-semibold tracking-[0.16em] text-stone-500">{{ monthLabel }}</span>
+    <div class="mb-4 flex items-start justify-between gap-4">
+      <div>
+        <h2 class="text-[11px] font-bold tracking-[0.22em] text-ink">CALENDAR</h2>
+        <div class="mt-2 space-y-1">
+          <p class="text-base font-semibold tracking-[-0.04em] text-stone-900">{{ monthLabel }}</p>
+          <p class="text-[11px] font-semibold tracking-[0.16em] text-stone-500">{{ yearLabel }}</p>
+        </div>
+      </div>
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="rounded-full border border-stone-200 px-3 py-1 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
+            @click="emit('shift-year', -1)"
+          >
+            -1Y
+          </button>
+          <button
+            type="button"
+            class="rounded-full border border-stone-200 px-3 py-1 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
+            @click="emit('shift-year', 1)"
+          >
+            +1Y
+          </button>
+        </div>
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="rounded-full border border-stone-200 px-3 py-1 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
+            @click="emit('shift-month', -1)"
+          >
+            PREV
+          </button>
+          <button
+            type="button"
+            class="rounded-full border border-stone-200 px-3 py-1 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
+            @click="emit('shift-month', 1)"
+          >
+            NEXT
+          </button>
+        </div>
+      </div>
     </div>
     <div class="mb-3 grid grid-cols-7 gap-2 text-center text-[10px] font-bold tracking-[0.12em] text-stone-400">
       <span v-for="weekday in ['S', 'M', 'T', 'W', 'T', 'F', 'S']" :key="weekday">{{ weekday }}</span>
@@ -40,7 +87,13 @@ const emit = defineEmits(['select'])
         ]"
         @click="emit('select', day.date)"
       >
-        {{ day.label }}
+        <span class="relative flex h-full w-full items-center justify-center">
+          <span>{{ day.label }}</span>
+          <span
+            v-if="markedKeys.includes(day.key)"
+            class="absolute bottom-[3px] h-[5px] w-[5px] rounded-full bg-red-500"
+          />
+        </span>
       </button>
     </div>
   </section>