Cap-jalali-calendar-nuxt3 NPM

Cap-Jalali-Calendar

Cap Jalali Calendar is a Jalali Calendar component library for Nuxt 3 FrameWork.

About

The Cap Jalali Calendar is an open-source library developed and maintained by CAP Company. It is developed using Nuxt 3 framework and tailwindcss.

Showcase

Quick Setup

Add Cap-Jalali-Calendar dependency to your project .

Using yarn :

yarn add Cap-Jalali-Calendar

Using npm :

npm install Cap-Jalali-Calendar

Using pnpm :

pnpm install Cap-Jalali-Calendar

Add cap-jalali-calendar-nuxt3 to the modules of nuxt.config.ts

export default defineNuxtConfig({
  modules: ['cap-jalali-calendar-nuxt3']
});

That's it! You can now use library in your Nuxt app ✨

How to Use

Using the calendar is easy, you just need to import the library and use it as follows.

<JalaliCalendar />

Props

Key	Type	Default	Description	sample
`cellClass`	`string`	empty	you can add custom class for calendar days	bg-rose-400 p-5
`cellTodayClass`	`string`	empty	you can change class of today calendar cell	bg-purple-500 text-white
`showMonthSelector`	`boolean`	false	if set TRUE , can access change month button on header of calendar
`events`	`array`	null	list of calendar events based on template

How To Using Classes

Using the calendar is easy, you just need to import the library and use it as follows.

<JalaliCalendar 
  cellClass="!text-white !bg-purple-500"
  cellTodayClass="!text-slate-500 !bg-gray-100" />

Event Model

First of all, you need to add the interface and enum related to the events format.

interface DayEvent {
  id: number,
  title: string,
  color: string,
  time: string,
  date: string,
  extra?:any,
  action: EventActions,
}

enum EventActions {
  NONE= 0,
  GOTO_URL= 1,
  ALERT= 2
}

Then it is recommended to create a list to store the events, in the example below we have also filled this list with 2 items.

const _events = ref<DayEvent[]>([
  {
    id: 1,
    title: 'رویداد اول',
    color: 'red',
    time: '12:45',
    date: '1403/07/23',
    action: EventActions.NONE,
  },
  {
    id: 2,
    title: 'رویداد دوم',
    color: 'blue',
    time: '17:23',
    date: '1403/07/23',
    action: EventActions.NONE,
  }
])

In the next step, we used a computed method to optimize and manage events

const events = computed<DayEvent[]>(() =>{
  return _events.value;
})

Finally, we connected the prepared list to the calendar as follows. Also, after connecting the list of events to the calendar, you can still add to that list of events and view them in the calendar at the same time without needing to make any changes.

    <JalaliCalendar :events="events" />

Templates

You can customize the calendar using templates. It is now possible to customize to change events and add button(s) to the top bar of the calendar.

Key	Description
`customButton`	It is used to add a button to the top bar of the calendar
`event`	Use this template to personalize events

How To Using Template : customButton

<!--#region Use Template : Custom Button On Header -->
<JalaliCalendar :events="events">
    <template #customButton> 
        <button type="button"> مشاهده بیشتر </button>
    </template>
</JalaliCalendar>
<!--#endregion-->

How To Using Template : customButton

<!--#region Use Template : Custom Event -->
    <JalaliCalendar :events="events">
      <template #event="{ event }">
         <a href="javascript:" class="flex rounded-lg p-2 bg-rose-400 text-white">
           <p class="custom-title">{{ event.name }} (سفارشی شده)</p>
         </a>
    </template>
  </JalaliCalendar>
<!--#endregion-->

Events

You can customize the calendar using templates. It is now possible to customize to change events and add button(s) to the top bar of the calendar.

Key	Description
`onChangeMonth`	This event occurs when the time period of the calendar display changes, use this event to receive the start and end time period of the calendar.
`onEvent`	This event will be called when an event is clicked on the calendar days.

Full Sample Code

    <JalaliCalendar
  :events="events"
  cellClass=""
  cellTodayClass=""
  :showMonthSelector="true"
  @onChangeMonth="onChangeMonthListener"
  @onEvent="eventClickListener">
  <!--#region Use Template : Custom Button On Header -->
  <template #customButton>
    <button type="button"> کلیک کنید </button>
  </template>
  <!--#endregion-->
  <!--#region Use Template : Custom Event -->
  <template #event="{ event }">
    <a href="javascript:" class="flex rounded-lg p-2 bg-rose-400 text-white">
      <p class="custom-title">{{ event.title }} (سفارشی شده)</p>
    </a>
  </template>
  <!--#endregion-->
</JalaliCalendar>