@jalali-js/ui-vue
v0.4.2
Published
RangePicker, EventCalendar, InlineCalendar, and extra themes for @jalali-js/vue, built on the same headless primitives.
Maintainers
Readme
@jalali-js/ui-vue
Higher-level Vue UI on @jalali-js/vue: RangePicker, InlineCalendar, EventCalendar,
and TimeRangePicker, plus extra themes.
Start here: Live demo · Documentation
npm ecosystem: jalali-js · @jalali-js/i18n · @jalali-js/nlp · @jalali-js/holidays · @jalali-js/react · @jalali-js/vue · @jalali-js/web · @jalali-js/ui-react · @jalali-js/ui-vue · @jalali-js/ui-web
Contents
Install
npm install @jalali-js/ui-vue @jalali-js/vueimport '@jalali-js/vue/date-picker.css';Compatibility
| Item | Support |
| ----- | --------------------- |
| Vue | 3.4+ (CI: Vue 3) |
| Peers | vue >=3.4 |
| Node | 22 and 24 (CI matrix) |
Quick start
<script setup lang="ts">
import '@jalali-js/vue/date-picker.css';
import { RangePicker } from '@jalali-js/ui-vue';
import { ref } from 'vue';
const range = ref();
</script>
<template>
<RangePicker v-model="range" system="jalali" locale="fa" />
</template>Components
| Component | Role |
| ----------------- | ---------------------------------------------------- |
| RangePicker | Start and end dates |
| InlineCalendar | Always-visible month grid |
| EventCalendar | Month / week / day / timeline views over your events |
| TimeRangePicker | Start and end times |
You own the event list and editing UI for EventCalendar.
Options
Key RangePicker props:
| Prop | Type | Default | Notes |
| -------------- | ---------------- | ----------------- | ---------------------- |
| system | CalendarSystem | 'jalali' | Display calendar |
| locale | LocaleCode | 'en' | UI language |
| valueFormat | ValueFormat | 'gregorian-iso' | Storage shape for ends |
| rules | SelectionRules | - | Day and range limits |
| showHolidays | boolean | false | Mark holidays |
EventCalendar: view (month / week / day / timeline), events,
timeline.layout (single / alternating / roadmap), @event-click.
Full tables: Vue guide and Event calendar.
Theming
[data-jalali-datepicker-root] {
--jalali-primary: #0f766e;
--jalali-radius: 12px;
}See Theming.
Links
License
MIT
