Calendar
Type
Defines the type of calendar, such as date or dates selection.
Date
6/14/2026
2026 June
Dates
12/18/1989~12/19/1989~12/21/1989
1989 December
Date range
12/18/1989~12/21/1989
1989 December
<script setup lang="ts">
import { NmorphCalendar } from "@nmorph/nmorph-ui-kit";
const date1 = new Date(1989, 11, 18);
const date2 = new Date(1989, 11, 19);
const date3 = new Date(1989, 11, 21);
const date = ref(new Date());
const dates = ref([date1, date2, date3]);
const range = ref([date1, date3]);
const shortDate = (value: Date) => value.toLocaleDateString("en-US");
</script><template>
<div class="calendar-type-overview">
<div class="calendar-type-overview__element">
<p>Date</p>
<p>{{ shortDate(date) }}</p>
<NmorphCalendar v-model="date" />
</div>
<div class="calendar-type-overview__element">
<p>Dates</p>
<p>{{ dates.map((date) => shortDate(date)).join("~") }}</p>
<NmorphCalendar v-model="dates" type="dates" :initial-date="date1" />
</div>
<div class="calendar-type-overview__element">
<p>Date range</p>
<p>{{ range.map((date) => shortDate(date)).join("~") }}</p>
<NmorphCalendar
v-model="range"
type="daterange"
:initial-date="date1"
/>
</div>
</div>
</template>Range
Sets the boundaries of the displayed calendar.
2026 June
<script setup lang="ts">
import { NmorphCalendar } from "@nmorph/nmorph-ui-kit";
const date1 = new Date();
const date2 = new Date();
date2.setDate(date2.getDate() + 2);
const range = ref<[Date, Date]>([date1, date2]);
const model = ref(new Date());
</script><template>
<div class="calendar-initial-date-overview">
<NmorphCalendar :range="range" v-model="model" />
</div>
</template>Custom content
2026 June
<script setup lang="ts">
import { NmorphCalendar } from "@nmorph/nmorph-ui-kit";
const date = ref(new Date());
</script><template>
<div class="calendar-custom-content-overview">
<NmorphCalendar :initial-date="new Date()" v-model="date">
<template #date-cell="{ scope }">
{{ scope.isToday ? "!TODAY!" : scope.value }}
</template>NmorphCalendar Api
Attributes
Slots
Translations i18n
Use these keys to configure custom text for languages that the library does not support out of the box.