Socket
Socket
Sign inDemoInstall

react-calendar

Package Overview
Dependencies
Maintainers
3
Versions
87
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-calendar - npm Package Compare versions

Comparing version 4.6.0 to 4.6.1

2

dist/cjs/index.d.ts

@@ -8,4 +8,4 @@ import Calendar from './Calendar.js';

export type { CalendarProps } from './Calendar.js';
export type { NavigationLabelFunc, OnClickFunc, OnClickWeekNumberFunc, TileClassNameFunc, TileContentFunc, TileDisabledFunc, } from './shared/types.js';
export type { NavigationLabelFunc, OnArgs, OnClickFunc, OnClickWeekNumberFunc, TileArgs, TileClassNameFunc, TileContentFunc, TileDisabledFunc, } from './shared/types.js';
export { Calendar, CenturyView, DecadeView, MonthView, Navigation, YearView };
export default Calendar;

@@ -5,6 +5,8 @@ import React from 'react';

import WeekNumbers from './MonthView/WeekNumbers.js';
import type { CalendarType, DeprecatedCalendarType } from './shared/types.js';
type MonthViewProps = {
calendarType?: CalendarType | DeprecatedCalendarType;
showWeekNumbers?: boolean;
} & React.ComponentProps<typeof Weekdays> & React.ComponentProps<typeof WeekNumbers> & React.ComponentProps<typeof Days>;
} & Omit<React.ComponentProps<typeof Weekdays> & React.ComponentProps<typeof WeekNumbers> & React.ComponentProps<typeof Days>, 'calendarType'>;
declare const MonthView: React.FC<MonthViewProps>;
export default MonthView;

@@ -6,3 +6,3 @@ import React from 'react';

type DayProps = {
calendarType?: CalendarType | DeprecatedCalendarType;
calendarType: CalendarType | DeprecatedCalendarType | undefined;
classes?: string[];

@@ -9,0 +9,0 @@ currentMonthIndex: number;

@@ -7,3 +7,3 @@ import React from 'react';

activeStartDate: Date;
calendarType?: CalendarType | DeprecatedCalendarType;
calendarType: CalendarType | DeprecatedCalendarType | undefined;
showFixedNumberOfWeeks?: boolean;

@@ -10,0 +10,0 @@ showNeighboringMonth?: boolean;

@@ -74,5 +74,5 @@ "use strict";

var date = _a.date, otherTileProps = __rest(_a, ["date"]);
return (react_1.default.createElement(Day_js_1.default, __assign({ key: date.getTime() }, otherProps, otherTileProps, { activeStartDate: activeStartDate, currentMonthIndex: monthIndex, date: date })));
return (react_1.default.createElement(Day_js_1.default, __assign({ key: date.getTime() }, otherProps, otherTileProps, { activeStartDate: activeStartDate, calendarType: calendarTypeOrDeprecatedCalendarType, currentMonthIndex: monthIndex, date: date })));
}, offset: offset, start: start, value: value, valueType: valueType }));
}
exports.default = Days;

@@ -5,3 +5,3 @@ /// <reference types="react" />

type WeekdaysProps = {
calendarType?: CalendarType | DeprecatedCalendarType;
calendarType: CalendarType | DeprecatedCalendarType | undefined;
formatShortWeekday?: typeof defaultFormatShortWeekday;

@@ -8,0 +8,0 @@ formatWeekday?: typeof defaultFormatWeekday;

@@ -5,3 +5,3 @@ /// <reference types="react" />

activeStartDate: Date;
calendarType?: CalendarType | DeprecatedCalendarType;
calendarType: CalendarType | DeprecatedCalendarType | undefined;
onClickWeekNumber?: OnClickWeekNumberFunc;

@@ -8,0 +8,0 @@ onMouseLeave?: () => void;

@@ -8,4 +8,4 @@ import Calendar from './Calendar.js';

export type { CalendarProps } from './Calendar.js';
export type { NavigationLabelFunc, OnClickFunc, OnClickWeekNumberFunc, TileClassNameFunc, TileContentFunc, TileDisabledFunc, } from './shared/types.js';
export type { NavigationLabelFunc, OnArgs, OnClickFunc, OnClickWeekNumberFunc, TileArgs, TileClassNameFunc, TileContentFunc, TileDisabledFunc, } from './shared/types.js';
export { Calendar, CenturyView, DecadeView, MonthView, Navigation, YearView };
export default Calendar;

@@ -5,6 +5,8 @@ import React from 'react';

import WeekNumbers from './MonthView/WeekNumbers.js';
import type { CalendarType, DeprecatedCalendarType } from './shared/types.js';
type MonthViewProps = {
calendarType?: CalendarType | DeprecatedCalendarType;
showWeekNumbers?: boolean;
} & React.ComponentProps<typeof Weekdays> & React.ComponentProps<typeof WeekNumbers> & React.ComponentProps<typeof Days>;
} & Omit<React.ComponentProps<typeof Weekdays> & React.ComponentProps<typeof WeekNumbers> & React.ComponentProps<typeof Days>, 'calendarType'>;
declare const MonthView: React.FC<MonthViewProps>;
export default MonthView;

