Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Jun 9, 2023. It is now read-only.

A simple react based calendar component to be used for selecting dates and date ranges

License

NotificationsYou must be signed in to change notification settings

toptal/simple-react-calendar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

⚠️ Please note that the repository is no longer maintained and was archived. If you need to use a calendar, please use theCalendar component fromPicasso component library orReact Day Picker library

NPM versiondepsbuild statusnpm downloadCodeFactorcodecov.iostyled with prettierTested with Jeststorybook providedsemantic-release

npm badge

A simple calendar component for React based applications.

A component that is easy to start using, yet flexible when you need customization.

Usage

You can find the component's online demohere.

Screen

Alt text

Install

Using npm

npm install simple-react-calendar

Using yarn

yarn add simple-react-calendar

Usage

importReact,{Component}from'react'importSimpleReactCalendarfrom'simple-react-calendar'classMyAppextendsComponent{render(){return<SimpleReactCalendaractiveMonth={newDate()}/>}}

Available component properties

All of the properties are optional, just rendering<Calendar /> will already give you a working calendar component.

PropertiesPropTypeDescription
MonthHeaderComponentobject orfuncreplace the month header of the component with this nodeobject orclass function
activeMonthdatePropType*any day within the month that you want initially displayed
blockClassNamestringbase class name that will be used as a class prefix (see)
daysOfWeek[string]array of string represents the days
disableDaysOfWeekbooldisable rendering days of the week
disabledIntervals[{start: datePropType, end: datePropType}]disabled intervals of dates. Array of objects[{start: Date(), end: Date()}]. When user try to select disabled date or date range which consist disabled date(s) inside,Notice will appear
headerNextArrowelementany kind of react element will be rendered into the next month button(element)
headerNextTitlestringtext will be rendered as the title of the next month buttonNext month
headerPrevArrowelementany kind of react element will be rendered into the previous month button(element)
headerPrevTitlestringtext will be rendered as the title of the previous month button, default isPrevious month
highlighted{start: datePropType, end: datePropType}highlighted dates. Object{start: Date(), end: Date()}. Undefined by default
maxDatedatePropType*latest date available for selection
minDatedatePropType*earliest date available for selection
minNumberOfWeeksnumberminimum number of weeks in a month. Undefined by default
modestring one ofrange orsingleselection mode, one of eitherrange orsingle. Default issingle
onDayHoverfunca function that is called on mouseMove on days
onMonthChangefunca function that is called whenever user changes the month. If defined then you have to handle month changing by yourself by changingactiveMonth property
onSelectfunca function that is called whenever user
onSelectionProgressfunca function that is called whenever user changes
rangeLimitnumberlimit number of days for selection (number)
selectedselected dates. Can be ether singleDate object ifmode issingle, or object{start: Date(), end: Date()} ifmode isrange
todaydatePropType*current date (useful when you want to show current date in different time zone). Default isnew Date() selects a date (insingle mode) or a dates range (range mode) selection. Works only in therange mode. When the function is passed then automatic range selection handing will be disabled.
weekStartsOnnumberthe index of the first day of the week (0 - Sunday). Default is 1 - Monday

datePropType -number,string orinstanceOf(Date)

Render Prop's Components

You can easily override any rendered part of the calendar by providing the proper render function as a Prop.

Render Prop nameDefault usageDefault Render Prop Component
renderDay(props) => <Day {...props} />RenderPropsComponents/Day/Day.tsx
renderDayOfWeek(props) => <DayOfWeek {...props} />RenderPropsComponents/DayOfWeek/DayOfWeek.tsx
renderNotice(props) => <Notice {...props} />RenderPropsComponents/Notice/Notice.tsx

Expose date helper methods

You can easily override any helper methods, all of them exposed as pure functions.

Helper functionDefault function
getDayFormattedgetDayFormatted
getISODategetISODate
getNoticeContentgetNoticeContent

Class Names

simple-react-calendar follows BEM-like class naming approach and usessingle block name as a prefix. Default block class name iscalendar, soelements will have names likecalendar-day,calendar-month etc.

Block class name can be overrided withblockClassName prop (see above).

DescriptionDefault Class NameModifier Class Names
Calendar (root element).calendar
Calendar month header.calendar-month_header
Calendar month header title (month name).calendar-month_header_title
Calendar header button (month switcher).calendar-header_button
  • .is-prev - when is the previous month button
  • .is-next - when is the next month button
  • .is-disabled - when the button is disabled
Calendar week header (week days).calendar-days_of_week
Calendar week header day (week day).calendar-days_of_week_day
  • .is-weekend - when the day is the weekend
Calendar month (weeks wrapper element).calendar-month
Calendar week (days wrapper element).calendar-week
Calendar day.calendar-day
  • .is-selected - when the date is selected
  • .is-highlighted - when the date is highlighted
  • .is-today - when the date is current one
  • .is-start_selection - when the date is start day of selection
  • .is-end_selection - when the date is end day of selection
  • .is-current_month - when the date belongs to the current month
  • .is-prev_month - when the date belongs to the previous month
  • .is-next_month - when the date belongs to the next month
  • .is-weekend - when the date is the weekend
  • .is-working_day - when the date is the working day
  • .is-selectable - when the date can be selected
  • .is-not_selectable - when the date can't be selected
Calendar notice (notice element).calendar-notice

Local development environment

Fork this repository and clone your version of the repository

Install dependencies

  yarn

Start example server locally

  yarn start

You now have examples running onhttp://localhost:9000

Local StoryBook

Fork this repository and clone your version of the repository

Install dependencies

  yarn

Start example server locally

  yarn storybook

You now have examples running onhttp://localhost:6006

About

A simple react based calendar component to be used for selecting dates and date ranges

Topics

Resources

License

Contributing

Stars

Watchers

Forks

Packages

No packages published

Contributors17

[8]ページ先頭
©2009-2025 Movatter.jp