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
1 answer

React Big Calendar style dates which have events

I would like to change the style of dates in my month calendar view which have events. This is the design I'm developing: So I need to change style of .rbc-date-cell to blue for each date with an event. I have searched high and low for a solution…
Pixelomo
  • 6,373
  • 4
  • 47
  • 57
2
votes
1 answer

React Big Calendar not working with React 15.x.x

React Big Calendar works well with React 16 but the same code gives error with React 15 It gives error - NoopWrapper(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
Mukesh Kumar
  • 944
  • 2
  • 10
  • 26
2
votes
0 answers

show modal for booking in react big calendar when click on slot and keep book button in empty slot

I am trying to achieve modal in react big calendar when I click on empty slot. My by default view is week. This is my code. constructor(props) { super(props); this.state = { events: [ { id: 1, …
Sundar Ban
  • 51
  • 1
  • 8
2
votes
1 answer

Highlight Background of selected slot in react-big-calendar even after finished selecting

Now the default behavior is whenever someone select a slot it highlights in gray, but as soon as the selection stops the calendar fields highlighting vanishes. If we open modal on selection than it will not be that necessary, but in my case 70%…
prabeen90
  • 450
  • 3
  • 12
2
votes
0 answers

React Big Calendar Outside DnD

I am using React Big Calendar https://github.com/intljusticemission/react-big-calendar . And it has an Drag n Drop option using react-dnd https://github.com/react-dnd/react-dnd . What I am trying to do is to have draggable elements outside of…
Sagi
  • 191
  • 13
2
votes
2 answers

Disable drag selection on react-big-calendar

I don't see anything in API for disabling this behavior. I just want users to have to click on a specific date.
corysimmons
  • 7,296
  • 4
  • 57
  • 65
2
votes
0 answers

React-big-calendar - sort(set order) allDay events

React big calendar receives an array with objects: allDay: true end: Sat Jan 13 2018 03:03:00 GMT+0200 (EET) {} eventType: "video" start: Sat Jan 13 2018 03:03:00 GMT+0200 (EET) {} title: "0" There can be 3 types of EventType - video, duration and…
Vladimir Martyniuk
  • 41
  • 6
2
votes
1 answer

react-big-calendar resizable events

I see that react-big-calendar recently added resizable events which I am trying to get working. Here is the code to their drag and drop example: http://intljusticemission.github.io/react-big-calendar/examples/index.html#dnd click the Drag and Drop…
shell
  • 1,867
  • 4
  • 23
  • 39
2
votes
3 answers

React big calendar hide start time end time from time slot

I have a react big calendar as in teh picture below, and I want to remove the circled strat-time/end time: The react big calendare is rendered with this parameters:
georgiana_e
  • 1,809
  • 10
  • 35
  • 54
2
votes
1 answer

Missing `rbc-now` class

I want to style only the date number of the current date, but the rbc-now class is missing from the rbc-current element. If I style by rbc-current, then all the dates in every month are styled, for example: 9th August, 9th September, 9th Ocotber…
Nadezhda Serafimova
  • 722
  • 1
  • 13
  • 21
2
votes
2 answers

React-big-calendar Show only current month and next month

How can I display only current month and next month using react big calendar and make it change dynamically every day? I have a component that looks like this: import React, {Component} from 'react'; import…
Konrad Uciechowski
  • 476
  • 1
  • 8
  • 29
2
votes
1 answer

TypeScript - Problems importing some npm packages that use declaration files (typings) from DefinitelyTyped

For some of the modules I'm importing I end up modifying their declaration files to get them working. I'm not sure if I'm going about it wrong or if there just happen to be issues with the typings for these modules. index.tsx import * as React from…
Alexander Crichton
  • 45
  • 1
  • 6
2
votes
4 answers

I can't see month view in basic react-big-calendar

Hi I can't see month view even when it's displayed in react-dev tools. Week view works fine but month view doesn't displays anything. PFA the code below. Here is the week view image. Here is the month view image. import localizer from…
piyush singh
  • 395
  • 8
  • 24
1
vote
1 answer

React-big-calendar and dayjs longer events not showing in sundays or in ending days

I'm making calendar view and there is a bug. Everytime I make longer events, the calendar does not show events in sundays or in the ending day. Here is a picture: The starting time is: Mon Aug 07 2023 15:44:00 GMT+0300 The ending time is: Tue Aug…
Zibal
  • 52
  • 6
1
vote
1 answer

React Big Calendar rRule

Are there any React Big Calendar settings for repeating events? I tried the following but it didn't work. I'd like to save the rRule to my DB with my event, then use it to generate the dates when the calendar is open. Right now, the rRule is…
TimH
  • 60
  • 8
1 2 3
…
19 20