TopGit/react-component/calendar

SNAPSHOT GITHUB

react-component/calendar

TopGit repo profile for react-component/calendar, with GitHub repository stats and README context.

Sao

★ 1.7k

Fork

⑂ 488

Ngôn ngữ

JavaScript

Chủ đề

—

License

MIT

Cập nhật

9mo ago

Cộng tác viên

—

Trang chủ

Xem ↗

Xem trên GitHub ↗

ĐÁNH GIÁ NHANH

react-component/calendar — dự án mã nguồn mở — đang có 1.7k sao GitHub. React Calendar

Tóm tắt dựng từ metadata GitHub của chính dự án — chưa có bài review TopGit. Trang sẽ tự động cập nhật khi bài review đầy đủ được xuất bản.

VÌ SAO CHƯA CÓ REVIEW

TopGit viết bài đầy đủ cho repo có nhiều sao nhất và được yêu cầu nhiều nhất. Trang này là snapshot trong thời gian chờ — xem README gốc ở tab READ ME.

Snapshot

Stars★ 1.7k

Forks⑂ 488

LanguageJavaScript

Topic—

LicenseMIT

Homepage

View ↗

Xem cách chúng tôi review ↗

Cộng tác viên hàng đầu

Xem cộng tác viên hàng đầu

Top 21 contributors to react-component/calendar

rc-calendar

React Calendar

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

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.

Trong trang này

Tổng quan Snapshot Cộng tác viên hàng đầu

Xem trên GitHub

Repo liên quan

codecrafters-io/build-your-own-x

Master programming by recreating your favorite technologies from scratch.

★ 536.9k

sindresorhus/awesome

A curated meta-list of curated lists organized by technology domain. The repository acts as a directory pointing to hundreds of specialized awesome lists covering programming languages, platforms, frameworks, and tooling. All content is community-contributed under the CC0 public domain dedication.

★ 494.1k

public-apis/public-apis

Public APIs is a community-curated GitHub repository listing free, publicly accessible APIs across a wide range of categories, with auth type, HTTPS, and CORS noted for each entry. It's a browsable reference, not a library to install.

★ 454.8k

freeCodeCamp/freeCodeCamp

freeCodeCamp is a free, self-paced curriculum for learning to code, published as open source at freeCodeCamp/freeCodeCamp. It's a 501(c)(3) nonprofit funded by donor support, structured around six certifications in its Full-Stack Developer Curriculum, each gated by required projects instead of open-book quizzes. The repository also carries beta language certifications for developers, interview-prep resources, and the code that runs the live freecodecamp.org platform.

★ 453.4k

CÂU HỎI THƯỜNG GẶP

Trả lời nhanh

Đọc thêm về react-component/calendar ở đâu?

Trang TopGit này là một snapshot — tab "Readme" hiển thị nguyên văn README của repo (đã bỏ link, giữ ảnh). Repo GitHub ở github.com/react-component/calendar là nguồn chính thức.

react-component/calendar có phải mã nguồn mở không?

Có — react-component/calendar phát hành theo license MIT, nghĩa là mã nguồn mở để đọc, fork và (tùy license) tái sử dụng. Mã: github.com/react-component/calendar.

react-component/calendar là gì?

react-component/calendar (react-component/calendar) là dự án JavaScript trên GitHub. Theo mô tả gốc: React Calendar

Đọc đầy đủ README ở tab phía trên.

Muốn nghe thêm một ý kiến về calendar?

Hỏi một AI đọc được trang này — một cú bấm là có ngay nhận định về calendar.

Hỏi ChatGPT Hỏi Claude Hỏi Perplexity

GitHub