تقویم شمسی vue js

If you don't need a datepicker and only want a compact Persian/Jalali calendar component in Vue.js, I'd avoid datepicker packages entirely. They're usually solving a bigger problem than you actually have.

A few options:

• Vue Persian Calendar — a reasonable choice if you only need basic month navigation and calendar display.
• V-Calendar — polished and flexible, but Jalali support may require an adapter or some customization.
• vue3-persian-datepicker — more focused on date selection, so it's probably overkill if you just need a mini calendar.

For something specifically like Google Calendar's compact monthly calendar, I'd personally keep the UI simple and handle the calendar logic separately.

A good approach is:

npm install jalaali-js

Then use jalaali-js for Gregorian ↔ Jalali conversion and build a small Vue component around it.

That gives you full control over:

• Persian month names
• Jalali year/month navigation
• Saturday-first week layout
• Today highlighting
• Selected-day state
• RTL layout
• Custom styling

It also avoids dragging a full datepicker into your bundle just because you needed seven columns and a month header. 😄

If the component is only a mini calendar, a small custom Vue component + jalaali-js is often cleaner than trying to force a datepicker library to behave like a calendar.

Soroosh Morshedi
sorooshmorshedi.com