Giter Site home page Giter Site logo

wojtekmaj / react-calendar Goto Github PK

View Code? Open in Web Editor NEW
3.4K 30.0 484.0 7.25 MB

Ultimate calendar for your React app.

Home Page: https://projects.wojtekmaj.pl/react-calendar

License: MIT License

HTML 0.11% CSS 2.19% TypeScript 97.70%
react calendar date date-picker month-picker

react-calendar's Introduction

npm downloads CI

react-calendar

Ultimate calendar for your React app.

  • Pick days, months, years, or even decades
  • Supports range selection
  • Supports virtually any language
  • No moment.js needed

tl;dr

  • Install by executing npm install react-calendar or yarn add react-calendar.
  • Import by adding import Calendar from 'react-calendar'.
  • Use by adding <Calendar />. Use onChange prop for getting new values.

Demo

A minimal demo page can be found in sample directory.

Online demo is also available!

Before you continue

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:

Getting started

Compatibility

Your project needs to use React 16.8 or later.

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.

Legacy browsers

If you need to support legacy browsers like Internet Explorer 10, you will need to use 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 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.

Usage

Here's an example of basic usage:

import { useState } from 'react';
import Calendar from 'react-calendar';

type ValuePiece = Date | null;

type Value = ValuePiece | [ValuePiece, ValuePiece];

function MyApp() {
  const [value, onChange] = useState<Value>(new Date());

  return (
    <div>
      <Calendar onChange={onChange} value={value} />
    </div>
  );
}

Check the sample directory in this repository for a full working example. For more examples and more advanced use cases, check Recipes in 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:

import 'react-calendar/dist/Calendar.css';

User guide

Calendar

Displays a complete, interactive calendar.

Props

Prop name Description Default value Example values
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
  • String: "class1 class2"
  • Array of strings: ["class1", "class2 class3"]
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
  • Date: new Date()
  • 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')
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')
formatMonth Function called to override default formatting of month names. Can be used to use your own formatting function. (default formatter) (locale, date) => formatDate(date, 'MMM')
formatMonthYear Function called to override default formatting of months and years. Can be used to use your own formatting function. (default formatter) (locale, date) => formatDate(date, 'MMMM YYYY')
formatShortWeekday Function called to override default formatting of weekday names (shortened). Can be used to use your own formatting function. (default formatter) (locale, date) => formatDate(date, 'dd')
formatWeekday Function called to override default formatting of weekday names. Can be used to use your own formatting function. (default formatter) (locale, date) => formatDate(date, 'dd')
formatYear Function called to override default formatting of year in the top navigation section. Can be used to use your own formatting function. (default formatter) (locale, date) => formatDate(date, 'YYYY')
goToRangeStartOnSelect Whether to go to the beginning of the range when selecting the end of the range. true false
inputRef A prop that behaves like ref, but it's passed to main <div> rendered by <Calendar> component. n/a
  • Function:
    (ref) => { this.myCalendar = ref; }
  • Ref created using createRef:
    this.ref = createRef();

    inputRef={this.ref}
  • Ref created using useRef:
    const ref = useRef();

    inputRef={ref}
locale Locale that should be used by the calendar. Can be any IETF language tag. Note: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. Server locale/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()
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()
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 }) => alert(`Current view: ${view}, date: ${date.toLocaleDateString(locale)}`)
next2AriaLabel aria-label attribute of the "next on higher level" button on the navigation pane. n/a "Jump forwards"
next2Label Content of the "next on higher level" button on the navigation pane. Setting the value explicitly to null will hide the icon. "»"
  • String: "»"
  • React element: <DoubleNextIcon />
nextAriaLabel aria-label attribute of the "next" button on the navigation pane. n/a "Next"
nextLabel Content of the "next" button on the navigation pane. Setting the value explicitly to null will hide the icon. "›"
  • String: "›"
  • React element: <NextIcon />
