Security News
TC39 Advances 10+ ECMAScript Proposals: Key Features to Watch
TC39 is meeting in Tokyo this week and they have approved nearly a dozen proposals to advance to the next stages.
react-calendar
Advanced tools
react-calendar is a flexible and customizable calendar component for React applications. It allows developers to easily integrate a calendar into their projects, providing functionalities such as date selection, navigation between months and years, and customization of calendar appearance.
Basic Calendar
This is the most basic usage of the react-calendar package, rendering a simple calendar component.
<Calendar />
Date Selection
Allows users to select a date. The selected date is managed via state in the parent component.
<Calendar onChange={setDate} value={date} />
Range Selection
Enables users to select a range of dates. The selected range is managed via state in the parent component.
<Calendar selectRange={true} onChange={setDateRange} value={dateRange} />
Custom Tile Content
Allows customization of the content of each tile in the calendar. In this example, a 'Special' label is added to Sundays.
<Calendar tileContent={({ date, view }) => view === 'month' && date.getDay() === 0 ? <p>Special</p> : null} />
Navigation Between Views
Allows setting the default view of the calendar to 'year', 'month', 'decade', or 'century'.
<Calendar defaultView='year' />
react-datepicker is a popular date picker component for React. It offers a wide range of features including date and time selection, range selection, and localization support. Compared to react-calendar, react-datepicker provides more advanced date and time picking functionalities but may require more configuration for basic calendar views.
react-big-calendar is a powerful calendar component for React that supports events, drag-and-drop, and customizable views. It is more feature-rich compared to react-calendar, making it suitable for applications that require complex scheduling and event management.
fullcalendar-react is a React wrapper for FullCalendar, a highly customizable and feature-rich calendar library. It supports a wide range of views, event management, and customization options. It is more comprehensive than react-calendar, making it ideal for applications that need extensive calendar functionalities.
Calendars for React 0.14.3.
Not just calendar component, but a modular toolkit for building everything related to calendars in React, such as Datepickers.
In early alpha stage, documentation and features will arrive.
npm install
npm run
One year calendar (Demo):
<Calendar startDate={ moment() }
endDate={ moment().endOf('year') } <!-- Base calendar compoment -->
weekNumbers={true}
size={12}
mods={
[ <!-- Pass modifier objects to change rendering -->
{
date: moment(),
classNames: [ 'current' ],
component: [ 'day', 'month', 'week' ] <!-- This shows the current day, week, and month. -->
}
]
}
/>
Each component can be used separately AND passed to other components to modify rendering.
<Month date={moment()} />
If a modifier is passed without date it modifies all components of this type in the tree. Useful, for example, for passing callbacks.
<Calendar firstMonth={1}
date={moment("2014-01-01")}
weekNumbers={true}
size={12}
startDate={ moment() }
endDate={ moment().endOf('year') } <!-- Base calendar compoment -->
weekNumbers={true}
size={12}
mods={
[
{
component: [ 'day' ],
events: {
onClick: (date) => alert(date)
}
}
]
} />
All mouse and touch events are supported on all components with react style onCamelCase props (eg. onClick). Event handlers receives two arguments - date in moment.js format and the original react event.
There is no style by default, but an example theme using bootstrap is included in less/bootstrap-theme.less.
react-calendar uses SuitCSS style (a variant of BEM) to make default class hierarchy,
if you want to add a class that is separate from that hierarchy just pass classes
prop to any component. classes
is an object with keys as class names and values as
boolean-like values (this will be probably changed to just passing array of classes in
future API). If you want to add SuitCSS modifier classes (eg rc-Day--current
),
pass similar object via modifiers
prop (again this will probably become an array
in next version of API).
For example:
<Day date={moment()} mods={[{bar: true}]} />
will yield the following classes: "rc-Day rc-Day--bar".
FAQs
Ultimate calendar for your React app.
The npm package react-calendar receives a total of 492,313 weekly downloads. As such, react-calendar popularity was classified as popular.
We found that react-calendar demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TC39 is meeting in Tokyo this week and they have approved nearly a dozen proposals to advance to the next stages.
Security News
Our threat research team breaks down two malicious npm packages designed to exploit developer trust, steal your data, and destroy data on your machine.
Security News
A senior white house official is urging insurers to stop covering ransomware payments, indicating possible stricter regulations to deter cybercrime.