Jalali-calendar-package NPM

hello everyone. this package is a webpack of jalali calendar, and consists of javascript, html and css. just vanilla js, so you can use it in any project.

Note: still under development. use versions 1.0.6 and later.

Jalali Calendar Package - User Guide

This guide provides step-by-step instructions on how to integrate and use the Jalali Calendar in your web projects, supporting frameworks like Angular, React, or plain JavaScript.

Table of Contents
Installation
Basic Usage
Integration with Angular
Integration with React
Customizing Styles
Handling Events
Frequently Asked Questions

Installation
To use the Jalali Calendar in your project, first, install the package via npm:
```
npm install jalali-calendar-package
```
You also need to install moment-jalaali if it’s not included:
```
npm install moment-jalaali
```
Basic Usage
In a vanilla JavaScript project, you can initialize the calendar by simply importing it and passing a DOM element as the container.
HTML
```
<div id="calendar-container"></div>
```
JavaScript
```
import Calendar from 'jalali-calendar-package';

const calendar = new Calendar('#calendar-container');
calendar.initializeCalendar();
```
This will render the Jalali Calendar inside the #calendar-container element.

Integration with Angular To integrate the Jalali Calendar into an Angular project, follow these steps:

3.1 Install the package

npm install jalali-calendar-package

3.2 Create a New Component Generate a new component to display the calendar:

ng generate component jalali-calendar

3.3 Import and Use the Calendar in the Component In your jalali-calendar.component.ts file:

import { Component, AfterViewInit } from '@angular/core';
import Calendar from 'jalali-calendar-package';

@Component({
    selector: 'app-jalali-calendar',
    templateUrl: './jalali-calendar.component.html',
    styleUrls: ['./jalali-calendar.component.scss']
})
export class JalaliCalendarComponent implements AfterViewInit {

    ngAfterViewInit() {
        const calendar = new Calendar('#calendar-container');
        calendar.initializeCalendar();
    }
}

In your jalali-calendar.component.html file:

<div id="calendar-container"></div>

Run your Angular project and the Jalali Calendar will be displayed inside the component.

Integration with React To use the Jalali Calendar in a React project, follow these steps:

4.1 Install the package

npm install jalali-calendar-package

4.2 Use Calendar in a React Component In your CalendarComponent.js file:

import React, { useEffect } from 'react';
import Calendar from 'jalali-calendar-package';

const CalendarComponent = () => {

    useEffect(() => {
    const calendar = new Calendar('#calendar-container');
    calendar.initializeCalendar();
    }, []);

    return <div id="calendar-container"></div>;
}

export default CalendarComponent;

This will render the calendar inside the #calendar-container once the component mounts.

Customizing Styles You can easily override the default styles of the calendar to match your project's design.
5.1 Customizing CSS In your project, add custom styles for the calendar by targeting its classes:
```
.calendar-header {
    background-color: #f1f1f1;
    color: #333;
}

.calendar-day {
    font-size: 14px;
    border: 1px solid #ddd;
}

.current-day {
    background-color: #4caf50;
    color: white;
}
```
The calendar uses the following CSS classes that you can override:
```
.calendar-header
.calendar-day
.current-day
.prev-month
.next-month
```

Handling Events The calendar package provides several built-in event handlers for mouse actions like clicking or hovering over days.

6.1 Event Listeners You can handle events such as:

Click
Right-click (context menu)
Mouse enter
Mouse leave

Example of attaching event listeners when creating the calendar:

const calendar = new Calendar('#calendar-container');

calendar.onClick = (event, dateInfo) => {
    console.log('Day clicked:', dateInfo.format('jYYYY/jMM/jDD'));
};

calendar.onRightClick = (event, dateInfo) => {
    event.preventDefault();
    console.log('Right-clicked on:', dateInfo.format('jYYYY/jMM/jDD'));
};

calendar.initializeCalendar();

Frequently Asked Questions Q: Can I use this calendar with a different localization? Yes, the package uses the moment-jalaali library, which supports Persian (Farsi) and other localizations.
Q: How do I add additional event handlers? You can easily customize the calendar by adding your own mouse or keyboard event listeners using the addMouseActions method.