npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2019 – Ryan Hefner

rc-calendar

v9.15.5

Published

React Calendar

Downloads

1,099,824

Readme

rc-calendar


React Calendar

NPM version build status Test coverage gemnasium deps npm download Code Quality: Javascript Total alerts

Screenshots

Feature

  • support ie9,ie9+,chrome,firefox,safari
  • support date, month, year, decade select panel
  • support week number
  • support en_US and zh_CN locale(UI), use moment.utcOffset to set timezone
  • support aria and keyboard accessibility

Keyboard

  • Previous month (PageUp)
  • Next month (PageDown)
  • tab into hour input: Last hour(Up), Next hour(Down)
  • tab into hour input: Last minute(Up), Next minute(Down)
  • tab into hour input: Last second(Up), Next second(Down)
  • Last year (Control + left)
  • Next year (Control + right)

install

rc-calendar

Usage

import Calendar from 'rc-calendar';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<Calendar />, container);

Development

npm install
npm start

Example

http://localhost:8002/examples/

online example:

http://react-component.github.io/calendar/examples/index.html

API

rc-calendar props

name type default description
prefixCls String prefixCls of this component
className String additional css class of root dom node
style Object additional style of root dom node
dateRender (current, value) => React.Node date cell
renderSidebar () => React.Node side bar
renderFooter (mode) => React.Node extra footer
value moment current value like input's value
defaultValue moment defaultValue like input's defaultValue
locale Object import from 'rc-calendar/lib/locale/en_US' calendar locale
format String | String[] depends on whether you set timePicker and your locale use to format/parse date(without time) value to/from input. When an array is provided, all values are used for parsing and first value for display.
disabledDate Function(current:moment):Boolean whether to disable select of current date
disabledTime Function(current:moment):Object a function which return a object with member of disabledHours/disabledMinutes/disabledSeconds according to rc-time-picker
showDateInput Boolean true whether to show input on top of calendar panel
showWeekNumber Boolean false whether to show week number of year
showToday Boolean true whether to show today button
showOk Boolean auto whether has ok button in footer
timePicker React Element rc-timer-picker/lib/module/panel element
onSelect Function(date: moment) called when a date is selected from calendar
onClear Function() called when a date is cleared from calendar
onChange Function(date: moment) called when a date is changed inside calendar (next year/next month/keyboard)
onOk Function(date: moment) called when ok button is pressed, only if it's visible
dateInputPlaceholder String date input's placeholder
mode enum('time', 'date', 'month', 'year', 'decade') 'date' control which kind of panel should be shown
onPanelChange Function(date: moment, mode) called when panel changed
clearIcon ReactNode specific the clear icon.
inputMode string text Change the keyboard in mobile device

rc-calendar/lib/RangeCalendar props

name type default description
prefixCls String prefixCls of this component
className String additional css class of root dom node
style Object additional style of root dom node
renderSidebar () => React.Node side bar
renderFooter () => React.Node extra footer
selectedValue moment[] current selected value range. with two elements.
defaultSelectedValue moment[] default selected value range
locale Object import from 'rc-calendar/lib/locale/en_US' calendar locale
format String depends on whether you set timePicker and your locale use to format/parse date(without time) value to/from input
disabledDate Function(current:moment):Boolean whether to disable select of current date
showWeekNumber Boolean false whether to show week number of year
showToday Boolean true whether to show today button
showOk Boolean auto whether has ok button in footer
showClear Boolean false whether has clear button in header
timePicker React Element rc-timer-picker/lib/module/panel element
onSelect Function(date: moment[]) called when a date range is selected from calendar
onInputSelect Function(date: moment[]) called when a valid date entered in input
onClear Function() called when a date range is cleared from calendar
onChange Function(date: moment[]) called when a date range is changed inside calendar (next year/next month/keyboard)
onOk Function(date: moment) called when ok button is pressed, only if it's visible
dateInputPlaceholder String[] range date input's placeholders
disabledTime Function(current: moment[], type:'start'|'end'):Object a function which return a object with member of disabledHours/disabledMinutes/disabledSeconds according to rc-time-picker
showDateInput Boolean true whether to show date inputs on top of calendar panels
type enum('both','start', 'end') both whether fix start or end selected value. check start-end-range example
mode enum('date', 'month', 'year', 'decade')[] ['date', 'date'] control which kind of panels should be shown
onPanelChange Function(date: moment[], mode) called when panels changed
hoverValue moment[] control hover value
onHoverChange Function(hoverValue: moment[]) called when hover value change
clearIcon ReactNode specific the clear icon.

rc-calendar/lib/MonthCalendar props

name type default description
prefixCls String prefixCls of this component
className String additional css class of root dom node
style Object additional style of root dom node
value moment current value like input's value
defaultValue moment defaultValue like input's defaultValue
locale Object import from 'rc-calendar/lib/locale/en_US' calendar locale
disabledDate Function(current:moment):Boolean whether to disable select of current month
onSelect Function(date: moment) called when a date is selected from calendar
monthCellRender function Custom month cell render method
monthCellContentRender function Custom month cell content render method,the content will be appended to the cell.
onChange Function(date: moment) called when a date is changed inside calendar (next year/next month/keyboard)
renderFooter () => React.Node extra footer

rc-calendar/lib/Picker props

name type default description
prefixCls String prefixCls of this component
calendar Calendar React Element
disabled Boolean whether picker is disabled
placement String|Object one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']
align Object: alignConfig of [dom-align](https://github.com/yiminghe/dom-align) value will be merged into placement's align config.
animation String index.css support 'slide-up'
transitionName String css class for animation
value moment|moment[] current value like input's value
defaultValue moment|moment[] defaultValue like input's defaultValue
onChange Function called when select a different value
onOpenChange (open:boolean) => void called when open/close picker
open Boolean current open state of picker. controlled prop
getCalendarContainer () => HTMLElement () => {return document.body;} dom node where calendar to be rendered into
dropdownClassName string additional className applied to dropdown

rc-calendar/lib/FullCalendar props

name type default description
prefixCls String prefixCls of this component
Select React Component Class rc-select Component Class
value moment current value like input's value
defaultValue moment defaultValue like input's defaultValue
defaultType string date default panel type: date/month
type string panel type: date/month
onTypeChange function(type) called when panel type change
fullscreen bool false
monthCellRender function Custom month cell render method
dateCellRender function Custom date cell render method
monthCellContentRender function Custom month cell content render method,the content will be appended to the cell.
dateCellContentRender function Custom date cell content render method,the content will be appended to the cell.
onSelect Function(date: moment) called when a date is selected from calendar

Test Case

npm test

Coverage

npm run coverage

open coverage/ dir

License

rc-calendar is released under the MIT license.