onActiveStartDateChange Function called when the user navigates from one view to another using previous/next button. Note that this function will not be called when e.g. drilling up from January 2021 to 2021 or drilling down the other way around.
action signifies the reason for active start date change and can be one of the following values: "prev", "prev2", "next", "next2", "drillUp", "drillDown", "onChange".
n/a ({ action, activeStartDate, value, view }) => alert('Changed view to: ', activeStartDate, view)
onChange Function called when the user clicks an item (day on month view, month on year view and so on) on the most detailed view available. n/a (value, event) => alert('New date is: ', value)
onClickDay Function called when the user clicks a day. n/a (value, event) => alert('Clicked day: ', value)
onClickDecade Function called when the user clicks a decade. n/a (value, event) => alert('Clicked decade: ', value)
onClickMonth Function called when the user clicks a month. n/a (value, event) => alert('Clicked month: ', value)
onClickWeekNumber Function called when the user clicks a week number. n/a (weekNumber, date, event) => alert('Clicked week: ', weekNumber, 'that starts on: ', date)
onClickYear Function called when the user clicks a year. n/a (value, event) => alert('Clicked year: ', value)
onDrillDown Function called when the user drills down by clicking a tile. n/a ({ activeStartDate, view }) => alert('Drilled down to: ', activeStartDate, view)
onDrillUp Function called when the user drills up by clicking drill up button. n/a ({ activeStartDate, view }) => alert('Drilled up to: ', activeStartDate, view)
onViewChange Function called when the user navigates from one view to another using drill up button or by clicking a tile.
action signifies the reason for view change and can be one of the following values: "prev", "prev2", "next", "next2", "drillUp", "drillDown", "onChange".
n/a ({ action, activeStartDate, value, view }) => alert('New view is: ', view)
prev2AriaLabel aria-label attribute of the "previous on higher level" button on the navigation pane. n/a "Jump backwards"
prev2Label Content of the "previous on higher level" button on the navigation pane. Setting the value explicitly to null will hide the icon. "«"
  • String: "«"
  • React element: <DoublePreviousIcon />
prevAriaLabel aria-label attribute of the "previous" button on the navigation pane. n/a "Previous"
prevLabel Content of the "previous" button on the navigation pane. Setting the value explicitly to null will hide the icon. "‹"
  • String: "‹"
  • React element: <PreviousIcon />
