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

React Big Calendar - Event is being shown 1 day before the end

For now I'm storing my events only in the state of the component. That's the function I'm using to add events to my state const handleSelect = ({ start, end }) => { setEventsList([...eventsList, { start, end, …
Vitu_ 77
  • 11
  • 1
0
votes
2 answers

React big-calendar not showing or loading at all

I am trying to use react-big-calendar on my school project but the calendar grid is not loading at all. Here is my Calendar.js component: import React from 'react'; import { Calendar, momentLocalizer} from 'react-big-calendar' import moment from…
comic
  • 21
  • 1
  • 7
0
votes
1 answer

React Component gets unmounted and i don't know why

I'm a completely new to the whole react world but I'm trying to develop a SPA with a integrated calendar. I'm using react-router for routing, react-big-calendar for the calendar, axios for my API calls and webpack. Whenever I'm loading my Calender…
0
votes
1 answer

react-big- calendar Table TD overlapping outside Table and TD

I am using react-big-calendar inside a table with tbody, tr, and td. When there is data in the calendar month, the react-big-calendar fits on the page and inside the panel. However, as I added events to the calendar, it overlaps over the table, tr,…
c0micrage
  • 1,118
  • 2
  • 21
  • 56
0
votes
1 answer

Return JSX element to string required function in react

I'm using React big calendar in there tooltipAccessor require a string, But i needs to add more data into tooltip according to some UI formatting (as in the image). Is there anyway to pass JSX as a string.
Nipun Ravisara
  • 3,629
  • 3
  • 20
  • 35
0
votes
1 answer

big calendar react Can we have multiple color on different dates of Month?

big calendar react Can we have multiple color on different dates of Month? Suppose: Every Date on month will have different color according to its events.
Aamir
  • 1
  • 2
0
votes
2 answers

How to show Modal when we click on it using reactjs?

I'm new to react and wanted to create a Calendar and wanted to add event to the respective date in the Calendar, when we click on the field it should show the modal popup but modal is not getting displayed. Here i'm using only semantic-ui-react for…
Arunya
  • 291
  • 6
  • 15
0
votes
0 answers

React big calendar between time on time slots

I have used the resource scheduler of React big calendar and I wondered if the intermediate steps of the time slots could also be made transparent, but that the overview remains. This is currently my result: With this code: import React ,…
Joppe Meijers
  • 301
  • 4
  • 24
0
votes
2 answers

change style of row in react big calendar

I need to make a calendar with events and I decided to use react-big-calendar. But I need to make rows with different style. So each row should be in 30minutes that I did it with timeslots, but I also need to remove default borders and make new…
Hamid Shoja
  • 3,838
  • 4
  • 30
  • 45
0
votes
2 answers

Big React Calender year view

I need help in react-big-calendar.Some of the view already in react-big-calender like days, week & agenda etc. but how can i add custom view for year view in react-big-calender.
Dhruvil Dave
  • 109
  • 1
  • 20
0
votes
1 answer

create an all day event by drag and drop

I am using react-big-calendar for scheduling availability and unavailability. I could able to create a schedule for a single day by clicking on the respective day cell. However, my requirement is to create an schedule by drag and drop method. Like…
Serenity
  • 3,884
  • 6
  • 44
  • 87
0
votes
0 answers

React Big Calendar is displaying my events 1 day earlier than the start and end dates I have set

render() { const events = []; this.props.appointments.map(appointment => { events.push({ start: appointment.start, end: appointment.end, title: appointment.title ? appointment.title : "booked", …
bfitz22
  • 1
  • 1
0
votes
1 answer

How to get the time of the time slot with react-big-calendar?

I want to get the time of the timeslot and appear it when I hover my timeslots like the gif bellow. https://ibb.co/B3WyC42 My calendar is :
Ichrak Mansour
  • 1,850
  • 11
  • 34
  • 61
0
votes
1 answer

How to make a blueprintJs dialog draggable with react?

I have a react-big-calendar and a button create, which when I click on it, I have a blueprint dialog will be open, I want this will be draggable anywhere. My dialog is : My code is : https://codesandbox.io/s/sharp-shockley-tt9bc How to make it…
Ichrak Mansour
  • 1,850
  • 11
  • 34
  • 61
0
votes
0 answers

Bootstrap Popover when clicking on events

I'm looking to integrate something like Bootstrap Popover when clicking on events in react-big-calendar componenet; I think it is possible to achieve it by custom components; is there any example where it shows how I can integrate it with Bootstrap…
Amir-61
  • 23
  • 4