Calendar

A pixel-art styled calendar component for selecting dates with month navigation, keyboard support, and full i18n.

?

Name	Category	Description	Type	Default
type	? Style	Color type	'primary' | 'success' | 'info' | 'warning' | 'danger'	—
color	? Color	Custom hex color	string	—
modelValue / v-model	? State	Currently selected date	Date	—
defaultMonth	? State	Initial displayed month	Date	—
minDate	? State	Minimum selectable date	Date	—
maxDate	? State	Maximum selectable date	Date	—
disabledDate	? Behavior	Function to determine if a date is disabled	(date: Date) => boolean	—
showOutsideDays	? Behavior	Show dates outside the current month	boolean	true
weekStartsOn	? Behavior	Week start day (0=Sunday, 1=Monday)	0 | 1	0
yearRange	? Behavior	Year range for the year dropdown [startYear, endYear]	[number, number]	[currentYear - 10, currentYear + 10]
update:modelValue	? Event	Triggered when selected date changes	(date: Date) => void	—
month-change	? Event	Triggered when the displayed month changes	(date: Date) => void	—
focus	? Expose	Focus the calendar	() => void	—
prevMonth	? Expose	Navigate to previous month	() => void	—
nextMonth	? Expose	Navigate to next month	() => void	—

Basic Usage

Use v-model to bind the selected date. The calendar displays the current month by default.

<script setup lang="ts">
import { ref } from 'vue';

const date = ref<Date>();
</script>

<template>
  <div class="demo-calendar">
    <px-calendar v-model="date" />
    <p v-if="date">Selected: {{ date.toLocaleDateString() }}</p>
  </div>
</template>

<style scoped>
.demo-calendar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
</style>

Types

Use type property to set the calendar color theme.

<script setup lang="ts">
import { ref } from 'vue';

const date = ref<Date>();
</script>

<template>
  <div class="demo-calendar-types">
    <px-calendar v-model="date" type="primary" />
    <px-calendar v-model="date" type="success" />
    <px-calendar v-model="date" type="warning" />
    <px-calendar v-model="date" type="danger" />
    <px-calendar v-model="date" type="info" />
  </div>
</template>

<style scoped>
.demo-calendar-types {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
</style>

Disabled Dates

Use disabledDate function or minDate/maxDate to restrict selectable dates.

<script setup lang="ts">
import { ref } from 'vue';

const date = ref<Date>();

const isWeekend = (d: Date) => d.getDay() === 0 || d.getDay() === 6;

const today = new Date();
const minDate = new Date(today.getFullYear(), today.getMonth(), 1);
const maxDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);
</script>

<template>
  <div class="demo-calendar-disabled">
    <div>
      <p>Disable weekends:</p>
      <px-calendar v-model="date" :disabled-date="isWeekend" />
    </div>
    <div>
      <p>Date range (current month only):</p>
      <px-calendar v-model="date" :min-date="minDate" :max-date="maxDate" />
    </div>
  </div>
</template>

<style scoped>
.demo-calendar-disabled {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
</style>

Custom Color

Use color property to set a custom hex color for selection and today highlights.

<script setup lang="ts">
import { ref } from 'vue';

const date = ref<Date>();
</script>

<template>
  <div class="demo-calendar-color">
    <px-calendar v-model="date" color="#e64553" />
    <px-calendar v-model="date" color="#8839ef" />
    <px-calendar v-model="date" color="#40a02b" />
  </div>
</template>

<style scoped>
.demo-calendar-color {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
</style>