react-pick-calendar

A scrollable calendar with no division into months for React App.

Allows you to select dates and view information about dates

install and import

Install by executing npm i react-pick-calendar

Import by adding import Calendar from 'react-pick-calendar';

Use by adding <Calendar/>

terms

fDate - date string in YYYY-MM-DD format

busy - busy day color (red)

pick - picked day color (green)

days - Object containing properties fDate and Any values

day becomes busy

daysOff - Array containing fDate

day becomes busy

daysPick - Array containing fDate

day becomes pick

Calendar object - Object, the expected properties: days, daysOff, daysPick

const calendarObject = {
    days: {
        fDate: Any,
        fDate: Any,
        ...
    },
    daysOff: [fDate, fDate, ...],
    daysPick: [fDate, fDate, ...]
};

props

| name | type | default | description | | ------------- | ----------- | ----------- | ----------- | | edit | bool | false | true allow to edit daysPick| | noOffset | bool | false | true cancel displaying the calendar from the first date in daysPick, if exist| | get | func | | Lazy loading async function that to receives a content from the backend. It gets the Date objects - start and end. Should return a Calendar object| | onChange | func | (daysPick, changedDays, pick) => {} | A function after daysPick handle change| | onDay | obj | {} | An object with functions that provide to each Day: onMouseOver, onContextMenu, onTouchHold. Each function receives Day's information and the Date object.| | maxPick | number | 366 | Maximum size of daysPick| | onError | func | | A function executing in any error case | | content | obj | | external Store| | setContent | func | | external Dispatch| | triggerGet | any | | Trigger starting Get-function hook| | triggerNew | any | | Trigger starting rerender hook| | startDate | str | | fDate, the calendar first date. Otherwise infinite scrolling to past| | endDate | str | | fDate, the calendar last date. Otherwise infinite scrolling to future|

onChange

A function that receives variables after every handle change daysPick:

• daysPick: [fDate, fDate, ...] - new daysPick property of Calendar object
• changedDays: [fDate, fDate, ...] - array of changed dates
• pick: bool - if true, changed days became pick, if false - otherwise

onDay

An object with functions that provide to each Day:

• onMouseOver
• onContextMenu
• onTouchHold (combine of touchEvents)

Each function receives variables from Day component:

• DOM element
• Day's information - value form calendarObject.days[fDate]
• date: Date object
• dayOff: bool - true if calendarObject.daysOff includes this Day

Only defined functions will be executed.

function yourFunction(element, info, date, dayOff) {
    // your code
};

const onDay = {
    onMouseOver: action,
    onContextMenu: action,
    onTouchHold: action
};

external Store

You can convert this component to uncontrolled and use any external store.

content - store with Calendar object where each Array replaced by Set:

const content = {
    days: {
        fDate: Any,
        fDate: Any,
        ...
    },
    daysOff: new Set([fDate, fDate, ...]),
    daysPick: new Set([fDate, fDate, ...])
};

If setContent is undefined, content is the initial state for internal storage

setContent - dispatch, that receives a function that convert previous content to new content. It is working like setState(prevState => {}) from React.useState hook.

Example with React.useState hook:

import React from "react";
import Calendar from 'react-pick-calendar';

function MyComponent() {
    const [state, setState] = React.useState({
        days: {},
        daysOff: new Set(),
        daysPick: new Set()
    });

    return (<Calendar content={state} setContent={setState} />);
}

Example with MobX:

import React from "react";
import ReactDOM from "react-dom";
import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react-lite";
import Calendar from 'react-pick-calendar';

class Store {
    state = {
        days: {},
        daysOff: new Set(),
        daysPick: new Set()
    }

    constructor() {
        makeAutoObservable(this)
    }

    setState(func) {
        this.state = func(this.state)
    }
}

const calendarStore = new Store();
const CalendarView = observer(({ store }) => <Calendar content={store.state} setContent={(func) => store.setState(func)} />);
ReactDOM.render(<CalendarView store={calendarStore} />, document.getElementById('root');