diff --git a/src/calendar-view/CalendarView.vue b/src/calendar-view/CalendarView.vue
index 506e1a8..98dfca6 100644
--- a/src/calendar-view/CalendarView.vue
+++ b/src/calendar-view/CalendarView.vue
@@ -2,18 +2,16 @@
 import { computed, ref } from "vue";
 import ObsidianIconButton from "../components/obsidian/ObsidianIconButton.vue";
 import ObsidianButton from "../components/obsidian/ObsidianButton.vue";
-import CalendarMonth from "../components/calendar/CalendarMonth.vue";
 import DatePickerModal from "../components/modals/DatePicker.modal.vue";
 import { VueModal } from "../components/modals/vue-modal";
 import { today, date_from_string } from "../calendar";
 import { openDate } from "@/journals/open-date";
-import CalendarMonthButton from "@/components/calendar/CalendarMonthButton.vue";
-import CalendarYearButton from "@/components/calendar/CalendarYearButton.vue";
-import CalendarQuarterButton from "@/components/calendar/CalendarQuarterButton.vue";
 import { ShelfSuggestModal } from "@/components/suggests/shelf-suggest";
 import { useShelfProvider } from "@/composables/use-shelf";
 import { useApp } from "@/composables/use-app";
 import { usePlugin } from "@/composables/use-plugin";
+import NotesMonthView from "@/components/notes-calendar/NotesMonthView.vue";
+import NotesCalendarButton from "@/components/notes-calendar/NotesCalendarButton.vue";
 
 const app = useApp();
 const plugin = usePlugin();
