vue3-jalali-calendar v1.0.8

vue3-jalali-calendar

Jalali Calendar for vue 3

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

Events

These events emitted on actions in the persian calendar:

Event Item Properties

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