search

ijavad805 / react-datepicker

a cool datepicker
https://ijavad805.github.io/react-datepicker/
34 stars 5 forks source link
calender component datepicker jalali jalali-date react

readme

react-datepicker Demo Live

alt text

NPM Version NPM Downloads npm bundle size

A cool datepicker and calendar for english and persian you can see some features here :

alt text

🌟 If you like this Datepicker, please bookmark it on your github with the star button.

Installation

Use the package manager npm to install @ijavad805/react-datepicker.

npm install @ijavad805/react-datepicker

Usage

import { Datepicker } from '@ijavad805/react-datepicker';
// simple
function AppSimple() {
  return <Datepicker />;
}

// full options
function App() {
  return (
    <Datepicker
      footer={(moment, setValue) => {
        return (
          <>
            <div
              onClick={() => {
                if (setValue) setValue(moment());
              }}
            >
              Today
            </div>
          </>
        );
      }}
      closeWhenSelectADay={true} // boolean
      dayEffects={[
        {
          day: '2022-09-12',
          color: 'red',
          dotColor: 'red',
          title: 'What ever you want',
        },
      ]}
      disabled={false} // disable input
      disabledDate={(day) => day === moment()} // today should be disabled
      format={'YYYY-MM-DD'}
      input={<input placeholder="Select a date" />} // whatever you want
      onOpen={() => {
        console.log('datepicker is open');
      }}
      lang={'en'} // en and fa
      loading={false} // show loading in datepicker if is open
      modeTheme={'dark'} // dark and light
      theme={'blue'} // blue , orange , red , green , yellow
      defaultValue={moment()}
      adjustPosition={'auto'} // auto, right-top, left-top, right-bottom, left-bottom, modal
      onChange={(val: any) => {
        console.log(val.format());
      }}
    />
  );
}

Calendar ( VERSION 1 ) Demo

Calendar Properties

The Calendar props interface provides configuration options for customizing the behavior and appearance of the react-datepicker component. Here's a summary of its properties:

Property Type Description
lang "en" \| "fa" Language for the calendar. Either "en" for English or "fa" for Farsi (Persian).
theme "blue" Theme for the calendar. Currently, only "blue" is supported.
events IEvent[] An array of IEvent objects representing the events to be displayed on the calendar.
onDay (date: string) => { className?: string; } A function to customize the appearance of a day. It takes a date string as input and should return an object with an optional className property to apply custom styles.
disabledDate (date: moment.Moment) => boolean A function that determines whether a date should be disabled. It takes a Moment.js date object as input and should return true to disable the date or false to enable it.
onClickEvent (item: IEvent) => void A function to handle event click events. It receives an IEvent object as its argument.
onDoubleClickEvent (item: IEvent) => void A function to handle event double-click events. It receives an IEvent object as its argument.
onDropEvent (item: IEvent) => void A function to handle event drop events. It receives an IEvent object as its argument, to enable drag and drop functionality, this prop should not be undefined
onDateClick (date: string) => void A function to handle date click events. It receives a date string as its argument.
onMonthChange (start: string, end: string) => void A function to handle month change events. It receives two date strings, start and end, indicating the new visible date range on the calendar.
style React.CSSProperties Additional CSS styles to apply to the calendar component.
allowClear boolean allow user to clear the value

These properties allow you to configure and customize the behavior and appearance of the Calendar component in your application.

IEvent Interface

The IEvent interface represents an individual event that can be displayed on the calendar. It provides details about the event. Here's a summary of its properties:

Property Type Description
id number A unique identifier for the event.
title React.ReactNode \| string The title of the event, which can be either a Component or a string.
date DateEvent The date of the event, which can be a date string or an object with start and end properties.
style React.CSSProperties Additional CSS styles for the event.
className string Additional CSS class for the event.
dotColor string Color for a dot associated with the event.
disabled boolean A flag indicating if the event is disabled.
icon React.ReactNode A React node for an icon associated with the event.

These properties allow you to specify the details and appearance of events to be displayed on the calendar.

const App = () => {
  return (
    <Calendar
      lang="en"
      theme="blue"
      events={[
        {
          id: 1, // it should unique
          title: 'Test',
          date: '2023-09-16',
          className: 'test',
          dotColor: '#000',
          disabled: false,
          icon: '$', // also you can use component
          style: {
            // what ever you want
          },
        },
      ]}
      onDropEvent={(item: IEvent) => { // for enabling drag and drop option you should pass this function
        console.log(item);
      }}
      onClickEvent={(item: IEvent) => console.log(item)}
      onDoubleClickEvent={(item: IEvent) => console.log(item)}
      style={{
        height: 600,
      }}
      onDateClick={(date: moment.Moment) => console.log(date)}
    />
  );
};

Report issues

My friend, if you see any bugs, please tell me: