Questions tagged [react-calendar]

72 questions
3
votes
1 answer

react-calendar onChange TS2769: No overload matches this call Error

I used the response calendar library. The default code suddenly gives an onChange prop error. What should I do? (It worked before.) My code `import React, {useState} from 'react'; import Calendar from "react-calendar"; function App() { const [value,…
3
votes
0 answers

React-calendar enable/create a touch swipe feature

I'm currently using React Calendar I would like to know if it is possible to enable a touch swipe event with it? The objective is to swipe month to month left to right. I have been the documentation without any luck. Any help would be…
Romain
  • 407
  • 2
  • 9
  • 20
3
votes
2 answers

How to format date in react-calendar?

I check the document and I found the formatLongDate and I try this but it's not formatting date. I want my date like this YYYY-MMM-dd but the calendar gave me like this Wed Apr 07 2021 00:00:00 GMT+0000 How can I format this date? I'm really new to…
user8159589
  • 47
  • 1
  • 7
3
votes
3 answers

Typescript Error using react-daterange-picker "No overload matches this call."

When I try to use react-daterange-picker in my React Typescript app, I get the error No overload matches this call. Overload 1 of 2, '(props: RangeProps | SingleProps | Readonly> |…
Nyxynyx
  • 61,411
  • 155
  • 482
  • 830
3
votes
2 answers

React-nice-calendar is missing a year

I am using react-nice-calender in my application. The problem is that the year is missing from the calendar as you see in the image. How can I fix that! The code : const [date, setDate] = useState();
amani rose
  • 121
  • 1
  • 9
2
votes
0 answers

React-calendar Prop `aria-label` did not match. Server: "December 26, 2022" Client: "26 December 2022"

I am using react-calendar. The problem comes when the browser console throw an error: Prop aria-label did not match. Server: "December 26, 2022" Client: "26 December 2022" I created the Calendar component inside main tag.
daniel sas
  • 257
  • 2
  • 9
2
votes
2 answers

How to use react-big-calendar only for month view

I'm trying to use react-big-calendar, only for viewing the month and allowing the user to press a certain date, which should trigger my own function. That is I'm not interested in (and want to remove) all the functionality related to week, day,…
2
votes
0 answers

Toolbar not working after firing onNavigate method in react-big-calendar

I am new to react-big-calender. I have a small calendar on the sidebar and onClick of a date in the small calendar I am navigating the clicked week of the date in the big calendar (week view) and it works fine. But if I navigate first manually by…
2
votes
1 answer

How to customize react-calendar to show only one week at a time?

How can I show only the current week of the month? I have looked through react-calendar docs, react-multi-date-picker but couldn't find a way. Below is the output I am trying to achieve. Are there any libraries that gives this feature or is there…
Shirish Pokhrel
  • 235
  • 3
  • 13
2
votes
1 answer

Customize existing component with fixed css classes in React

I'm using react-calendar in my project, and it uses a plain CSS stylesheet (basically you import it in your project (import 'react-calendar/dist/Calendar.css';). I'm able to customize the component writing my own CSS file, but since my project is…
Leo Lozes
  • 1,358
  • 1
  • 15
  • 33
1
vote
0 answers

React calendar color an array of dates in production with css modules

I am using react calendar. I have an assay of dates ['dd-mm-yyyy', 'dd-mm-yyyy'...etc]. I am using react and css modules. In development mode I just imported the css modules and returned the styles.highlight class and the specific dates are…
daniel sas
  • 257
  • 2
  • 9
1
vote
0 answers

Dynamic weekday border color [React-Calendar]

I want to add dynamic color to border of each weekday in react-calendar. And want to change text on hover on each date. Sample Image: I tried adding onMouseEnter event using tileContent props tileContent={({date})=>(
Jaskirat
  • 11
  • 2
1
vote
1 answer

How to capitalize the first letter in the month when setting view="month"

I have to capitalize the first letter of the month in which I'm in on the calendar. For example, on the top of the calendar it says noviembre and it should read Noviembre.view of the calendar component I console logged the date that comes as props…
1
vote
1 answer

How to display date on react-calendar using DateTime value from database

I am very new to React and I found the react-calendar through searching and used it as a date picker for my app. When I save a new entity on my app, it saves the date from react-calendar to my database just fine. But when I am updating the entity on…
JayM
  • 61
  • 8
1
vote
1 answer

How to fix date format in react-calendar without changing weekday name format in ja locale?

I'm using react-calendar library and cannnot fix code anymore. When locale is 'ja', it returns dates with 'XX日'. I'm using locale 'ja', and I want to fix these dates to "XX". I tried to change locale 'en' to fix 'XX日' to 'XX'. It successed. But…
1
2 3 4 5