vue3-jalali-calendar

with special thanks to @mostafa-jamali & @aminmokhtari94.

Preview images

Links

npm: https://www.npmjs.com/package/vue3-jalali-calendar demo: https://vue3-jalali-calendar.netlify.app/

Installation

npm i vue3-jalali-calendar

Usage

then use the component in .vue files:

<template>
 <jalaliCalendar
 		:eventsList="events"
		:vacationsList="vacations"
		disablePastDays
		addEventButton
		@dayClick="showEventModal"
		@on-event-click="showEventModal"
 />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { jalaliCalendar } from "vue3-jalali-calendar";


import moment from "jalali-moment";

const showEventModal = (e: any) => (console.log(e), alert("check your log")); // or open an modal
const events = ref([{
		startDateTime: moment("2023-03-06T13:37:41.020+00:00"),
		endDateTime: moment("2023-03-06T20:49:41.020+00:00"),
		title: "رویداد شماره ۱",
		color: "#29B6F6",
	}
]);
const vacations = ref([
{
		date: moment("1402/05/30", "jYYYY/jMM/jDD"),
		title: "روز طبیعت",
 },
]);
</script>

Available props

Prop	Type	Default	Description
date-format	String	'jYYYY/jMM/jDD'	Date input format of show-date, min-date, max-date
show-date	Jalali Moment Object	$moment()	Init Date of the calendar
display-period	String	'month'	'month' or 'week' period
events-list	Array of EventObject	[]	List of Events
min-date	Jalali Moment Object	null	Limit minimum time to navigate to
max-date	Jalali Moment Object	null	Limit minimum time to navigate to
disable-today	Boolean	false	If set, Today button and today mark won't show
disable-period	Boolean	false	If set, Period change button won't show
hide-event-times	Boolean	false	If set, Event date and time won't show
hide-month-shadow	Boolean	false	If set, Shadow of days not in showing month won't show
hide-past-days-shadow	Boolean	false	If set, Shadow of past days won't show
disablePastDays	Boolean	false	If set, it makes past days unclickable and they won't emit on-day-click
addEventButton	Boolean	false	If set, it creates a button that emits on-day-click

Events

These events emitted on actions in the persian calendar:

Event	Output	Description
on-day-click	Jalali Moment Object	A Day has been selected
on-event-click	EventObject	An Event has been selected
on-display-period-change	'week' | 'month'	Display Period has been changed
on-page-add		Display Page has been added
on-page-subtract		Display Page has been subtracted

Event Item Properties

name	Type	Description
startDateTime	Jalali Moment Object	The moment the event starts on the calendar.
endDateTime	Jalali Moment Object	The moment the event ends on the calendar.
title	String	The name of the event shown on the calendar.
classes	String	Any additional CSS classes you wish to assign to the event.
color	String	CSS Color for event background

Event Example:

	{
		startDateTime: moment("2023-03-06T13:37:41.020+00:00"),
		endDateTime: moment("2023-03-06T20:49:41.020+00:00"),
		title: "رویداد شماره ۱",
		color: "#29B6F6",
	},

Vacation Example:

	{
		date: "2023-08-19",
		description: "روز طبیعت",
	},

recommend reading

• vue jalali moment
• jalali moment
• moment js