@@ -6,3 +6,3 @@ import React from 'react';

type DayProps = {
calendarType?: CalendarType | DeprecatedCalendarType;
calendarType: CalendarType | DeprecatedCalendarType | undefined;
classes?: string[];

@@ -9,0 +9,0 @@ currentMonthIndex: number;

@@ -7,3 +7,3 @@ import React from 'react';

activeStartDate: Date;
calendarType?: CalendarType | DeprecatedCalendarType;
calendarType: CalendarType | DeprecatedCalendarType | undefined;
showFixedNumberOfWeeks?: boolean;

@@ -10,0 +10,0 @@ showNeighboringMonth?: boolean;

@@ -69,4 +69,4 @@ var __assign = (this && this.__assign) || function () {

var date = _a.date, otherTileProps = __rest(_a, ["date"]);
return (React.createElement(Day, __assign({ key: date.getTime() }, otherProps, otherTileProps, { activeStartDate: activeStartDate, currentMonthIndex: monthIndex, date: date })));
return (React.createElement(Day, __assign({ key: date.getTime() }, otherProps, otherTileProps, { activeStartDate: activeStartDate, calendarType: calendarTypeOrDeprecatedCalendarType, currentMonthIndex: monthIndex, date: date })));
}, offset: offset, start: start, value: value, valueType: valueType }));
}

@@ -5,3 +5,3 @@ /// <reference types="react" />