@@ -38,13 +36,6 @@ const shouldShowShelf = computed(() => {
 
 const { journals } = useShelfProvider(selectedShelf);
 
-const daysClickable = computed(() => {
-  return journals.day.value.length > 0;
-});
-const weeksClickable = computed(() => {
-  return journals.week.value.length > 0;
-});
-
 function selectShelf() {
   new ShelfSuggestModal(
     app,
@@ -97,38 +88,6 @@ function openDay(date: string, event: MouseEvent) {
     event,
   ).catch(console.error);
 }
-function openWeek(date: string, event: MouseEvent) {
-  openDate(
-    plugin,
-    date,
-    journals.week.value.map((journal) => journal.name),
-    event,
-  ).catch(console.error);
-}
-function openMonth(event: MouseEvent) {
-  openDate(
-    plugin,
-    refDate.value,
-    journals.month.value.map((journal) => journal.name),
-    event,
-  ).catch(console.error);
-}
-function openQuarter(event: MouseEvent) {
-  openDate(
-    plugin,
-    refDate.value,
-    journals.quarter.value.map((journal) => journal.name),
-    event,
-  ).catch(console.error);
-}
-function openYear(event: MouseEvent) {
-  openDate(
-    plugin,
-    refDate.value,
-    journals.year.value.map((journal) => journal.name),
-    event,
-  ).catch(console.error);
-}
 // TODO slim header to avoid scroll
 </script>
 
@@ -141,44 +100,35 @@ function openYear(event: MouseEvent) {
       <ObsidianIconButton icon="crosshair" tooltip="Select a date to be displayed" @click="pickDate" />
       <ObsidianButton @click="goToday">Today</ObsidianButton>
     </div>
-    <CalendarMonth
-      :ref-date="refDate"
-      :select-days="daysClickable"
-      :select-weeks="weeksClickable"
-      @select="openDay"
-      @select-week="openWeek"
-    >
+    <NotesMonthView :ref-date="refDate">
       <template #header>
         <ObsidianIconButton icon="chevrons-left" tooltip="Previous year" @click="navigate(-1, 'year')" />
         <ObsidianIconButton icon="chevron-left" tooltip="Previous month" @click="navigate(-1, 'month')" />
-        <div class="calendar-month-header">
-          <CalendarMonthButton :date="refDateMoment" @select="openMonth" />
-          <CalendarQuarterButton v-if="journals.quarter.value.length > 0" :date="refDateMoment" @select="openQuarter" />
-          <CalendarYearButton :date="refDateMoment" @select="openYear" />
+        <div class="month-header">
+          <NotesCalendarButton :date="refDate" type="month" />
+          <NotesCalendarButton v-if="journals.quarter.value.length > 0" :date="refDate" type="quarter" />
+          <NotesCalendarButton :date="refDate" type="year" />
         </div>
 
         <ObsidianIconButton icon="chevron-right" tooltip="Next month" @click="navigate(1, 'month')" />
         <ObsidianIconButton icon="chevrons-right" tooltip="Next year" @click="navigate(1, 'year')" />
       </template>
-    </CalendarMonth>
+    </NotesMonthView>
   </div>
 </template>
 
 <style scoped>
 .calendar-view-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding-bottom: 12px;
+  justify-content: space-between;
+  gap: var(--size-2-2);
 }
-.calendar-month-header {
+.month-header {
+  flex: 1;
   display: flex;
+  gap: var(--size-2-2);
   align-items: center;
-  gap: 2px;
-}
-.header-non-interactive {
-  color: var(--icon-color);
-  opacity: var(--icon-opacity);
-  font-size: var(--font-ui-small);
+  justify-content: center;
 }
 </style>
diff --git a/src/calendar.ts b/src/calendar.ts
index 7099dfe..8b20cdd 100644
--- a/src/calendar.ts
+++ b/src/calendar.ts
@@ -1,7 +1,6 @@
 import { moment } from "obsidian";
 import { extractCurrentlocaleData } from "./utils/moment";
 import type { MomentDate } from "./types/date.types";
-import { computed } from "vue";
 
 const CUSTOM_LOCALE = "custom-journal-locale";
 let initialWeekSettings: { dow: number; doy: number } | undefined;
@@ -47,18 +46,15 @@ export function today(): MomentDate {
   return md.startOf("day");
 }
 
-export const weekdayNames = computed(() => {
-  const weekdayNames: string[] = [];
-  const week = today().startOf("week");
-  const weekEnd = today().endOf("week");
-
-  while (week.isSameOrBefore(weekEnd)) {
-    weekdayNames.push(week.format("ddd"));
-    week.add(1, "day");
-  }
-
-  return weekdayNames;
-});
+export function isSamePeriod(
+  period: moment.unitOfTime.StartOf,
+  a: string | MomentDate,
+  b: string | MomentDate,
+): boolean {
+  const date1 = typeof a === "string" ? date_from_string(a) : a;
+  const date2 = typeof b === "string" ? date_from_string(b) : b;
+  return date1.isSame(date2, period);
+}
 
 export function dateDistance(fromDate: string, toDate: string): number {
   const from = date_from_string(fromDate);
diff --git a/src/code-blocks/timeline/TimelineCalendar.vue b/src/code-blocks/timeline/TimelineCalendar.vue
index 8b441c3..cb070e8 100644
--- a/src/code-blocks/timeline/TimelineCalendar.vue
+++ b/src/code-blocks/timeline/TimelineCalendar.vue
@@ -3,10 +3,7 @@ import { date_from_string, today } from "@/calendar";
 import type { JournalNoteData } from "@/types/journal.types";
 import { computed } from "vue";
 
-import CalendarMonth from "@/components/calendar/CalendarMonth.vue";
-import CalendarMonthButton from "@/components/calendar/CalendarMonthButton.vue";
-import CalendarQuarterButton from "@/components/calendar/CalendarQuarterButton.vue";
-import CalendarYearButton from "@/components/calendar/CalendarYearButton.vue";
+import NotesMonthView from "@/components/notes-calendar/NotesMonthView.vue";
 
 const props = defineProps<{
   noteData: JournalNoteData | null;
@@ -29,13 +26,7 @@ const list = computed(() => {
 
 <template>
   <div>
-    <CalendarMonth v-for="date in list" :key="date.format('YYYY-MM-DD')" :ref-date="date.format('YYYY-MM-DD')">
-      <template #header>
-        <CalendarMonthButton :date="date" />
-        <CalendarQuarterButton :date="date" />
-        <CalendarYearButton :date="date" />
-      </template>
-    </CalendarMonth>
+    <NotesMonthView v-for="date in list" :key="date.format('YYYY-MM-DD')" :ref-date="date.format('YYYY-MM-DD')" />
   </div>
 </template>
 
diff --git a/src/code-blocks/timeline/TimelineMonth.vue b/src/code-blocks/timeline/TimelineMonth.vue
index 4f17297..d412368 100644
--- a/src/code-blocks/timeline/TimelineMonth.vue
+++ b/src/code-blocks/timeline/TimelineMonth.vue
@@ -1,34 +1,21 @@
 <script setup lang="ts">
 import type { JournalNoteData } from "@/types/journal.types";
-import CalendarMonth from "@/components/calendar/CalendarMonth.vue";
-import CalendarMonthButton from "@/components/calendar/CalendarMonthButton.vue";
-import CalendarQuarterButton from "@/components/calendar/CalendarQuarterButton.vue";
-import CalendarYearButton from "@/components/calendar/CalendarYearButton.vue";
-import { date_from_string, today } from "@/calendar";
+import { today } from "@/calendar";
 import { computed } from "vue";
+import NotesMonthView from "@/components/notes-calendar/NotesMonthView.vue";
 
-const props = defineProps<{
+const { noteData } = defineProps<{
   noteData: JournalNoteData | null;
 }>();
 
 const refDate = computed(() => {
-  if (!props.noteData) return today().format("YYYY-MM-DD");
-  return props.noteData.date;
-});
-
-const refDateMoment = computed(() => {
-  return date_from_string(refDate.value);
+  if (!noteData) return today().format("YYYY-MM-DD");
+  return noteData.date;
 });
 </script>
 
 <template>
-  <CalendarMonth :ref-date="refDate">
-    <template #header>
-      <CalendarMonthButton :date="refDateMoment" />
-      <CalendarQuarterButton :date="refDateMoment" />
-      <CalendarYearButton :date="refDateMoment" />
-    </template>
-  </CalendarMonth>
+  <NotesMonthView :ref-date="refDate" :selected-date="refDate" />
 </template>
 
 <style scoped></style>
diff --git a/src/code-blocks/timeline/TimelineQuarter.vue b/src/code-blocks/timeline/TimelineQuarter.vue
index 12ff7db..e5e9081 100644
--- a/src/code-blocks/timeline/TimelineQuarter.vue
+++ b/src/code-blocks/timeline/TimelineQuarter.vue
@@ -3,11 +3,7 @@ import { date_from_string, today } from "@/calendar";
 import type { JournalNoteData } from "@/types/journal.types";
 import { computed } from "vue";
 
-import CalendarMonth from "@/components/calendar/CalendarMonth.vue";
-import CalendarMonthButton from "@/components/calendar/CalendarMonthButton.vue";
-import CalendarQuarterButton from "@/components/calendar/CalendarQuarterButton.vue";
-import CalendarYearButton from "@/components/calendar/CalendarYearButton.vue";
-
+import NotesMonthView from "@/components/notes-calendar/NotesMonthView.vue";
 const props = defineProps<{
   noteData: JournalNoteData | null;
 }>();
@@ -29,13 +25,7 @@ const list = computed(() => {
 
 <template>
   <div>
-    <CalendarMonth v-for="date in list" :key="date.format('YYYY-MM-DD')" :ref-date="date.format('YYYY-MM-DD')">
-      <template #header>
-        <CalendarMonthButton :date="date" />
-        <CalendarQuarterButton :date="date" />
-        <CalendarYearButton :date="date" />
-      </template>
-    </CalendarMonth>
+    <NotesMonthView v-for="date in list" :key="date.format('YYYY-MM-DD')" :ref-date="date.format('YYYY-MM-DD')" />
   </div>
 </template>
 
diff --git a/src/code-blocks/timeline/TimelineWeek.vue b/src/code-blocks/timeline/TimelineWeek.vue
index faee266..df16e62 100644
--- a/src/code-blocks/timeline/TimelineWeek.vue
+++ b/src/code-blocks/timeline/TimelineWeek.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { today } from "@/calendar";
-import CalendarWeek from "@/components/calendar/CalendarWeek.vue";
 import type { JournalNoteData } from "@/types/journal.types";
 import { computed } from "vue";
+import NotesWeekView from "@/components/notes-calendar/NotesWeekView.vue";
 
 const props = defineProps<{
   noteData: JournalNoteData | null;
@@ -15,9 +15,7 @@ const refDate = computed(() => {
 </script>
 
 <template>
-  <div>
-    <CalendarWeek :ref-date="refDate" />
-  </div>
+  <NotesWeekView :ref-date="refDate" :selected-date="refDate" />
 </template>
 
 <style scoped></style>
diff --git a/src/components/CollapsibleBlock.vue b/src/components/CollapsibleBlock.vue
index 0a53103..9201803 100644
--- a/src/components/CollapsibleBlock.vue
+++ b/src/components/CollapsibleBlock.vue
@@ -16,7 +16,7 @@ function toggle() {
 </script>
 
 <template>
-  <div class="collapsible-root" :data-open="expanded ? true : undefined">
+  <div class="collapsible-root" :data-open="expanded || null">
     <div class="collapsible-trigger">
       <ObsidianIcon :name="icon" @click="toggle" />
       <span class="collapsible-trigger-text" @click="toggle">
diff --git a/src/components/calendar/CalendarButton.vue b/src/components/calendar/CalendarButton.vue
new file mode 100644
index 0000000..66d5163
--- /dev/null
+++ b/src/components/calendar/CalendarButton.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{ disabled?: boolean; clickable?: boolean }>();
+</script>
+
+<template>
+  <button :disabled :class="{ clickable }">
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+button {
+  background-color: transparent;
+  box-shadow: none;
+}
+.clickable {
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/calendar/CalendarDay.vue b/src/components/calendar/CalendarDay.vue
deleted file mode 100644
index b913c0a..0000000
--- a/src/components/calendar/CalendarDay.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { inject, toRefs } from "vue";
-import type { MomentDate } from "../../types/date.types";
-import { useDecorations } from "@/composables/use-decorations";
-import CalendarDecoration from "./CalendarDecoration.vue";
-import { SHELF_DATA_KEY } from "@/constants";
-const props = defineProps<{
-  date: MomentDate;
-}>();
-
-const { date } = toRefs(props);
-const { decorations } = inject(SHELF_DATA_KEY);
-const decorationsStyles = useDecorations(date, decorations.day);
-</script>
-
-<template>
-  <button>
-    <CalendarDecoration :styles="decorationsStyles">
-      {{ date.format("D") }}
-    </CalendarDecoration>
-  </button>
-</template>
-
-<style scoped>
-button {
-  background-color: transparent;
-  box-shadow: none;
-}
-</style>
diff --git a/src/components/calendar/CalendarDecade.vue b/src/components/calendar/CalendarDecade.vue
deleted file mode 100644
index 48e8256..0000000
--- a/src/components/calendar/CalendarDecade.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script setup lang="ts">
-import { computed, toRefs } from "vue";
-import { date_from_string } from "../../calendar";
-import { useDecade } from "./use-decade";
-
-const props = defineProps<{
-  refDate: string;
-}>();
-defineEmits<(event: "select", date: string) => void>();
-
-const { refDate } = toRefs(props);
-const momentDate = computed(() => date_from_string(refDate.value));
-
-const { grid, startYear, endYear } = useDecade(refDate);
-</script>
-
-<template>
-  <div class="calendar-decade">
-    <div class="calendar-decade-header">
-      <slot name="header" :start-year="startYear" :end-year="endYear">
-        <div>{{ startYear }} - {{ endYear }}</div>
-      </slot>
-    </div>
-    <div class="calendar-decade-grid">
-      <button
-        v-for="year of grid"
-        :key="year.key"
-        :class="{ 'year--selected': year.date.isSame(momentDate, 'year'), 'year--outside': year.outside }"
-        @click="$emit('select', year.key)"
-      >
-        {{ year.date.format("YYYY") }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.calendar-decade-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px;
-  margin-bottom: 6px;
-}
-.calendar-decade-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 6px;
-}
-button {
-  cursor: pointer;
-  background-color: transparent;
-  box-shadow: none;
-}
-.year--selected {
-  background-color: var(--interactive-accent);
-  color: var(--text-on-accent);
-}
-.year--outside {
-  color: var(--code-comment);
-}
-</style>
diff --git a/src/components/calendar/CalendarDecadeView.vue b/src/components/calendar/CalendarDecadeView.vue
new file mode 100644
index 0000000..863404f
--- /dev/null
+++ b/src/components/calendar/CalendarDecadeView.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useDecade } from "@/composables/use-decade";
+import { isSamePeriod } from "@/calendar";
+import CalendarGrid from "./CalendarGrid.vue";
+import CalendarButton from "./CalendarButton.vue";
+
+const { refDate } = defineProps<{
+  refDate: string;
+}>();
+defineEmits<(event: "select", date: string) => void>();
+
+const { grid, startYear, endYear } = useDecade(computed(() => refDate));
+</script>
+
+<template>
+  <CalendarGrid :columns="4">
+    <template #header>
+      <slot name="header" :start-year="startYear" :end-year="endYear">
+        <div>{{ startYear }} - {{ endYear }}</div>
+      </slot>
+    </template>
+
+    <CalendarButton
+      v-for="year of grid"
+      :key="year.key"
+      clickable
+      :data-selected="isSamePeriod('year', year.date, refDate) || null"
+      :data-outside="year.outside || null"
+      @click="$emit('select', year.key)"
+    >
+      {{ year.date }}
+    </CalendarButton>
+  </CalendarGrid>
+</template>
diff --git a/src/components/calendar/CalendarGrid.vue b/src/components/calendar/CalendarGrid.vue
new file mode 100644
index 0000000..2b07311
--- /dev/null
+++ b/src/components/calendar/CalendarGrid.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+defineProps<{ columns: number }>();
+</script>
+
+<template>
+  <div class="calendar">
+    <div class="calendar-header">
+      <slot name="header"> </slot>
+    </div>
+    <div class="calendar-grid">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  margin-bottom: 6px;
+}
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(v-bind(columns), 1fr);
+  gap: 6px;
+}
+
+.calendar-grid > * {
+  font-size: 0.7em;
+  border: 1px solid transparent;
+  height: 28px;
+  line-height: 26px;
+  text-align: center;
+  padding: 0;
+}
+
+.calendar :deep([data-outside]) {
+  color: var(--code-comment);
+}
+.calendar :deep([data-today]) {
+  color: var(--text-accent);
+  font-weight: 600;
+}
+.calendar :deep([data-selected]) {
+  background-color: var(--interactive-accent);
+  color: var(--text-on-accent);
+}
+</style>
diff --git a/src/components/calendar/CalendarMonth.vue b/src/components/calendar/CalendarMonth.vue
deleted file mode 100644
index c4a8c18..0000000
--- a/src/components/calendar/CalendarMonth.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<script setup lang="ts">
-import { computed, toRefs } from "vue";
-import { useMonth } from "./use-month";
-import { date_from_string, weekdayNames } from "../../calendar";
-import CalendarDay from "./CalendarDay.vue";
-import CalendarWeekNumber from "./CalendarWeekNumber.vue";
-import { usePlugin } from "@/composables/use-plugin";
-
-const props = withDefaults(
-  defineProps<{
-    refDate: string;
-    selectedDate?: string | null;
-    selectDays?: boolean;
-    selectWeeks?: boolean;
-  }>(),
-  {
-    selectedDate: null,
-    selectDays: true,
-    selectWeeks: false,
-  },
-);
-defineEmits<(event: "select" | "selectWeek", date: string, nativeEvent: MouseEvent) => void>();
-
-const plugin = usePlugin();
-
-const { refDate } = toRefs(props);
-const momentDate = computed(() => date_from_string(refDate.value));
-
-const { grid } = useMonth(refDate);
-</script>
-
-<template>
-  <div class="calendar-month">
-    <div class="calendar-month-header">
-      <slot name="header">
-        <div>{{ momentDate.format("MMMM YYYY") }}</div>
-      </slot>
-    </div>
-    <div class="calendar-month-grid" :class="[`weeks-${plugin.calendarViewSettings.weeks}`]">
-      <div v-if="plugin.calendarViewSettings.weeks === 'left'"></div>
-      <div v-for="day of weekdayNames" :key="day" class="calendar-month-grid-week-day">
-        {{ day }}
-      </div>
-      <div v-if="plugin.calendarViewSettings.weeks === 'right'"></div>
-
-      <template v-for="uiDate of grid" :key="uiDate.key">
-        <CalendarWeekNumber
-          v-if="uiDate.isWeekNumber"
-          :date="uiDate.date"
-          class="calendar-week-number"
-          :class="{
-            'calendar-clickable': selectWeeks,
-          }"
-          @click="selectWeeks && $emit('selectWeek', uiDate.date.format('YYYY-MM-DD'), $event)"
-        />
-        <CalendarDay
-          v-else
-          :date="uiDate.date"
-          class="calendar-day"
-          :class="{
-            'calendar-day--outside': uiDate.outside,
-            'calendar-day--today': uiDate.today,
-            'calendar-day--selected': selectedDate === uiDate.key,
-            'calendar-clickable': selectDays,
-          }"
-          @click="selectDays && $emit('select', uiDate.date.format('YYYY-MM-DD'), $event)"
-        />
-      </template>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.calendar-month-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px;
-  margin-bottom: 6px;
-}
-.calendar-month-grid {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  gap: 1px;
-}
-.calendar-month-grid.weeks-none {
-  grid-template-columns: repeat(7, 1fr);
-}
-
-.calendar-week-number,
-.calendar-day,
-.calendar-month-grid-week-day {
-  font-size: 0.7em;
-  border: 1px solid transparent;
-  height: 28px;
-  line-height: 26px;
-  text-align: center;
-  padding: 0;
-}
-.calendar-day--outside {
-  color: var(--code-comment);
-}
-.calendar-day--today {
-  color: var(--text-accent);
-  font-weight: 600;
-}
-.calendar-day--selected {
-  background-color: var(--interactive-accent);
-  color: var(--text-on-accent);
-}
-.calendar-clickable {
-  cursor: pointer;
-}
-</style>
diff --git a/src/components/calendar/CalendarMonthButton.vue b/src/components/calendar/CalendarMonthButton.vue
deleted file mode 100644
index c43ffd1..0000000
--- a/src/components/calendar/CalendarMonthButton.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { useDecorations } from "@/composables/use-decorations";
-import type { MomentDate } from "@/types/date.types";
-import CalendarDecoration from "./CalendarDecoration.vue";
-import ObsidianButton from "../obsidian/ObsidianButton.vue";
-import { inject, toRefs } from "vue";
-import { SHELF_DATA_KEY } from "@/constants";
-
-const props = defineProps<{
-  date: MomentDate;
-}>();
-const { date } = toRefs(props);
-const emit = defineEmits<(event: "select", nativeEvent: MouseEvent, date: MomentDate) => void>();
-
-const { journals, decorations } = inject(SHELF_DATA_KEY);
-const decorationsStyles = useDecorations(date, decorations.month);
-function select(event: MouseEvent) {
-  if (journals.month.value.length === 0) {
-    return;
-  }
-  emit("select", event, props.date);
-}
-</script>
-
-<template>
-  <ObsidianButton class="month-button" flat :disabled="journals.month.value.length === 0" @click="select">
-    <CalendarDecoration :styles="decorationsStyles">{{ date.format("MMMM") }}</CalendarDecoration>
-  </ObsidianButton>
-</template>
-
-<style scoped>
-.month-button {
-  background-color: transparent;
-  box-shadow: none;
-  position: relative;
-}
-.month-button:disabled {
-  opacity: 1;
-  cursor: auto;
-}
-</style>
diff --git a/src/components/calendar/CalendarMonthView.vue b/src/components/calendar/CalendarMonthView.vue
new file mode 100644
index 0000000..b286b10
--- /dev/null
+++ b/src/components/calendar/CalendarMonthView.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { usePlugin } from "@/composables/use-plugin";
+import { useMonth } from "@/composables/use-month";
+import FormattedDate from "./FormattedDate.vue";
+import CalendarGrid from "./CalendarGrid.vue";
+import CalendarButton from "./CalendarButton.vue";
+import CalendarWeekdays from "./CalendarWeekdays.vue";
+
+const { refDate } = defineProps<{
+  refDate: string;
+  selectedDate?: string | null;
+}>();
+defineEmits<(event: "select", date: string, nativeEvent: MouseEvent) => void>();
+
+const plugin = usePlugin();
+const columns = computed(() => (plugin.calendarViewSettings.weeks === "none" ? 7 : 8));
+
+const { grid } = useMonth(computed(() => refDate));
+</script>
+
+<template>
+  <CalendarGrid :columns>
+    <template #header>
+      <slot name="header">
+        <FormattedDate :date="refDate" format="MMMM YYYY" />
+      </slot>
+    </template>
+
+    <CalendarWeekdays />
+
+    <CalendarButton
+      v-for="uiDate of grid"
+      :key="uiDate.key + (uiDate.isWeekNumber ? 'week' : 'day')"
+      clickable
+      :data-outside="uiDate.outside || null"
+      :data-today="uiDate.today || null"
+      :data-selected="selectedDate === uiDate.key || null"
+      @click="$emit('select', uiDate.key, $event)"
+    >
+      {{ uiDate.date }}
+    </CalendarButton>
+  </CalendarGrid>
+</template>
diff --git a/src/components/calendar/CalendarQuarter.vue b/src/components/calendar/CalendarQuarter.vue
deleted file mode 100644
index cd0af13..0000000
--- a/src/components/calendar/CalendarQuarter.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import { computed, toRefs } from "vue";
-import { date_from_string } from "../../calendar";
-import { useQuarter } from "./use-quarter";
-
-const props = defineProps<{
-  refDate: string;
-}>();
-defineEmits<(event: "select", date: string) => void>();
-
-const { refDate } = toRefs(props);
-const momentDate = computed(() => date_from_string(refDate.value));
-
-const { grid } = useQuarter(refDate);
-</script>
-
-<template>
-  <div class="calendar-quarter">
-    <div class="calendar-quarter-header">
-      <slot name="header">
-        <div>{{ momentDate.format("YYYY") }}</div>
-      </slot>
-    </div>
-    <div class="calendar-quarter-grid">
-      <button
-        v-for="quarter of grid"
-        :key="quarter.key"
-        :class="{ 'quarter--selected': quarter.date.isSame(momentDate, 'quarter') }"
-        @click="$emit('select', quarter.key)"
-      >
-        {{ quarter.date.format("[Q]Q") }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.calendar-quarter-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px;
-  margin-bottom: 6px;
-}
-.calendar-quarter-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 6px;
-}
-button {
-  cursor: pointer;
-  background-color: transparent;
-  box-shadow: none;
-}
-.quarter--selected {
-  background-color: var(--interactive-accent);
-  color: var(--text-on-accent);
-}
-</style>
diff --git a/src/components/calendar/CalendarQuarterButton.vue b/src/components/calendar/CalendarQuarterButton.vue
deleted file mode 100644
index e82e6dc..0000000
--- a/src/components/calendar/CalendarQuarterButton.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { useDecorations } from "@/composables/use-decorations";
-import type { MomentDate } from "@/types/date.types";
-import CalendarDecoration from "./CalendarDecoration.vue";
-import ObsidianButton from "../obsidian/ObsidianButton.vue";
-import { inject, toRefs } from "vue";
-import { SHELF_DATA_KEY } from "@/constants";
-
-const props = defineProps<{
-  date: MomentDate;
-}>();
-const { date } = toRefs(props);
-const emit = defineEmits<(event: "select", nativeEvent: MouseEvent, date: MomentDate) => void>();
-
-const { journals, decorations } = inject(SHELF_DATA_KEY);
-const decorationsStyles = useDecorations(date, decorations.quarter);
-function select(event: MouseEvent) {
-  if (journals.quarter.value.length === 0) {
-    return;
-  }
-  emit("select", event, props.date);
-}
-</script>
-
-<template>
-  <ObsidianButton class="quarter-button" flat :disabled="journals.quarter.value.length === 0" @click="select">
-    <CalendarDecoration :styles="decorationsStyles">{{ date.format("[Q]Q") }}</CalendarDecoration>
-  </ObsidianButton>
-</template>
-
-<style scoped>
-.quarter-button {
-  background-color: transparent;
-  box-shadow: none;
-  position: relative;
-}
-.quarter-button:disabled {
-  opacity: 1;
-  cursor: auto;
-}
-</style>
diff --git a/src/components/calendar/CalendarQuarterView.vue b/src/components/calendar/CalendarQuarterView.vue
new file mode 100644
index 0000000..242b95c
--- /dev/null
+++ b/src/components/calendar/CalendarQuarterView.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { useQuarter } from "@/composables/use-quarter";
+import { computed } from "vue";
+import CalendarGrid from "./CalendarGrid.vue";
+import FormattedDate from "./FormattedDate.vue";
+import CalendarButton from "./CalendarButton.vue";
+import { isSamePeriod } from "@/calendar";
+
+const { refDate } = defineProps<{
+  refDate: string;
+}>();
+defineEmits<(event: "select", date: string) => void>();
+
+const { grid } = useQuarter(computed(() => refDate));
+</script>
+
+<template>
+  <CalendarGrid :columns="2">
+    <template #header>
+      <slot name="header">
+        <FormattedDate :date="refDate" format="YYYY" />
+      </slot>
+    </template>
+
+    <div class="calendar-quarter-grid">
+      <CalendarButton
+        v-for="quarter of grid"
+        :key="quarter.key"
+        clickable
+        :data-selected="isSamePeriod('quarter', quarter.date, refDate) || null"
+        @click="$emit('select', quarter.key)"
+      >
+        {{ quarter.date }}
+      </CalendarButton>
+    </div>
+  </CalendarGrid>
+</template>
diff --git a/src/components/calendar/CalendarWeek.vue b/src/components/calendar/CalendarWeek.vue
deleted file mode 100644
index eae158a..0000000
--- a/src/components/calendar/CalendarWeek.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<script setup lang="ts">
-import { toRefs } from "vue";
-import { weekdayNames } from "../../calendar";
-import CalendarDay from "./CalendarDay.vue";
-import CalendarWeekNumber from "./CalendarWeekNumber.vue";
-import { useWeek } from "./use-week";
-import { usePlugin } from "@/composables/use-plugin";
-
-const props = withDefaults(
-  defineProps<{
-    refDate: string;
-    selectedDate?: string | null;
-    selectDays: boolean;
-    selectWeeks: boolean;
-  }>(),
-  {
-    selectedDate: null,
-    selectDays: true,
-    selectWeeks: false,
-  },
-);
-defineEmits<(event: "select" | "selectWeek", date: string, nativeEvent: MouseEvent) => void>();
-
-const plugin = usePlugin();
-
-const { refDate } = toRefs(props);
-
-const { grid } = useWeek(refDate);
-</script>
-
-<template>
-  <div class="calendar-month">
-    <div class="calendar-month-grid" :class="[`weeks-${plugin.calendarViewSettings.weeks}`]">
-      <div v-if="plugin.calendarViewSettings.weeks === 'left'"></div>
-      <div v-for="day of weekdayNames" :key="day" class="calendar-month-grid-week-day">
-        {{ day }}
-      </div>
-      <div v-if="plugin.calendarViewSettings.weeks === 'right'"></div>
-
-      <template v-for="uiDate of grid" :key="uiDate.key">
-        <CalendarWeekNumber
-          v-if="uiDate.isWeekNumber"
-          :date="uiDate.date"
-          class="calendar-week-number"
-          :class="{
-            'calendar-clickable': selectWeeks,
-          }"
-          @click="selectWeeks && $emit('selectWeek', uiDate.date.format('YYYY-MM-DD'), $event)"
-        />
-        <CalendarDay
-          v-else
-          :date="uiDate.date"
-          class="calendar-day"
-          :class="{
-            'calendar-day--outside': uiDate.outside,
-            'calendar-day--today': uiDate.today,
-            'calendar-day--selected': selectedDate === uiDate.key,
-            'calendar-clickable': selectDays,
-          }"
-          @click="selectDays && $emit('select', uiDate.date.format('YYYY-MM-DD'), $event)"
-        />
-      </template>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.calendar-month-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px;
-  margin-bottom: 6px;
-}
-.calendar-month-grid {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  gap: 1px;
-}
-.calendar-month-grid.weeks-none {
-  grid-template-columns: repeat(7, 1fr);
-}
-
-.calendar-week-number,
-.calendar-day,
-.calendar-month-grid-week-day {
-  font-size: 0.7em;
-  border: 1px solid transparent;
-  height: 28px;
-  line-height: 26px;
-  text-align: center;
-  padding: 0;
-}
-.calendar-day--outside {
-  color: var(--code-comment);
-}
-.calendar-day--today {
-  color: var(--text-accent);
-  font-weight: 600;
-}
-.calendar-day--selected {
-  background-color: var(--interactive-accent);
-  color: var(--text-on-accent);
-}
-.calendar-clickable {
-  cursor: pointer;
-}
-</style>
diff --git a/src/components/calendar/CalendarWeekNumber.vue b/src/components/calendar/CalendarWeekNumber.vue
deleted file mode 100644
index 2743a22..0000000
--- a/src/components/calendar/CalendarWeekNumber.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { useDecorations } from "@/composables/use-decorations";
-import type { MomentDate } from "@/types/date.types";
-import CalendarDecoration from "./CalendarDecoration.vue";
-import { inject, toRefs } from "vue";
-import { SHELF_DATA_KEY } from "@/constants";
-const props = defineProps<{
-  date: MomentDate;
-}>();
-
-const { date } = toRefs(props);
-const { decorations } = inject(SHELF_DATA_KEY);
-const decorationsStyles = useDecorations(date, decorations.week);
-</script>
-
-<template>
-  <button>
-    <CalendarDecoration :styles="decorationsStyles">{{ date.format("[W]W") }}</CalendarDecoration>
-  </button>
-</template>
-
-<style scoped>
-button {
-  background-color: transparent;
-  box-shadow: none;
-  position: relative;
-}
-</style>
diff --git a/src/components/calendar/CalendarWeekdays.vue b/src/components/calendar/CalendarWeekdays.vue
new file mode 100644
index 0000000..586f676
--- /dev/null
+++ b/src/components/calendar/CalendarWeekdays.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { usePlugin } from "@/composables/use-plugin";
+import { useWeekdayNames } from "@/composables/use-weekday-names";
+
+const plugin = usePlugin();
+const weekdayNames = useWeekdayNames();
+</script>
+
+<template>
+  <div v-if="plugin.calendarViewSettings.weeks === 'left'"></div>
+  <div v-for="day of weekdayNames" :key="day" class="week-day">
+    {{ day }}
+  </div>
+  <div v-if="plugin.calendarViewSettings.weeks === 'right'"></div>
+</template>
+
+<style scoped>
+.week-day {
+  font-size: 0.7em;
+  border: 1px solid transparent;
+  height: 28px;
+  line-height: 26px;
+  text-align: center;
+  padding: 0;
+}
+</style>
diff --git a/src/components/calendar/CalendarYear.vue b/src/components/calendar/CalendarYear.vue
deleted file mode 100644
index 95211ec..0000000
--- a/src/components/calendar/CalendarYear.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import { computed, toRefs } from "vue";
-import { date_from_string } from "../../calendar";
-import { useYear } from "./use-year";
-
-const props = defineProps<{
-  refDate: string;
-}>();
-defineEmits<(event: "select", date: string) => void>();
-
-const { refDate } = toRefs(props);
-const momentDate = computed(() => date_from_string(refDate.value));
-
-const { grid } = useYear(refDate);
-</script>
-
-<template>
-  <div class="calendar-year">
-    <div class="calendar-year-header">
-      <slot name="header">
-        <div>{{ momentDate.format("YYYY") }}</div>
-      </slot>
-    </div>
-    <div class="calendar-year-grid">
-      <button
-        v-for="month of grid"
-        :key="month.key"
-        :class="{ 'month--selected': month.date.isSame(momentDate, 'month') }"
-        @click="$emit('select', month.key)"
-      >
-        {{ month.date.format("MMMM") }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.calendar-year-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px;
-  margin-bottom: 6px;
-}
-.calendar-year-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 6px;
-}
-button {
-  cursor: pointer;
-  background-color: transparent;
-  box-shadow: none;
-}
-.month--selected {
-  background-color: var(--interactive-accent);
-  color: var(--text-on-accent);
-}
-</style>
diff --git a/src/components/calendar/CalendarYearButton.vue b/src/components/calendar/CalendarYearButton.vue
deleted file mode 100644
index d929cea..0000000
--- a/src/components/calendar/CalendarYearButton.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { useDecorations } from "@/composables/use-decorations";
-import type { MomentDate } from "@/types/date.types";
-import CalendarDecoration from "./CalendarDecoration.vue";
-import ObsidianButton from "../obsidian/ObsidianButton.vue";
-import { inject, toRefs } from "vue";
-import { SHELF_DATA_KEY } from "@/constants";
-
-const props = defineProps<{
-  date: MomentDate;
-}>();
-const { date } = toRefs(props);
-const emit = defineEmits<(event_: "select", event: MouseEvent, date: MomentDate) => void>();
-
-const { journals, decorations } = inject(SHELF_DATA_KEY);
-const decorationsStyles = useDecorations(date, decorations.year);
-function select(event: MouseEvent) {
-  if (journals.year.value.length === 0) {
-    return;
-  }
-  emit("select", event, props.date);
-}
-</script>
-
-<template>
-  <ObsidianButton class="year-button" flat :disabled="journals.year.value.length === 0" @click="select">
-    <CalendarDecoration :styles="decorationsStyles">{{ date.format("YYYY") }}</CalendarDecoration>
-  </ObsidianButton>
-</template>
-
-<style scoped>
-.year-button {
-  background-color: transparent;
-  box-shadow: none;
-  position: relative;
-}
-.year-button:disabled {
-  opacity: 1;
-  cursor: auto;
-}
-</style>
diff --git a/src/components/calendar/CalendarYearView.vue b/src/components/calendar/CalendarYearView.vue
new file mode 100644
index 0000000..3397a0a
--- /dev/null
+++ b/src/components/calendar/CalendarYearView.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useYear } from "@/composables/use-year";
+import { computed } from "vue";
+import CalendarGrid from "./CalendarGrid.vue";
+import FormattedDate from "./FormattedDate.vue";
+import CalendarButton from "./CalendarButton.vue";
+import { isSamePeriod } from "@/calendar";
+
+const { refDate } = defineProps<{
+  refDate: string;
+}>();
+defineEmits<(event: "select", date: string) => void>();
+
+const { grid } = useYear(computed(() => refDate));
+</script>
+
+<template>
+  <CalendarGrid :columns="3">
+    <template #header>
+      <slot name="header">
+        <FormattedDate :date="refDate" format="YYYY" />
+      </slot>
+    </template>
+
+    <CalendarButton
+      v-for="month of grid"
+      :key="month.key"
+      clickable
+      :data-selected="isSamePeriod('month', month.date, refDate) || null"
+      @click="$emit('select', month.key)"
+    >
+      {{ month.date }}
+    </CalendarButton>
+  </CalendarGrid>
+</template>
diff --git a/src/components/calendar/FormattedDate.vue b/src/components/calendar/FormattedDate.vue
new file mode 100644
index 0000000..bcb7f87
--- /dev/null
+++ b/src/components/calendar/FormattedDate.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { date_from_string } from "@/calendar";
+import type { MomentDate } from "@/types/date.types";
+import { computed } from "vue";
+
+const { date } = defineProps<{
+  date: string | MomentDate;
+  format: string;
+}>();
+
+const momentDate = computed(() => {
+  if (typeof date === "string") {
+    return date_from_string(date);
+  }
+  return date;
+});
+</script>
+
+<template>
+  <span>{{ momentDate.format(format) }}</span>
+</template>
+
+<style scoped></style>
diff --git a/src/components/modals/DatePicker.modal.vue b/src/components/modals/DatePicker.modal.vue
index 1eb062c..7b356e1 100644
--- a/src/components/modals/DatePicker.modal.vue
+++ b/src/components/modals/DatePicker.modal.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { today, date_from_string } from "../../calendar";
-import CalendarMonth from "../calendar/CalendarMonth.vue";
-import CalendarYear from "../calendar/CalendarYear.vue";
 import ObsidianButton from "../obsidian/ObsidianButton.vue";
 import ObsidianIconButton from "../obsidian/ObsidianIconButton.vue";
-import CalendarDecade from "../calendar/CalendarDecade.vue";
-import CalendarQuarter from "../calendar/CalendarQuarter.vue";
+import CalendarMonthView from "../calendar/CalendarMonthView.vue";
+import CalendarQuarterView from "../calendar/CalendarQuarterView.vue";
+import CalendarYearView from "../calendar/CalendarYearView.vue";
+import CalendarDecadeView from "../calendar/CalendarDecadeView.vue";
+import FormattedDate from "../calendar/FormattedDate.vue";
 
 const props = defineProps<{
   selectedDate?: string;
@@ -65,10 +66,7 @@ function selectDate(date: string) {
   }
   emit("close");
 }
-function selectWeek(date: string) {
-  emit("select", date);
-  emit("close");
-}
+
 function selectMonth(date: string) {
   if (props.picking === "month") {
     emit("select", date);
@@ -99,42 +97,39 @@ function selectYear(date: string) {
 </script>
 
 <template>
-  <CalendarDecade v-if="mode === 'decade'" :ref-date="currentDate" @select="selectYear">
+  <CalendarDecadeView v-if="mode === 'decade'" :ref-date="currentDate" @select="selectYear">
     <template #header="{ startYear, endYear }">
       <ObsidianIconButton icon="arrow-left" tooltip="Previous decade" @click="previous('decade')" />
       {{ startYear }} - {{ endYear }}
       <ObsidianIconButton icon="arrow-right" tooltip="Next decade" @click="next('decade')" />
     </template>
-  </CalendarDecade>
+  </CalendarDecadeView>
 
-  <CalendarYear v-else-if="mode === 'year'" :ref-date="currentDate" @select="selectMonth">
+  <CalendarYearView v-else-if="mode === 'year'" :ref-date="currentDate" @select="selectMonth">
     <template #header>
       <ObsidianIconButton icon="arrow-left" tooltip="Previous year" @click="previous('year')" />
       <ObsidianButton @click="mode = 'decade'">{{ currentDateMoment.format("YYYY") }}</ObsidianButton>
       <ObsidianIconButton icon="arrow-right" tooltip="Next year" @click="next('year')" />
     </template>
-  </CalendarYear>
+  </CalendarYearView>
 
-  <CalendarQuarter v-else-if="mode === 'quarter'" :ref-date="currentDate" @select="selectQuarter">
+  <CalendarQuarterView v-else-if="mode === 'quarter'" :ref-date="currentDate" @select="selectQuarter">
     <template #header>
       <ObsidianIconButton icon="arrow-left" tooltip="Previous quarter" @click="previous('quarter')" />
-      <ObsidianButton @click="mode = 'year'">{{ currentDateMoment.format("YYYY") }}</ObsidianButton>
+      <ObsidianButton @click="mode = 'year'">
+        <FormattedDate :date="currentDate" format="YYYY" />
+      </ObsidianButton>
       <ObsidianIconButton icon="arrow-right" tooltip="Next quarter" @click="next('quarter')" />
     </template>
-  </CalendarQuarter>
+  </CalendarQuarterView>
 
-  <CalendarMonth
-    v-else
-    :ref-date="currentDate"
-    :selected-date="selectedDate"
-    :select-weeks="picking === 'week'"
-    @select="selectDate"
-    @select-week="selectWeek"
-  >
+  <CalendarMonthView v-else :ref-date="currentDate" :selected-date="selectedDate" @select="selectDate">
     <template #header>
       <ObsidianIconButton icon="arrow-left" tooltip="Previous month" @click="previous" />
-      <ObsidianButton @click="mode = 'year'">{{ currentDateMoment.format("MMMM YYYY") }}</ObsidianButton>
+      <ObsidianButton @click="mode = 'year'">
+        <FormattedDate :date="currentDate" format="MMMM YYYY" />
+      </ObsidianButton>
       <ObsidianIconButton icon="arrow-right" tooltip="Next month" @click="next" />
     </template>
-  </CalendarMonth>
+  </CalendarMonthView>
 </template>
diff --git a/src/components/modals/EditDecoration.modal.vue b/src/components/modals/EditDecoration.modal.vue
index 6e31f1a..829d21f 100644
--- a/src/components/modals/EditDecoration.modal.vue
+++ b/src/components/modals/EditDecoration.modal.vue
@@ -8,7 +8,7 @@ import type {
 } from "@/types/settings.types";
 import ObsidianSetting from "../obsidian/ObsidianSetting.vue";
 import ObsidianButton from "../obsidian/ObsidianButton.vue";
-import CalendarDecoration from "../calendar/CalendarDecoration.vue";
+import CalendarDecoration from "../notes-calendar/decorations/CalendarDecoration.vue";
 import DecorationBackground from "./edit-decoration/DecorationBackground.vue";
 import DecorationColor from "./edit-decoration/DecorationColor.vue";
 import DecorationShape from "./edit-decoration/DecorationShape.vue";
diff --git a/src/components/notes-calendar/NotesCalendarButton.vue b/src/components/notes-calendar/NotesCalendarButton.vue
new file mode 100644
index 0000000..2f78fff
--- /dev/null
+++ b/src/components/notes-calendar/NotesCalendarButton.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useDecorations } from "@/composables/use-decorations";
+import { useShelfData } from "@/composables/use-shelf";
+import FormattedDate from "../calendar/FormattedDate.vue";
+import CalendarButton from "../calendar/CalendarButton.vue";
+import CalendarDecoration from "./decorations/CalendarDecoration.vue";
+import { openDate } from "@/journals/open-date";
+import { usePlugin } from "@/composables/use-plugin";
+import type { JournalSettings } from "@/types/settings.types";
+import { calendarFormats } from "@/constants";
+
+const { date, type } = defineProps<{
+  date: string;
+  type: JournalSettings["write"]["type"];
+}>();
+
+const plugin = usePlugin();
+const { journals, decorations } = useShelfData();
+const isActionable = computed(() => journals[type].value.length > 0);
+const format = computed(() => calendarFormats[type]);
+const decorationsStyles = useDecorations(date, decorations[type]);
+
+function open(event: MouseEvent) {
+  if (!isActionable.value) return;
+  openDate(
+    plugin,
+    date,
+    journals[type].value.map((journal) => journal.name),
+    event,
+  ).catch(console.error);
+}
+</script>
+
+<template>
+  <CalendarButton :clickable="isActionable" @click="open">
+    <CalendarDecoration :styles="decorationsStyles">
+      <FormattedDate :date :format />
+    </CalendarDecoration>
+  </CalendarButton>
+</template>
diff --git a/src/components/notes-calendar/NotesMonthView.vue b/src/components/notes-calendar/NotesMonthView.vue
new file mode 100644
index 0000000..e3bf599
--- /dev/null
+++ b/src/components/notes-calendar/NotesMonthView.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useMonth } from "@/composables/use-month";
+import { usePlugin } from "@/composables/use-plugin";
+import { useShelfData } from "@/composables/use-shelf";
+import CalendarGrid from "../calendar/CalendarGrid.vue";
+import NotesCalendarButton from "./NotesCalendarButton.vue";
+import CalendarWeekdays from "../calendar/CalendarWeekdays.vue";
+
+const { refDate } = defineProps<{
+  refDate: string;
+  selectedDate?: string | null;
+}>();
+defineEmits<(event: "select" | "selectWeek", date: string, nativeEvent: MouseEvent) => void>();
+
+const plugin = usePlugin();
+const columns = computed(() => (plugin.calendarViewSettings.weeks === "none" ? 7 : 8));
+
+const { journals } = useShelfData();
+const isQuarterVisible = computed(() => journals.quarter.value.length > 0);
+const { grid } = useMonth(computed(() => refDate));
+</script>
+
+<template>
+  <CalendarGrid :columns="columns">
+    <template #header>
+      <slot name="header">
+        <NotesCalendarButton :date="refDate" type="month" />
+        <NotesCalendarButton v-if="isQuarterVisible" :date="refDate" type="quarter" />
+        <NotesCalendarButton :date="refDate" type="year" />
+      </slot>
+    </template>
+
+    <CalendarWeekdays />
+
+    <NotesCalendarButton
+      v-for="uiDate of grid"
+      :key="uiDate.key + (uiDate.isWeekNumber ? 'week' : 'day')"
+      :date="uiDate.key"
+      :type="uiDate.isWeekNumber ? 'week' : 'day'"
+      :data-selected="selectedDate === uiDate.key || null"
+      :data-outside="uiDate.outside || null"
+      :data-today="uiDate.today || null"
+    />
+  </CalendarGrid>
+</template>
diff --git a/src/components/notes-calendar/NotesWeekView.vue b/src/components/notes-calendar/NotesWeekView.vue
new file mode 100644
index 0000000..8ced4ad
--- /dev/null
+++ b/src/components/notes-calendar/NotesWeekView.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { usePlugin } from "@/composables/use-plugin";
+import { useWeek } from "@/composables/use-week";
+import CalendarGrid from "../calendar/CalendarGrid.vue";
+import NotesCalendarButton from "./NotesCalendarButton.vue";
+import CalendarWeekdays from "../calendar/CalendarWeekdays.vue";
+
+const { refDate } = defineProps<{
+  refDate: string;
+  selectedDate?: string;
+}>();
+
+const plugin = usePlugin();
+const columns = computed(() => (plugin.calendarViewSettings.weeks === "none" ? 7 : 8));
+
+const { grid } = useWeek(computed(() => refDate));
+</script>
+
+<template>
+  <CalendarGrid :columns>
+    <CalendarWeekdays />
+
+    <NotesCalendarButton
+      v-for="uiDate of grid"
+      :key="uiDate.key + (uiDate.isWeekNumber ? 'week' : 'day')"
+      :date="uiDate.key"
+      :type="uiDate.isWeekNumber ? 'week' : 'day'"
+      :data-selected="selectedDate === uiDate.key || null"
+      :data-outside="uiDate.outside || null"
+      :data-today="uiDate.today || null"
+    />
+  </CalendarGrid>
+</template>
diff --git a/src/components/calendar/CalendarDecoration.vue b/src/components/notes-calendar/decorations/CalendarDecoration.vue
similarity index 93%
rename from src/components/calendar/CalendarDecoration.vue
rename to src/components/notes-calendar/decorations/CalendarDecoration.vue
index d1e759e..bc0c1e0 100644
--- a/src/components/calendar/CalendarDecoration.vue
+++ b/src/components/notes-calendar/decorations/CalendarDecoration.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { BorderSettings, JournalDecorationsStyle } from "@/types/settings.types";
 import { computed } from "vue";
-import DecorationShape from "./decorations/DecorationShape.vue";
-import DecorationCorner from "./decorations/DecorationCorner.vue";
-import DecorationIcon from "./decorations/DecorationIcon.vue";
+import DecorationShape from "./DecorationShape.vue";
+import DecorationCorner from "./DecorationCorner.vue";
+import DecorationIcon from "./DecorationIcon.vue";
 
 const props = defineProps<{ styles: JournalDecorationsStyle[] }>();
 
diff --git a/src/components/calendar/decorations/DecorationCorner.vue b/src/components/notes-calendar/decorations/DecorationCorner.vue
similarity index 100%
rename from src/components/calendar/decorations/DecorationCorner.vue
rename to src/components/notes-calendar/decorations/DecorationCorner.vue
diff --git a/src/components/calendar/decorations/DecorationIcon.vue b/src/components/notes-calendar/decorations/DecorationIcon.vue
similarity index 100%
rename from src/components/calendar/decorations/DecorationIcon.vue
rename to src/components/notes-calendar/decorations/DecorationIcon.vue
diff --git a/src/components/calendar/decorations/DecorationShape.vue b/src/components/notes-calendar/decorations/DecorationShape.vue
similarity index 100%
rename from src/components/calendar/decorations/DecorationShape.vue
rename to src/components/notes-calendar/decorations/DecorationShape.vue
diff --git a/src/components/calendar/use-decade.ts b/src/composables/use-decade.ts
similarity index 81%
rename from src/components/calendar/use-decade.ts
rename to src/composables/use-decade.ts
index 5d135fd..bf1365f 100644
--- a/src/components/calendar/use-decade.ts
+++ b/src/composables/use-decade.ts
@@ -1,4 +1,5 @@
 import { date_from_string } from "@/calendar";
+import { FRONTMATTER_DATE_FORMAT } from "@/constants";
 import type { CalendarUiElement } from "@/types/calendar-ui.types";
 import { computed, ref, watchEffect, type Ref } from "vue";
 
@@ -16,9 +17,10 @@ export function useDecade(refDate: Ref<string>) {
     const years: CalendarUiElement[] = [];
 
     for (let i = startYear.value - 1; i <= endYear.value + 1; i++) {
+      const date = momentDate.value.clone().year(i);
       years.push({
-        date: momentDate.value.clone().year(i),
-        key: momentDate.value.clone().year(i).format("YYYY-MM-DD"),
+        date: date.format("YYYY"),
+        key: date.format(FRONTMATTER_DATE_FORMAT),
         outside: i < startYear.value || i > endYear.value,
       });
     }
diff --git a/src/composables/use-decorations.ts b/src/composables/use-decorations.ts
index 05bc713..508fc47 100644
--- a/src/composables/use-decorations.ts
+++ b/src/composables/use-decorations.ts
@@ -1,4 +1,3 @@
-import type { MomentDate } from "@/types/date.types";
 import type {
   JournalDecoration,
   JournalDecorationCondition,
@@ -14,9 +13,10 @@ import { computed, toRef, unref, type ComputedRef, type MaybeRefOrGetter } from
 import { useJournalDate } from "./use-journal-date";
 import type { JournalNoteData } from "@/types/journal.types";
 import { useJournal } from "./use-journal";
+import { date_from_string } from "@/calendar";
 
 export function useDecorations(
-  dateRef: MaybeRefOrGetter<MomentDate>,
+  dateRef: MaybeRefOrGetter<string>,
   decorationsList: MaybeRefOrGetter<
     {
       journalName: string;
@@ -34,7 +34,7 @@ export function useDecorations(
 }
 
 export function useJournalDecorations(
-  date: MaybeRefOrGetter<MomentDate>,
+  date: MaybeRefOrGetter<string>,
   journalName: string,
   decoration: MaybeRefOrGetter<JournalDecoration>,
 ): ComputedRef<JournalDecorationsStyle[]> {
@@ -57,7 +57,7 @@ export function useJournalDecorations(
 }
 
 function checkDecorationConditions(
-  date: MomentDate,
+  date: string,
   journalName: string,
   noteDate: JournalNoteData | null,
   mode: "and" | "or",
@@ -70,7 +70,7 @@ function checkDecorationConditions(
 }
 
 function checkDecorationCondition(
-  date: MomentDate,
+  date: string,
   journalName: string,
   noteData: JournalNoteData | null,
   condition: JournalDecorationCondition,
@@ -149,10 +149,11 @@ function checkDecorationTagCondition(
   }
 }
 
-function checkDecorationDateCondition(date: MomentDate, condition: JournalDecorationDateCondition): boolean {
-  if (condition.day !== -1 && date.date() !== condition.day) return false;
-  if (condition.month !== -1 && date.month() !== condition.month) return false;
-  if (condition.year && date.year() !== condition.year) return false;
+function checkDecorationDateCondition(date: string, condition: JournalDecorationDateCondition): boolean {
+  const parsed = date_from_string(date);
+  if (condition.day !== -1 && parsed.date() !== condition.day) return false;
+  if (condition.month !== -1 && parsed.month() !== condition.month) return false;
+  if (condition.year && parsed.year() !== condition.year) return false;
   return true;
 }
 
@@ -221,12 +222,13 @@ function checkDecorationPropertyCondition(
   return false;
 }
 
-function checkDecorationWeekdayCondition(date: MomentDate, condition: JournalDecorationWeekdayCondition): boolean {
-  return condition.weekdays.includes(date.day());
+function checkDecorationWeekdayCondition(date: string, condition: JournalDecorationWeekdayCondition): boolean {
+  const parsed = date_from_string(date);
+  return condition.weekdays.includes(parsed.day());
 }
 
 function checkDecorationOffsetCondition(
-  date: MomentDate,
+  date: string,
   journalName: string,
   condition: JournalDecorationOffsetCondition,
 ): boolean {
diff --git a/src/composables/use-journal-date.ts b/src/composables/use-journal-date.ts
index 1b27c5b..dec5116 100644
--- a/src/composables/use-journal-date.ts
+++ b/src/composables/use-journal-date.ts
@@ -1,17 +1,16 @@
-import type { MomentDate } from "@/types/date.types";
 import { computed, toRef, type MaybeRefOrGetter } from "vue";
 import { useJournal } from "./use-journal";
 import type { JournalNoteData } from "@/types/journal.types";
 import { usePlugin } from "./use-plugin";
 
-export function useJournalDate(date: MaybeRefOrGetter<MomentDate>, journalName: MaybeRefOrGetter<string>) {
+export function useJournalDate(date: MaybeRefOrGetter<string>, journalName: MaybeRefOrGetter<string>) {
   const _date = toRef(date);
   const _journalName = toRef(journalName);
   const plugin = usePlugin();
   const journal = useJournal(_journalName);
   const anchorDate = computed(() => {
     if (journal.value) {
-      return journal.value.resolveAnchorDate(_date.value.format("YYYY-MM-DD"));
+      return journal.value.resolveAnchorDate(_date.value);
     }
     return null;
   });
diff --git a/src/components/calendar/use-month.ts b/src/composables/use-month.ts
similarity index 74%
rename from src/components/calendar/use-month.ts
rename to src/composables/use-month.ts
index 48b3fc3..8a2073c 100644
--- a/src/components/calendar/use-month.ts
+++ b/src/composables/use-month.ts
@@ -1,7 +1,8 @@
 import { ref, watchEffect, type Ref } from "vue";
-import type { CalendarUiDay } from "../../types/calendar-ui.types";
-import { date_from_string, today } from "../../calendar";
+import type { CalendarUiDay } from "../types/calendar-ui.types";
+import { date_from_string, today } from "../calendar";
 import { usePlugin } from "@/composables/use-plugin";
+import { FRONTMATTER_DATE_FORMAT } from "@/constants";
 
 export function useMonth(refDate: Ref<string>) {
   const grid = ref<CalendarUiDay[]>([]);
@@ -23,16 +24,16 @@ export function useMonth(refDate: Ref<string>) {
     while (current.isSameOrBefore(end)) {
       if (placeWeeks === "left" && current.isSame(current.clone().startOf("week"), "day")) {
         days.push({
-          date: current.clone(),
-          key: current.format("[W]W"),
+          date: current.format("[W]W"),
+          key: current.format(FRONTMATTER_DATE_FORMAT),
           outside: false,
           isWeekNumber: true,
         });
       }
 
       days.push({
-        date: current.clone(),
-        key: current.format("YYYY-MM-DD"),
+        date: current.format("D"),
+        key: current.format(FRONTMATTER_DATE_FORMAT),
         today: current.isSame(todayDate, "day"),
         outside: !momentDate.isSame(current, "month"),
         isWeekNumber: false,
@@ -40,8 +41,8 @@ export function useMonth(refDate: Ref<string>) {
 
       if (placeWeeks === "right" && current.isSame(current.clone().endOf("week"), "day")) {
         days.push({
-          date: current.clone(),
-          key: current.format("[W]W"),
+          date: current.format("[W]W"),
+          key: current.format(FRONTMATTER_DATE_FORMAT),
           outside: false,
           isWeekNumber: true,
         });
diff --git a/src/components/calendar/use-quarter.ts b/src/composables/use-quarter.ts
similarity index 72%
rename from src/components/calendar/use-quarter.ts
rename to src/composables/use-quarter.ts
index ad7681b..d5e5da0 100644
--- a/src/components/calendar/use-quarter.ts
+++ b/src/composables/use-quarter.ts
@@ -1,4 +1,5 @@
 import { date_from_string } from "@/calendar";
+import { calendarFormats, FRONTMATTER_DATE_FORMAT } from "@/constants";
 import type { CalendarUiElement } from "@/types/calendar-ui.types";
 import { computed, ref, watchEffect, type Ref } from "vue";
 
@@ -14,9 +15,10 @@ export function useQuarter(refDate: Ref<string>) {
     const quarters: CalendarUiElement[] = [];
 
     for (let i = 0; i < 4; i++) {
+      const date = momentDate.value.clone().quarter(i);
       quarters.push({
-        date: momentDate.value.clone().quarter(i),
-        key: momentDate.value.clone().quarter(i).format("YYYY-MM-DD"),
+        date: date.format(calendarFormats.quarter),
+        key: date.format(FRONTMATTER_DATE_FORMAT),
       });
     }
 
diff --git a/src/composables/use-shelf.ts b/src/composables/use-shelf.ts
index edd3dca..0196c2b 100644
--- a/src/composables/use-shelf.ts
+++ b/src/composables/use-shelf.ts
@@ -1,6 +1,6 @@
 import { SHELF_DATA_KEY } from "@/constants";
 import type { ProvidedShelfData } from "@/types/provided-data.types";
-import { computed, type MaybeRef, provide, toRef } from "vue";
+import { computed, inject, type MaybeRef, provide, toRef } from "vue";
 import { usePlugin } from "./use-plugin";
 import type { Journal } from "@/journals/journal";
 
@@ -66,3 +66,9 @@ function prepareDecorations(journals: Journal[]) {
     })),
   );
 }
+
+export function useShelfData(): ProvidedShelfData {
+  const data = inject(SHELF_DATA_KEY);
+  if (!data) throw new Error("Shelf data not provided or composable used outside of vue context");
+  return data;
+}
diff --git a/src/components/calendar/use-week.ts b/src/composables/use-week.ts
similarity index 80%
rename from src/components/calendar/use-week.ts
rename to src/composables/use-week.ts
index 7c70bf8..7fdafcb 100644
--- a/src/components/calendar/use-week.ts
+++ b/src/composables/use-week.ts
@@ -1,5 +1,6 @@
 import { date_from_string, today } from "@/calendar";
 import { usePlugin } from "@/composables/use-plugin";
+import { FRONTMATTER_DATE_FORMAT } from "@/constants";
 import type { CalendarUiDay } from "@/types/calendar-ui.types";
 import { ref, watchEffect, type Ref } from "vue";
 
@@ -21,8 +22,8 @@ export function useWeek(refDate: Ref<string>) {
 
     if (placeWeeks === "left") {
       days.push({
-        date: start.clone(),
-        key: start.format("[W]W"),
+        date: start.format("[W]W"),
+        key: start.format(FRONTMATTER_DATE_FORMAT),
         outside: false,
         isWeekNumber: true,
       });
@@ -31,8 +32,8 @@ export function useWeek(refDate: Ref<string>) {
     const current = start.clone();
     while (current.isSameOrBefore(end)) {
       days.push({
-        date: current.clone(),
-        key: current.format("YYYY-MM-DD"),
+        date: current.format("D"),
+        key: current.format(FRONTMATTER_DATE_FORMAT),
         today: current.isSame(todayDate, "day"),
         outside: !momentDate.isSame(current, "month"),
         isWeekNumber: false,
@@ -43,8 +44,8 @@ export function useWeek(refDate: Ref<string>) {
 
     if (placeWeeks === "right") {
       days.push({
-        date: start.clone(),
-        key: start.format("[W]W"),
+        date: start.format("[W]W"),
+        key: start.format(FRONTMATTER_DATE_FORMAT),
         outside: false,
         isWeekNumber: true,
       });
diff --git a/src/composables/use-weekday-names.ts b/src/composables/use-weekday-names.ts
new file mode 100644
index 0000000..9e75eda
--- /dev/null
+++ b/src/composables/use-weekday-names.ts
@@ -0,0 +1,26 @@
+import { ref, watch } from "vue";
+import { usePlugin } from "./use-plugin";
+import { today } from "@/calendar";
+
+export function useWeekdayNames() {
+  const weekdayNames = ref<string[]>([]);
+  const plugin = usePlugin();
+
+  watch(
+    () => plugin.calendarSettings.firstDayOfWeek,
+    () => {
+      const week = today().startOf("week");
+      const weekEnd = week.clone().endOf("week");
+      const names: string[] = [];
+      while (week.isSameOrBefore(weekEnd)) {
+        names.push(week.format("ddd"));
+        week.add(1, "day");
+      }
+
+      weekdayNames.value = names;
+    },
+    { immediate: true },
+  );
+
+  return weekdayNames;
+}
diff --git a/src/components/calendar/use-year.ts b/src/composables/use-year.ts
similarity index 70%
rename from src/components/calendar/use-year.ts
rename to src/composables/use-year.ts
index 5363e6e..559de94 100644
--- a/src/components/calendar/use-year.ts
+++ b/src/composables/use-year.ts
@@ -1,6 +1,7 @@
 import { ref, watchEffect, type Ref } from "vue";
-import type { CalendarUiElement } from "../../types/calendar-ui.types";
-import { date_from_string } from "../../calendar";
+import type { CalendarUiElement } from "../types/calendar-ui.types";
+import { date_from_string } from "../calendar";
+import { FRONTMATTER_DATE_FORMAT } from "@/constants";
 
 export function useYear(refDate: Ref<string>) {
   const grid = ref<CalendarUiElement[]>([]);
@@ -18,8 +19,8 @@ export function useYear(refDate: Ref<string>) {
     const current = start.clone();
     while (current.isSameOrBefore(end)) {
       months.push({
-        date: current.clone(),
-        key: current.format("YYYY-MM-DD"),
+        date: current.format("MMMM"),
+        key: current.format(FRONTMATTER_DATE_FORMAT),
       });
       current.add(1, "month");
     }
diff --git a/src/constants.ts b/src/constants.ts
index 92b2ce6..c638bb8 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,6 +1,7 @@
 import { type InjectionKey } from "vue";
 import type { ProvidedShelfData } from "./types/provided-data.types";
 import type { JournalPlugin } from "./types/plugin.types";
+import type { JournalSettings } from "./types/settings.types";
 
 export const CALENDAR_VIEW_TYPE = "journal-calendar";
 
@@ -12,3 +13,13 @@ export const FRONTMATTER_INDEX_KEY = "journal-index";
 
 export const PLUGIN_KEY = Symbol() as InjectionKey<JournalPlugin>;
 export const SHELF_DATA_KEY = Symbol() as InjectionKey<ProvidedShelfData>;
+
+export const calendarFormats: Record<JournalSettings["write"]["type"], string> = {
+  day: "D",
+  week: "[W]W",
+  month: "MMMM",
+  quarter: "[Q]Q",
+  year: "YYYY",
+  weekdays: "ddd",
+  custom: "",
+};
diff --git a/src/journals/custom-interval.ts b/src/journals/custom-interval.ts
index 4e512be..97209ce 100644
--- a/src/journals/custom-interval.ts
+++ b/src/journals/custom-interval.ts
@@ -1,4 +1,3 @@
-import type { MomentDate } from "@/types/date.types";
 import type { JournalCommand, WriteCustom } from "@/types/settings.types";
 import { JournalAnchorDate, type AnchorDateResolver } from "../types/journal.types";
 import type { ComputedRef } from "vue";
@@ -74,8 +73,8 @@ export class CustomIntervalResolver implements AnchorDateResolver {
     }
     return `${fromNow} ${this.journalName}s from now`;
   }
-  calculateOffset(date: MomentDate): [positive: number, negative: number] {
-    const anchorDate = this.#resolveDate(date.format(FRONTMATTER_DATE_FORMAT));
+  calculateOffset(date: string): [positive: number, negative: number] {
+    const anchorDate = this.#resolveDate(date);
     if (!anchorDate) return [0, 0];
     const start = date_from_string(anchorDate);
     const end = date_from_string(this.resolveEndDate(anchorDate));
diff --git a/src/journals/fixed-interval.ts b/src/journals/fixed-interval.ts
index b34d258..dbacc54 100644
--- a/src/journals/fixed-interval.ts
+++ b/src/journals/fixed-interval.ts
@@ -87,13 +87,14 @@ export class FixedIntervalResolver implements AnchorDateResolver {
     return Math.ceil(start.diff(end, this.#settings.value.type));
   }
 
-  calculateOffset(date: MomentDate): [positive: number, negative: number] {
-    const anchorDate = this.#resolveAnchorDate(date);
+  calculateOffset(date: string): [positive: number, negative: number] {
+    const parsed = date_from_string(date);
+    const anchorDate = this.#resolveAnchorDate(parsed);
     if (!anchorDate) return [0, 0];
     const start = date_from_string(anchorDate).startOf(this.#settings.value.type);
     const end = start.clone().endOf(this.#settings.value.type);
 
-    if (date.isBefore(start) || date.isAfter(end)) return [0, 0];
+    if (parsed.isBefore(start) || parsed.isAfter(end)) return [0, 0];
     return [start.diff(date, "days"), end.diff(date, "days")];
   }
 
diff --git a/src/journals/journal.ts b/src/journals/journal.ts
index 154aa0d..ec6b88f 100644
--- a/src/journals/journal.ts
+++ b/src/journals/journal.ts
@@ -22,7 +22,6 @@ import { FixedIntervalResolver } from "./fixed-interval";
 import { date_from_string, today } from "../calendar";
 import { VueModal } from "@/components/modals/vue-modal";
 import ConfirmNoteCreationModal from "@/components/modals/ConfirmNoteCreation.modal.vue";
-import type { MomentDate } from "@/types/date.types";
 import { disconnectNote } from "@/utils/journals";
 import { CustomIntervalResolver } from "./custom-interval";
 import type { JournalPlugin } from "@/types/plugin.types";
@@ -80,7 +79,7 @@ export class Journal {
     return this.config.value.shelves[0] ?? "";
   }
 
-  calculateOffset(date: MomentDate): [positive: number, negative: number] {
+  calculateOffset(date: string): [positive: number, negative: number] {
     return this.#anchorDateResolver.calculateOffset(date);
   }
 
diff --git a/src/settings/JournalSettingsEdit.vue b/src/settings/JournalSettingsEdit.vue
index 05755ec..f95b175 100644
--- a/src/settings/JournalSettingsEdit.vue
+++ b/src/settings/JournalSettingsEdit.vue
@@ -14,7 +14,7 @@ import DateFormatPreview from "../components/DateFormatPreview.vue";
 import VariableReferenceHint from "../components/VariableReferenceHint.vue";
 import EditCommandModal from "../components/modals/EditCommand.modal.vue";
 import EditDecorationModal from "@/components/modals/EditDecoration.modal.vue";
-import CalendarDecoration from "@/components/calendar/CalendarDecoration.vue";
+import CalendarDecoration from "@/components/notes-calendar/decorations/CalendarDecoration.vue";
 import { VueModal } from "../components/modals/vue-modal";
 import DatePicker from "../components/DatePicker.vue";
 import RenameJournalModal from "../components/modals/RenameJournal.modal.vue";
diff --git a/src/types/calendar-ui.types.ts b/src/types/calendar-ui.types.ts
index b0e1149..54e8106 100644
--- a/src/types/calendar-ui.types.ts
+++ b/src/types/calendar-ui.types.ts
@@ -1,7 +1,5 @@
-import type { MomentDate } from "./date.types";
-
 export interface CalendarUiDay {
-  date: MomentDate;
+  date: string;
   key: string;
   outside: boolean;
   today?: boolean;
@@ -9,7 +7,7 @@ export interface CalendarUiDay {
 }
 
 export interface CalendarUiElement {
-  date: MomentDate;
+  date: string;
   key: string;
   outside?: boolean;
 }
diff --git a/src/types/journal.types.ts b/src/types/journal.types.ts
index ccaaba8..40ab67c 100644
--- a/src/types/journal.types.ts
+++ b/src/types/journal.types.ts
@@ -1,4 +1,3 @@
-import type { MomentDate } from "./date.types";
 import type { JournalCommand } from "./settings.types";
 
 export type JournalAnchorDate = string & { _journal_anchor_date: true };
@@ -36,6 +35,6 @@ export interface AnchorDateResolver {
   resolveEndDate(anchorDate: JournalAnchorDate): string;
   resolveRelativeDate(anchorDate: JournalAnchorDate): string;
 
-  calculateOffset(date: MomentDate): [positive: number, negative: number];
+  calculateOffset(date: string): [positive: number, negative: number];
   countRepeats(startDate: string, endDate: string): number;
 }