returnValue Which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be "start", "end" or "range". The latter will cause an array with start and end values to be passed. "start" "range"
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
showDoubleView Whether to show two months/years/… at a time instead of one. Defaults showFixedNumberOfWeeks prop to be true. false true
showFixedNumberOfWeeks Whether to always show fixed number of weeks (6). Forces showNeighboringMonth prop to be true. false true
showNavigation Whether a navigation bar with arrows and title shall be rendered. true false
showNeighboringCentury Whether decades from next century shall be rendered to fill the entire last row in. false true
showNeighboringDecade Whether years from next decade shall be rendered to fill the entire last row in. false true
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
showWeekNumbers Whether week numbers shall be shown at the left of MonthView or not. false true
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
  • String: "class1 class2"
  • Array of strings: ["class1", "class2 class3"]
  • Function: ({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 3 ? 'wednesday' : null
tileContent Allows to render custom content within a given calendar item (day on month view, month on year view and so on). n/a
  • String: "Sample"
  • React element: <TileContent />
  • Function: ({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 0 ? <p>It's Sunday!</p> : null
tileDisabled Pass a function to determine if a certain day should be displayed as disabled. n/a ({ activeStartDate, date, view }) => date.getDay() === 0
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
  • Date: new Date()
  • String: 2017-01-01
  • An array of dates: [new Date(2017, 0, 1), new Date(2017, 7, 1)]
  • An array of strings: ['2017-01-01', '2017-08-01']
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"

MonthView, YearView, DecadeView, CenturyView

Displays a given month, year, decade and a century, respectively.

Props

Prop name Description Default value Example values
activeStartDate The beginning of a period that shall be displayed. n/a new Date(2017, 0, 1)
hover The date over which the user is hovering. Used only when selectRange is enabled, to render a “WIP” range when the user is selecting range. n/a new Date(2017, 0, 1)
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()
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()
onClick Function called when the user clicks an item (day on month view, month on year view and so on). n/a (value) => alert('New date is: ', value)
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
  • String: "class1 class2"
  • Array of strings: ["class1", "class2 class3"]
  • Function: ({ date, view }) => view === 'month' && date.getDay() === 3 ? 'wednesday' : null
tileContent Allows to render custom content within a given item (day on month view, month on year view and so on). Note: For tiles with custom content you might want to set fixed height of react-calendar__tile to ensure consistent layout. n/a ({ date, view }) => view === 'month' && date.getDay() === 0 ? <p>It's Sunday!</p> : null
value Calendar value. Can be either one value or an array of two values. n/a
  • Date: new Date()
  • An array of dates: [new Date(2017, 0, 1), new Date(2017, 7, 1)]
  • String: 2017-01-01
  • An array of strings: ['2017-01-01', '2017-08-01']

Useful links

License

The MIT License.

Author

Wojciech Maj Wojciech Maj

Thank you

Sponsors

Thank you to all our sponsors! Become a sponsor and get your image on our README on GitHub.

Backers

Thank you to all our backers! Become a backer and get your image on our README on GitHub.

Top Contributors

Thank you to all our contributors that helped on this project!

Top Contributors

react-calendar's People

Contributors

anushreepatil avatar benhlel0slim avatar dependabot[bot] avatar fahadsohail482 avatar felixh10r avatar fffed avatar frankleng avatar gabe-lingco avatar gwenaelp avatar jameskraus avatar jamieegeberg avatar julio-saito-linx avatar jwd2a avatar krzysiek1507 avatar ksoldau avatar madelynorfhlaith avatar mathieudoyon avatar meszaros-lajos-gyorgy avatar nikolas avatar noor0 avatar oceandrama avatar ritz078 avatar same31 avatar ssi02014 avatar szdc avatar third774 avatar utkarshpramodgupta avatar valeriivasin avatar wojtekmaj avatar zigotica avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-calendar's Issues

More explicit documentation on how to override formatting

For example it's not clear how to use 'formatShortWeekday' .

example is currently: (value) => formatDate(value, 'dd')

But when supplying my own formatting function as in the example I get an error complaining about calling incorrectly calling .replace() in the source code. Questions I have would be - is 'value' passed to the custom function supposed to be a date? Are we supposed to perform some native js date operation and return a value? A fully working example would be even better. thx

Event calendar styling?

My use case here is simple, I'd like to style a tile based on some event related to particular dates, ie if I have an event on the day I'd like to put a single dot in the tile to indicate that there is an event that day?

How would you go about implementing this? thanks!

onActiveDateChange not working

I was trying to add onActiveDateChange listener in the Calendar component and when I click on the next/previous buttons it doesnt trigger

Cannot pick range through multiple months

Hi.
First, I pick a start date. Then, I go the next month, and would like to pick an end date, but for some reason, my start date is lost. Here is my code:

isOverlapping = (roomId, month) => {
  const url = "https://api.example.com?"
    fetch(`${url}roomId=r${roomId}&date=${month.format("YYYY-MM")}`)
      .then(res => res.json())
      .then(overlaps => this.setState({overlaps}))
}

tileDisabled = ({date}) => {
  date = moment(date)
  return date.isBefore(moment(this.state.tomorrow)) ||
         this.state.overlaps[date.format("YYYY-MM-DD")]
}

handleActiveDateChange = ({activeStartDate}) => {
  const month = moment(activeStartDate)
  this.setState({showRange: false, month})
  this.isOverlapping(this.state.reservation.roomId, month)
}

handleDatesChange = dates => {
  const [from, to] = dates
  this.setState(({reservation}) => ({
    showRange: true,
    reservation: {...reservation, from, to}
  }))
  const [fromFormatted, toFormatted] = dates
    .map(date => moment(date).format("YYYY-MM-DD")) 
  this.updateRoute("from", fromFormatted)
  this.updateRoute("to", toFormatted)
  this.showNotification("info", "Dates were chosen.")
}

...
render() {
...
 <Calendar
  activeStartDate={moment(month).toDate()}
  minDate={tomorrow}
  tileDisabled={this.tileDisabled}
  selectRange
  returnValue="range"
  minDetail="month"
  value={showRange ? [from, to] : null}
  onActiveDateChange={this.handleActiveDateChange}
  onChange={this.handleDatesChange}
/>
...
}

It seems that when i use setState inside activeDatesChange, it resets the start date. Could you help me to find a workaround for this problem?

Manually entered dates reset on edit attempt or calendar icon click

Clicking away from and back onto the manual date entry field after user inputs will reset those fields. Similarly, clicking on the calendar icon will throw away the manually entered date. The behavior I expected is that the calendar icon would open up the date picker to the manually entered date and represent it's place on the calendar itself. But instead it clears it... thoughts?

🏝 Holiday notice

Hey community!
I'll be on holidays from 5.02.2018 to 18.02.2018. During this time I may respond slowly or not at all, depending on my connectivity. Please allow more time for your questions to be answered!

Thanks,
@wojtekmaj

onClickWeek and onClickMonthLabel

Hi there wojtekmaj

I'm really enjoying using your Calendar component.

The showWeekNumbers prop is especially useful for me. Would it be possible to add a click listener for the week numbers similar to the other onClick{period} props.

For my use, I'm also disabling all views aside from Month using the minDetail prop. Since the month label no longer changes the view, I'd like to be able to attach a click handler on the month label. Could that be a prop as well?

Thanks again for the great module!

Selected date does not update properly when transformed somehow outside React-Calendar

There is a specific case explained in #27 which causes React-Calendar to misbehave. If the date returned in onChange callback is not what ends up in value prop (e.g. is expanded to a full week like described), React-Calendar will fail to update the value for the second time if the same date is clicked.

This is caused by React-Calendar:

  • Assuming the value in props is the same as in state, and comparing values of old and new props in componentWillReceiveProps
  • Calling onChange before React-Calendar updates itself

Can I provide a callback when visible range changes?

Thanks for the project!

Is there a way to provide a callback when the visible range changes? In my case I'm have other components that rely on knowing the visible range (e.g. the month of December in the Month view) and update if the user navigates to the next or previous months.

Digging through the source it looks like the next and previous buttons set the activeStartDate, but there is no way to be notified that the activeStartDate has changed (e.g. onActiveStartDateChange). Am I missing something? Is this a feature you or other users might find useful?

Thanks!

Compatibility with React 17

In React 17, lifecycle methods componentWillMount, componentWillUpdate and componentWillReceiveProps will be deprecated. These are to be replaced with getDerivedStateFromProps static method.

Need unSelect or onBlur

Hello, I'm using your calendar to filter a list of events based on which day is selected. However, I need a way to show all events again when the day is unselected or the calendar is blurred. Is there a way to do this?

Thank you!

Broken layout in IE11

The layout is broken in IE11:

skarmavbild 2018-03-05 kl 12 11 30

Compared to Chrome:
skarmavbild 2018-03-05 kl 12 12 48

Right now I'm unsure if (1) the problem is on my end, or (2) if it's because of the quirky flexbox implementation in IE11, or (3) if you're not supporting IE?

Can I remove the standard stylesheet somehow so I can style it myself?

react-calendar differently handle edges of the range

Should these 2 tests pass? First doesn't pass but second does.

  it('returns hasActive flag set to true when passed date is start day of the value array', () => {
    const result = getTileClasses({
      value: [new Date(2017, 0, 1), new Date(2017, 0, 31)],
      date: new Date(2017, 0, 1),
      dateType: 'day',
    });

    expect(result.includes('react-calendar__tile--active')).toBe(false);
    expect(result.includes('react-calendar__tile--hasActive')).toBe(true);
    expect(result.includes('react-calendar__tile--hover')).toBe(false);
  });

  it('returns hasActive flag set to true when passed date is end day of the value array', () => {
    const result = getTileClasses({
      value: [new Date(2017, 0, 1), new Date(2017, 0, 31)],
      date: new Date(2017, 0, 31),
      dateType: 'day',
    });

    expect(result.includes('react-calendar__tile--active')).toBe(false);
    expect(result.includes('react-calendar__tile--hasActive')).toBe(true);
    expect(result.includes('react-calendar__tile--hover')).toBe(false);
  });

selectRange example?

I can no longer get react calendar to work when selectRange is true. It used to be that after selecting two dates, onChange was called with the selected range. But I can't make that work anymore and there's not reference/example I can compare my code to.

Could an example with selectRange be added to the repo and homepage?

Type clash between react-calendar and react-date-picker

When two packages are installed then following type clash exists

Packages versions:
"react-calendar": "^2.7.0",
"react-date-picker": "^6.5.0"

Why aren't they declared inside module?

(3,6): error TS2300: Duplicate identifier 'Detail'.

ERROR in \node_modules\react-calendar\index.d.ts
(4,6): error TS2300: Duplicate identifier 'DateCallback'.

ERROR in node_modules\react-date-picker\index.d.ts
(3,6): error TS2300: Duplicate identifier 'Detail'.

ERROR in \node_modules\react-date-picker\index.d.ts
(4,6): error TS2300: Duplicate identifier 'DateCallback'.

Changing activeStartDate does not change calendar view

Hi,

I'm trying to use the library with a custom external navigation.
So on click on next/prev of my custom navigation I update the prop "activeStartDate" but the calendar not change.

I saw that the "activeStartDate" in the state of Calendar component is not updated by props.

Question: Clicking on days from a neighboring month doesn't render that month?

Hello,
first of all, thank you for this library.
I'm using it to create a small app like a schedule or agenda with learning purposes.
I've noticed that in your online demo when you click a day that belongs to another month (previous or next) it will take you to that month.
However I can't achieve this. I've looked at your sample and it's code and I've done the same but for some reason it doesn't work. The day gets selected but I have to manually change to the month from the navigation component.
I've checked the list of props and I didn't find one that changes that. Am I missing something here?
Here's my code so far:

import React from 'react';
import Calendar from 'react-calendar/dist/entry.nostyle';
import 'styles/calendarStyle.css';

export default class HomePage extends React.Component {
  state = {
    value: new Date(),
  }

  onChange = (value) => {
    this.setState({ value });
  }

  render() {
    const { value } = this.state;
    return (
      <div>
        <Calendar
          locale="es"
          onChange={this.onChange}
          value={value}
        />
      </div>
    );
  }
}

Thank you for this library and for your time!

The component is taking time in account when minDate/maxDate is used somehow inconsistently

Simple Repro

/*lib references*/

const calendar1Container = document.getElementById( "calendar1" ),
   calendar2Container = document.getElementById( "calendar2" );

ReactDom.render( <Calendar maxDetail="month" minDate={new Date()} onChange={date=>alert(date.getLocaleString())} />, calendar1Container);

ReactDom.render( <Calendar maxDetail="month" minDate={new Date()} onChange={dateRange=>alert(dateRange[0].getLocaleString())} selectRange />, calendar2Container);

Date in callback on the first calendar will include component render time.
Date in callback on the first calendar will have time of 00.00.00.

`weekStartDay` and `highlightWeekends` props

I use react-date-picker version 5 but I would like to migrate to React 16 that's why I want to upgrade react-date-picker to version 6. However, Calendar component is missing in version 6. After installing react-calendar it appears that weekStartDay and highlightWeekends properties which are present in react-date-picker version 5 are missing in react-calendar component. Could you help me?

How can I migrate react-date-picker version 5 to react-calendar and set week start day?

Add option to disable prev2/next2 labels

Hi! I'd like to be able to disable the prev2 and next2 buttons entirely. Passing prev2Label={ null } and next2Label={ null } render buttons without text, but don't actually remove the buttons.

(It's possible to hide these through CSS, but it'd be nice to disable via props as well to avoid even rendering the buttons in the first place.)

tileClassName / tileContent for weekNumbers

Hi wojtekmaj

Would it be possible for the tileClassName and tileContent concepts to work with the weekNumbers?

I'd like to be able to color the cells for weekNumbers the same way you can for regular days.

Thanks!

renderChildren

When using renderChildren there is still the original view visible and the return value is only appended. For example if I return "hello world" in renderChildren and i show the Month view It shows "1hello world" for the first day of the month.

Implement activeStartDate as optional prop for Calendar, too

Hey @wojtekmaj ,

I'm trying to use the activeStartDate to push my calendar to the active day, but it's not working.

I've set the minDate and activeStartDate to the same date, but whenever I open the calendar, I get that it still opens on the current day today.

screen shot 2017-11-30 at 11 32 00 am

This forces me to click next to get to the right date. Any idea what's up?

Write more unit tests

  • Calendar
    • displays a view with a given value when value is given
    • displays a view with activeStartDate when no value is given and activeStartDate is given
    • displays a view with today's date when no value and no activeStartDate is given
  • MonthView, YearView, DecadeView, CenturyView
    • renders proper view when given activeStartDate
    • applies tileClassName to its tiles when given a string
    • applies tileClassName to its tiles conditionally when given a function that returns a string
    • renders tileContent in its tiles when given a node
    • renders tileContent in its tiles conditionally when given a function that returns a node
  • WeekNumbers
    • renders static divs as children when not given onClickWeekNumber
    • renders buttons as children when given onClickWeekNumber
    • calls onClickWeekNumber function with proper arguments when clicked a week number (ISO 8601)
    • calls onClickWeekNumber function with proper arguments when clicked a week number (US)

MonthView Support

Wojciech,

First, thank you for continuing to develop and support this product. I was confused and disappointed to see that zippyui and Radu Brehar (https://github.com/radubrehar) seemed to completely disappear and abandon the react-date-picker. I think this collection of date utilities is one of the best around. I am excited to see that you are keeping it up with the latest versions of react.

I am using the MonthView from react-date-picker 5.3.28. I see that you have migrated some of the components (like MonthView, YearView, and DecadeView) to this library. I've noticed that some functionality is no longer supported in MonthView.
Specifically, the following props:

weekNumbers
highlightRangeOnMouseMove
defaultRange
viewDate
constrainViewDate
range
onViewDateChange
onActiveDateChange
onRangeChange

What are your plans for supporting these? Most important to me are weekNumbers, range, onViewDateChange, onActiveDateChange, and onRangeChange. I am very willing to help. I was able to get a copy of the original 5.X code before it went away: https://github.com/lemmingapex/react-date-picker

I don't know if that is at all helpful to you. Please let me know what your thoughts are and how I can help. Thanks!

weekNumber '11' glitches

Hi wojtekmaj

I noticed an issue with the weekNumbers. If you navigate to March 2015, "11" appears twice. If you navigate forward or backward by a month, a duplicate "11" gets pinned for each time you do that.

The same thing happens on March 2009.

Thanks for looking into it!

How can I use multiple values array?

i can't use value more than 2 value of array

<Calendar
   onClickDay={value => alert('Clicked day: ', value)}
   value={[new Date(), new Date().setDate(12)]}
/>

it work
but if value is [new Date(), new Date().setDate(12) , new Date().setDate(14)]
error invalid date

and How can i custome style of value active

How to style individual dates?

Hi,

I stumbled across this library and it seems to be very useful for me !
I wonder if it's possible to dynamically style day views (for instance: if my data shows the day as occupied , I style it red, ...)

Thanks in advance for taking your time :)

Broken layout in Safari mobile

On a desktop browser this calendar appears just fine, but when I view this on my iPhone 7 in my Safari app, the last weekday's dates get pushed to the next line like this:

image

"ReferenceError: window is not defined" when rendering server side

Hi,

in the src/shared/locales.js the method getDefaultLocales assumes that window object is in scope, which is not true when rendering the component server side. Would it be possible to add an extra check for window object existence or solve it differently, so that there are no errors when rendering this awesome component server-side?

Thanks,
Robert

react-calendar doesn't support in Internet Explorer

It works another browsers. But It's not work in IE11. The error is as follow.

"TypeError: Object doesn't support property or method 'isNaN'.

bundle.js
...
if (Number.isNaN(valueFromDate.getTime())) {
throw new Error('Invalid date: ' + value);
}
...

support for minimum/maximum dates

Could you please add support for minumum and maximum dates, so that the calendar will be blocked when I try to navigate to dates beyond allowed range?

Support for different locals

Thank you for all your hard work of bringing this back.

I noticed when updating that few features were missing. Most of them I was able to go around but there are issues regarding locals. As Intl.DateTimeFormat does not support Icelandic.

I need the weekDayNames because current implementation does not work with Icelandic (is-IS). Intl.DateTimeFormat method that this library uses does not return correct names for days. The same is for months, the months names are wrong

image

This should return 'Fös' instead of 'Fri'

image

'M11' should be 'Nóv'

Index property for months

Is there a property to change to months index to start at 1 instead of zero, ie march = 3 but the output on the calendar is april, I can manually do this but its very hacky

I just want to display and select the month

I just want to display and select the month
month-calendar

The current behavior is when I click a month it will open the calendar for that month.
What I need is, when I click a month It only returning a value WITHOUT opening the calendar.
Is that possible?

Option to set calendar month index start at 1

Is there a property to change to months index to start at 1 instead of zero, ie march = 3 but the output on the calendar is april, I can manually do this but its very hacky, question, enhancement

Week view?

Hi there,

Very nice component, thank you, I was wondering if a week view is planned somehow in the near future? or any advice on how I could achieve displaying such a view if possible?

thanks
Fabrice

How should I call tileDisabled?

Hi! I am building a reservation system, and using an external fetch, to determine that which days are disabled.

When I call my fetch, I return a list of days in a given month, with the value true or false, depending on if the day is already booked by someone else or not.

How should I call tileDisabled every time someone jumps between months with the «, ‹, ›, » buttons?
Or could you recommend another approach? my fetch is something like this.

  isOverlapping = (roomId, month) => {
    const url = "https://apiurl.com/getOverlaps?"
    return fetch(`${url}roomId=${roomId}&month=${month}`)
      .then(res => res.json())
      .catch(e => console.error(e))
  }

Then I get the JSON of the following format:

[
  "2018-03-01": {
      beforeNoon: false,
      afterNoon: true
   },
  "2018-03-02": {
      beforeNoon: true,
      afterNoon: false
   },
   ... and so on, the whole month
]

Here, the customer arrives at 2018 March 1 at 14:00, and leaves on 2018 March 2 10:00

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.