Stack Overflow
Stack Overflow

Questions tagged [react-big-calendar]

Full featured calendar React component for managing events and dates.

React-big-calendar is full featured calendar React component for managing events and dates. It uses modern flexbox instead of table for layout making it super responsive and performant.

299 questions
2
votes
2 answers

React-big-calendar incorrect time display

I'm trying to display events using React-big-calendar. I have a problem with a time format. The data I'm using when passing events to the calendar is as follows: { end: Tue Nov 03 2020 21:42:16 GMT+0100 (Central European Standard Time) …
szymix12
  • 79
  • 1
  • 8
2
votes
1 answer

React-big-calendar : day view with time ending at 01am on next days

I'm currently working on a booking system, and I'm using react-big-calendar for that. The context : an establishment open at 9am and close at 2am (next day) and their client can book from 23pm to 01am. The goal : display a day view starting at 9am…
Elineo
  • 94
  • 6
2
votes
1 answer

React Big Calendar using hooks inside onNavigate prevents navigation

I'm using react-big-calendar to display events, I want to call a function to set state inside the onNavigate callback but doing this prevents navigation to the next month in the calendar view. This is what I want to do which results to the calendar…
sammy mbugua
  • 81
  • 2
  • 10
2
votes
2 answers

How to select only one day in react-big-calendar month view

I'm using react-big-calendar for calendar purpose in month view. https://github.com/jquense/react-big-calendar and i want to implement Add a new event by clicking on any cell (day) and i'm not sure what props should i use. I know onSelectEvent will…
Alireza Esfahani
  • 701
  • 7
  • 16
2
votes
1 answer

change the first day of the week with work week view

I'm trying to change the first day of the work_week view with react big calendar but I didn't found a way to do it... I was able to change the first day of the week view but nothing helped with work week... any ideas? This is how I changed the first…
ronara
  • 336
  • 11
  • 26
2
votes
1 answer

Update react-big-calendar component when new event created

I am using react-big-calendar and wish to give the user the ability to create a new event when they drag the mouse over the calendar to select a date/time range as per the create events demonstration. However the code I have written does not…
Concrete_Buddha
  • 556
  • 4
  • 16
2
votes
1 answer

Is there any way to add different background color in React big calendar for entire date cell only when there is any event displayed on cell?

Currently I am trying to use this below: const ColoredDateCellWrapper = ({ children, value }) => React.cloneElement(Children.only(children), { style: { ...children.style, backgroundColor: value < CURRENT_DATE ? "lightgreen" :…
LPD
  • 23
  • 6
2
votes
1 answer

How to highlight selected day or days in react big calendar

I want to create an calendar similar to airbnb and therefore I would like to be able to highlight the selected days in react big calendar. I have found a similar question, but it doesn't really answer what I need: How to select multiple days in…
uzzi
  • 551
  • 2
  • 9
  • 29
2
votes
2 answers

Uncaught TypeError: Cannot read property 'setLocalizer' of undefined

import Calendar from 'react-big-calendar' Calendar.setLocalizer(Calendar.momentLocalizer(moment)) With plugins version: "moment": "^2.24.0" "react-big-calendar": "^0.23.0" After updating react big calendar package i'm getting this error. I have…
Sreerag
  • 73
  • 1
  • 7
2
votes
0 answers

Setting scrollToTime makes the calendar loose current scroll position on resize or drag-and-drop

I am setting the following props to react-big-calendar to make the calendar scroll to 10:00 on opening. scrollToTime={moment() .set({ h: 10, m: 0 }) .toDate()} However, not surprisingly this leads to rerendering…
Edgar Navasardyan
  • 4,261
  • 8
  • 58
  • 121
2
votes
0 answers

Scroll below on new event in React-big-calendar

I am trying to scroll down when I selecting a new slot to create an event but the calendar doesn't scroll below the current browser window height. In the screenshot below, I am trying to scroll down below 12:30 pm but can't scroll down below the…
jonny
  • 121
  • 1
  • 3
  • 13
2
votes
1 answer

Displaying popover after clicking on an event in react-big-calendar

I created the Event () function that it passes as a custom component to Then in the Event () function I create the variable popoverClickRootClose, in which I place the react-bootstrappopover. Then…
Umbro
  • 1,984
  • 12
  • 40
  • 99
2
votes
5 answers

How to change all react-big-calendar to French?

I try to add culture='fr' on the BigCalendar but, I get an error. My code is: import moment from "moment"; BigCalendar.momentLocalizer(moment); export default class Agenda extends Component { constructor(props){ …
Ichrak Mansour
  • 1,850
  • 11
  • 34
  • 61
2
votes
1 answer

How to disable a day in react-big-calendar

I'm using react-big-calendar for calendar purpose. Now I want to disable a particular day, i.e., If Monday is holiday or something, the user can not select any event on that day. For that I want to disable the whole day, Because of that reason, the…
Jayakar Pj
  • 21
  • 1
  • 4
2
votes
1 answer

Should you create a custom eventWrapper component for react-big-calendar?

There is no documentation for adding a eventWrapper and I've seen a few comments saying it's not meant to be overwritten. Should we be using this or trying to create custom eventWrapper component to override this exsisting one? For me I don't want…
Dryden Williams
  • 1,175
  • 14
  • 22
1 2 3
…
19 20