react-simple-calender

A simple calender component for React

📦 Installation

Install via npm or yarn:

npm install react-simple-calender date-fns

or

yarn add react-simple-calender date-fns

Usage/Examples

import React, { useState } from 'react';
import Calender from 'react-simple-calender';

function App() {

  const [date, setDate] = useState(new Date());

  return (
    <div className="App">
      <Calender
        preselectedDates={[
          '2024-03-20',
          '2024-03-23'
        ]}
        disabledDates={[
          '2024-03-28',
          '2024-03-29',
          '2024-04-2'
        ]}
        multiselect={false}
        onChange={(params) => {setDate(params.date); console.log(JSON.stringify(params))}}
        titleFormat={'MMMM YYYY'}
        daysFormat={2}
      />
    </div>
  );
}

export default App;

Guide

  import Calender from 'react-simple-calender'

| Prop name | Type | Description | | :-------- | :------- | :------------------------- | | calenderSize | number | Optional. This will determine the height and width of the Calender container, default value is 300. | | selectable | boolean | Optional. If you want the dates on the calender to be selectable, true by default | | disabledDates | string[] | Optional. An array of dates to disable. Example ['2024-05-07', '2024-05-08', etc] | | minDate | string[] | Optional. Dates before this day will disabled by default | | onChange | OnChangeEvent { date: Date, selectedDates: string[] } | Optional. Dates before this day will disabled by default | | preselectedDates | string[] | Optional. Dates before this day will disabled by default, Example ['2024-05-07', '2024-05-08', etc] | | titleFormat | 'MMM YY', 'MMM YYY', 'MMMM YY', 'MMMM YYYY', 'MM YY'; | Optional. Prop to change title format | | daysFormat | number | Optional. Prop to choose how many letters are shown for days i.e Sun or S | | calenderStyle | CalenderStyle | Optional. Custom style for all calender components | | renderHeader | (props: HeaderProps) => void | Optional.Render a custom calender header | | multiselect | boolean | Optional. Enable multiple date selection | | renderMonthView | (props: MonthViewProps) => void | Optional. Render a custom view for Month list | | renderYearView | (props: YearViewProps) => void | Optional. Render a custom view for Year list |