type WeekdaysProps = {
calendarType?: CalendarType | DeprecatedCalendarType;
calendarType: CalendarType | DeprecatedCalendarType | undefined;
formatShortWeekday?: typeof defaultFormatShortWeekday;

@@ -8,0 +8,0 @@ formatWeekday?: typeof defaultFormatWeekday;

@@ -5,3 +5,3 @@ /// <reference types="react" />

activeStartDate: Date;
calendarType?: CalendarType | DeprecatedCalendarType;
calendarType: CalendarType | DeprecatedCalendarType | undefined;
onClickWeekNumber?: OnClickWeekNumberFunc;

@@ -8,0 +8,0 @@ onMouseLeave?: () => void;

{
"name": "react-calendar",
"version": "4.6.0",
"version": "4.6.1",
"description": "Ultimate calendar for your React app.",

@@ -23,4 +23,4 @@ "type": "module",

"build-js": "yarn build-js-esm && yarn build-js-cjs && yarn build-js-cjs-package",
"build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext",
"build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs",
"build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm",
"build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs --verbatimModuleSyntax false",
"build-js-cjs-package": "echo '{\n \"type\": \"commonjs\"\n}' > dist/cjs/package.json",

@@ -35,3 +35,3 @@ "clean": "rimraf dist",

"unit": "vitest",
"watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & yarn build-js-cjs-package & nodemon --watch src --ext css --exec \"yarn copy-styles\""
"watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & nodemon --watch src --ext css --exec \"yarn copy-styles\""
},

@@ -65,7 +65,5 @@ "keywords": [

"eslint-config-wojtekmaj": "^0.9.0",
"husky": "^8.0.0",
"jsdom": "^21.1.0",
"happy-dom": "^12.6.0",
"nodemon": "^3.0.0",
"prettier": "^2.7.0",
"pretty-quick": "^3.1.0",
"prettier": "^3.0.0",
"react": "^18.2.0",

@@ -75,3 +73,3 @@ "react-dom": "^18.2.0",

"typescript": "^5.0.0",
"vitest": "^0.30.1"
"vitest": "^0.34.0"
},

@@ -98,6 +96,6 @@ "peerDependencies": {

"type": "git",
"url": "https://github.com/wojtekmaj/react-calendar.git"
"url": "https://github.com/wojtekmaj/react-calendar.git",
"directory": "packages/react-calendar"
},
"funding": "https://github.com/wojtekmaj/react-calendar?sponsor=1",
"packageManager": "yarn@3.1.0"
}
"funding": "https://github.com/wojtekmaj/react-calendar?sponsor=1"
}
[![npm](https://img.shields.io/npm/v/react-calendar.svg)](https://www.npmjs.com/package/react-calendar) ![downloads](https://img.shields.io/npm/dt/react-calendar.svg) [![CI](https://github.com/wojtekmaj/react-calendar/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-calendar/actions)
# React-Calendar
# react-calendar

@@ -30,3 +30,3 @@ <div align="center">

React-Calendar is under constant development. This documentation is written for React-Calendar 4.x branch. If you want to see documentation for other versions of React-Calendar, use dropdown on top of GitHub page to switch to an appropriate tag. Here are quick links to the newest docs from each branch:
react-calendar is under constant development. This documentation is written for react-calendar 4.x branch. If you want to see documentation for other versions of react-calendar, use dropdown on top of GitHub page to switch to an appropriate tag. Here are quick links to the newest docs from each branch:

@@ -42,15 +42,15 @@ - [v3.x](https://github.com/wojtekmaj/react-calendar/blob/v3.x/README.md)

React-Calendar uses modern web technologies. That's why it's so fast, lightweight and easy to style. This, however, comes at a cost of [supporting only modern browsers](https://caniuse.com/#feat=internationalization).
react-calendar uses modern web technologies. That's why it's so fast, lightweight and easy to style. This, however, comes at a cost of [supporting only modern browsers](https://caniuse.com/#feat=internationalization).
#### Legacy browsers
If you need to support legacy browsers like Internet Explorer 10, you will need to use [Intl.js](https://github.com/andyearnshaw/Intl.js/) or another Intl polyfill along with React-Calendar.
If you need to support legacy browsers like Internet Explorer 10, you will need to use [Intl.js](https://github.com/andyearnshaw/Intl.js/) or another Intl polyfill along with react-calendar.
#### My locale isn't supported! What can I do?
If your locale isn't supported, you can use [Intl.js](https://github.com/andyearnshaw/Intl.js/) or another Intl polyfill along with React-Calendar.
If your locale isn't supported, you can use [Intl.js](https://github.com/andyearnshaw/Intl.js/) or another Intl polyfill along with react-calendar.
### Installation
Add React-Calendar to your project by executing `npm install react-calendar` or `yarn add react-calendar`.
Add react-calendar to your project by executing `npm install react-calendar` or `yarn add react-calendar`.

@@ -80,7 +80,7 @@ ### Usage

Check the [sample directory](https://github.com/wojtekmaj/react-calendar/tree/main/sample) in this repository for a full working example. For more examples and more advanced use cases, check [Recipes](https://github.com/wojtekmaj/react-calendar/wiki/Recipes) in [React-Calendar Wiki](https://github.com/wojtekmaj/react-calendar/wiki).
Check the [sample directory](https://github.com/wojtekmaj/react-calendar/tree/main/sample) in this repository for a full working example. For more examples and more advanced use cases, check [Recipes](https://github.com/wojtekmaj/react-calendar/wiki/Recipes) in [react-calendar Wiki](https://github.com/wojtekmaj/react-calendar/wiki).
### Custom styling
If you want to use default React-Calendar styling to build upon it, you can import React-Calendar's styles by using:
If you want to use default react-calendar styling to build upon it, you can import react-calendar's styles by using:

@@ -101,9 +101,9 @@ ```ts

| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| activeStartDate | The beginning of a period that shall be displayed. If you wish to use React-Calendar in an uncontrolled way, use `defaultActiveStartDate` instead. | (today) | `new Date(2017, 0, 1)` |
| activeStartDate | The beginning of a period that shall be displayed. If you wish to use react-calendar in an uncontrolled way, use `defaultActiveStartDate` instead. | (today) | `new Date(2017, 0, 1)` |
| allowPartialRange | Whether to call onChange with only partial result given `selectRange` prop. | `false` | `true` |
| calendarType | Type of calendar that should be used. Can be `'gregory`, `'hebrew'`, `'islamic'`, `'iso8601'`. Setting to `"gregory"` or `"hebrew"` will change the first day of the week to Sunday. Setting to `"islamic"` will change the first day of the week to Saturday. Setting to `"islamic"` or `"hebrew"` will make weekends appear on Friday to Saturday. | Type of calendar most commonly used in a given locale | `'iso8601'` |
| className | Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
| defaultActiveStartDate | The beginning of a period that shall be displayed by default. If you wish to use React-Calendar in a controlled way, use `activeStartDate` instead. | (today) | `new Date(2017, 0, 1)` |
| defaultValue | Calendar value that shall be selected initially. Can be either one value or an array of two values. If you wish to use React-Calendar in a controlled way, use `value` instead. | n/a | <ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]` |
| defaultView | Determines which calendar view shall be opened initially. Does not disable navigation. Can be `"month"`, `"year"`, `"decade"` or `"century"`. If you wish to use React-Calendar in a controlled way, use `view` instead. | The most detailed view allowed | `"year"` |
| className | Class name(s) that will be added along with `"react-calendar"` to the main react-calendar `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
| defaultActiveStartDate | The beginning of a period that shall be displayed by default. If you wish to use react-calendar in a controlled way, use `activeStartDate` instead. | (today) | `new Date(2017, 0, 1)` |
| defaultValue | Calendar value that shall be selected initially. Can be either one value or an array of two values. If you wish to use react-calendar in a controlled way, use `value` instead. | n/a | <ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]` |
| defaultView | Determines which calendar view shall be opened initially. Does not disable navigation. Can be `"month"`, `"year"`, `"decade"` or `"century"`. If you wish to use react-calendar in a controlled way, use `view` instead. | The most detailed view allowed | `"year"` |
| formatDay | Function called to override default formatting of day tile labels. Can be used to use your own formatting function. | (default formatter) | `(locale, date) => formatDate(date, 'd')` |

@@ -119,9 +119,9 @@ | formatLongDate | Function called to override default formatting of day tile `abbr` labels. Can be used to use your own formatting function. | (default formatter) | `(locale, date) => formatDate(date, 'dd MMM YYYY')` |

| locale | Locale that should be used by the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). | User's browser settings | `"hu-HU"` |
| maxDate | Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-Calendar will ensure that no later date is selected. | n/a | Date: `new Date()` |
| maxDate | Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although react-calendar will ensure that no later date is selected. | n/a | Date: `new Date()` |
| maxDetail | The most detailed view that the user shall see. View defined here also becomes the one on which clicking an item will select a date and pass it to onChange. Can be `"month"`, `"year"`, `"decade"` or `"century"`. | `"month"` | `"year"` |
| minDate | Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-Calendar will ensure that no earlier date is selected. | n/a | Date: `new Date()` |
| minDate | Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although react-calendar will ensure that no earlier date is selected. | n/a | Date: `new Date()` |
| minDetail | The least detailed view that the user shall see. Can be `"month"`, `"year"`, `"decade"` or `"century"`. | `"century"` | `"decade"` |
| navigationAriaLabel | `aria-label` attribute of a label rendered on calendar navigation bar. | n/a | `"Go up"` |
| navigationAriaLive | `aria-live` attribute of a label rendered on calendar navigation bar. | `undefined` | `"polite"` |
| navigationLabel | Content of a label rendered on calendar navigation bar. | (default label) | `` ({ date, label, locale, view }) => `Current view: ${view}, date: ${date.toLocaleDateString(locale)}` `` |
| navigationLabel | Content of a label rendered on calendar navigation bar. | (default label) | ``({ date, label, locale, view }) => `Current view: ${view}, date: ${date.toLocaleDateString(locale)}` `` |
| nextAriaLabel | `aria-label` attribute of the "next" button on the navigation pane. | n/a | `"Next"` |

@@ -150,3 +150,3 @@ | nextLabel | Content of the "next" button on the navigation pane. Setting the value explicitly to null will hide the icon. | `"›"` | <ul><li>String: `"›"`</li><li>React element: `<NextIcon />`</li></ul> |

| showNeighboringMonth | Whether days from previous or next month shall be rendered if the month doesn't start on the first day of the week or doesn't end on the last day of the week, respectively. | `true` | `false` |
| selectRange | Whether the user shall select two dates forming a range instead of just one. **Note**: This feature will make React-Calendar return array with two dates regardless of returnValue setting. | `false` | `true` |
| selectRange | Whether the user shall select two dates forming a range instead of just one. **Note**: This feature will make react-calendar return array with two dates regardless of returnValue setting. | `false` | `true` |
| showWeekNumbers | Whether week numbers shall be shown at the left of MonthView or not. | `false` | `true` |

@@ -156,4 +156,4 @@ | tileClassName | Class name(s) that will be applied to a given calendar item (day on month view, month on year view and so on). | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li><li>Function: `({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 3 ? 'wednesday' : null`</li></ul> |

| tileDisabled | Pass a function to determine if a certain day should be displayed as disabled. | n/a | <ul><li>Function: `({ activeStartDate, date, view }) => date.getDay() === 0`</li></ul> |
| value | Calendar value. Can be either one value or an array of two values. If you wish to use React-Calendar in an uncontrolled way, use `defaultValue` instead. | n/a | <ul><li>Date: `new Date()`</li><li>String: `2017-01-01`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li><li>An array of strings: `['2017-01-01', '2017-08-01']`</li></ul> |
| view | Determines which calendar view shall be opened. Does not disable navigation. Can be `"month"`, `"year"`, `"decade"` or `"century"`. If you wish to use React-Calendar in an uncontrolled way, use `defaultView` instead. | The most detailed view allowed | `"year"` |
| value | Calendar value. Can be either one value or an array of two values. If you wish to use react-calendar in an uncontrolled way, use `defaultValue` instead. | n/a | <ul><li>Date: `new Date()`</li><li>String: `2017-01-01`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li><li>An array of strings: `['2017-01-01', '2017-08-01']`</li></ul> |
| view | Determines which calendar view shall be opened. Does not disable navigation. Can be `"month"`, `"year"`, `"decade"` or `"century"`. If you wish to use react-calendar in an uncontrolled way, use `defaultView` instead. | The most detailed view allowed | `"year"` |

@@ -179,3 +179,3 @@ ### MonthView, YearView, DecadeView, CenturyView

- [React-Calendar Wiki](https://github.com/wojtekmaj/react-calendar/wiki)
- [react-calendar Wiki](https://github.com/wojtekmaj/react-calendar/wiki)

@@ -190,9 +190,7 @@ ## License

<tr>
<td>
<img src="https://github.com/wojtekmaj.png?s=100" width="100">
<td >
<img src="https://avatars.githubusercontent.com/u/5426427?v=4&s=128" width="64" height="64" alt="Wojciech Maj">
</td>
<td>
Wojciech Maj<br />
<a href="mailto:kontakt@wojtekmaj.pl">kontakt@wojtekmaj.pl</a><br />
<a href="https://wojtekmaj.pl">https://wojtekmaj.pl</a>
<a href="https://github.com/wojtekmaj">Wojciech Maj</a>
</td>

@@ -199,0 +197,0 @@ </tr>

@@ -12,4 +12,6 @@ import Calendar from './Calendar.js';

NavigationLabelFunc,
OnArgs,
OnClickFunc,
OnClickWeekNumberFunc,
TileArgs,
TileClassNameFunc,

@@ -16,0 +18,0 @@ TileContentFunc,

@@ -167,3 +167,3 @@ import warning from 'tiny-warning';

function isDeprecatedCalendarType(
calendarType?: CalendarType | DeprecatedCalendarType,
calendarType: CalendarType | DeprecatedCalendarType | undefined,
): calendarType is DeprecatedCalendarType {

@@ -170,0 +170,0 @@ return calendarType !== undefined && calendarType in DEPRECATED_CALENDAR_TYPES;

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc