Vue Persian Calendar Datepicker

Persian calendar with Iran's official holidays and Iranian calendar events and Islamic and world events. And also support for Hijri and Gregorian dates in Vue

Introduction Github

Multiple Calendar Systems

Display dates in Persian (Jalali), Hijri (Islamic), and Gregorian calendars simultaneously with automatic conversions.

Rich Event Support

Show Persian holidays, Islamic events, and international observances with customizable tooltips and event displays.

Smart Date Picking

Choose between a full calendar view or a compact date picker with date range restrictions and format options.

Theme Flexibility

Support for light and dark themes with automatic system preference detection for seamless user experience.

Fully Customizable

Extensive slot-based customization allows you to tailor every aspect of the calendar to your design needs.

TypeScript Ready

Full type definitions included for a better development experience with IDE support and type checking.

Quick Start

Installation

npm install vue-persian-calendar-datepicker

Basic Usage

<script setup>
import { PersianCalendar } from 'vue-persian-calendar-datepicker'
</script>

<template>
  <PersianCalendar />
</template>

Date Picker

<script setup>
import { ref } from 'vue'
import { PersianDatePicker } from 'vue-persian-calendar-datepicker'

const selectedDate = ref(null)
</script>

<template>
  <PersianDatePicker v-model="selectedDate" />
</template>

Key Capabilities

Full Calendar View
Display a complete month view with date selection, today indicator, and comprehensive event information.
Flexible Date Picker
Standalone datepicker component with popup calendar, format options, and quick action buttons.
Event Management
Automatically display Persian holidays, Islamic calendar events, and international observances on relevant dates.
Date Range Restriction
Set from and to dates to prevent selection of dates outside your desired range.
Theme Customization
Choose between light, dark, or automatic themes that respond to system preferences.
Extensible via Slots
Customize headers, day cells, information displays, and more through named slots.

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)