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

Question

I want to get the time of the timeslot and appear it when I hover my timeslots like the gif bellow.

My calendar is :

                 <DragAndDropCalendar selectable
                    localizer={localizer}
                    events={this.state.events} 
                    views={['month','week','day']}
                    defaultView="week"
                    culture = 'fr'
                    timeslots={2}
                    step={15}
                    style={{ height: "100vh",  }}
                    onSelectEvent={this.clickEvent}
                    onEventDrop={this.moveEvent}
                    min={new Date(2017, 10, 0, 7, 0, 0)}
                    max={new Date(2017, 10, 0, 21, 0, 0)} 
                    resizable 
                    date={this.state.selectedDay}
                    onNavigate={(date) => { this.setState({ selectedDay: date })}}
                    onEventResize={this.resizeEvent}
                    onSelectSlot={this.newEvent}
                    components={{
                      dateCellWrapper: ColoredDateCellWrapper,
                    }}
                  />

My codeSandbox is : https://codesandbox.io/s/m7k904y3o8

I try on my code to put a static text "test" on the time slot, it works but not when I hover it....

I want to get the time when I hover the time slot.

How to make it hovering as the gif?

what have you researched or tried so far? Clearly you would need to handle some mouseover or hover event. Have you attempted anything? — ADyson, Oct 23 '19 at 16:16
I try to custom the timeslot when I hover it, but it doesn't work. — Ichrak Mansour, Oct 24 '19 at 07:37
Well we have no chance of fixing that, or seeing if it makes sense, if you don't show us what you did. — ADyson, Oct 24 '19 at 08:25
BTW if you're using react-big-calendar I'm not sure if this is actually based on fullCalendar or not. It says it's "inspired by" fullCalendar but that implies it may be a re-write rather than a react wrapper for it. It's unclear. It looks like a re-write to me, though. — ADyson, Oct 24 '19 at 08:27
It's worth noting that fullCalendar itself now has a react component which allows you to integrate it with React easily: https://fullcalendar.io/docs/react . That might be easier to work with since you can hook into all the normal fullCalendar events. — ADyson, Oct 24 '19 at 08:28
BTW this is the closest I can get to your requirement using vanilla fullCalendar: https://codepen.io/ADyson82/pen/YzzVyjG . I had to use a tooltip. You cannot place the times within the individual cells because, if you examine the rendered HTML of the calendar you will see that those "cells" are in fact an optical illusion created by multiple HTML tables layered on top of each other. There is no specific cell element where you could insert the time data. It may be that react-big-calendar is rendered a different way. I'm only familiar with fullCalendar unfortunately. — ADyson, Oct 24 '19 at 08:48
@ADyson it means, it can't be developped with react-big-calendar ? .. — Ichrak Mansour, Oct 24 '19 at 09:01
I don't know, because I don't know that system specifically. It seems to be created differently to fullCalendar. I'm not familiar with it. In your sandbox you seem to have inserted "Test" into the individual cells so that means you can probably target those cells and attach hover events to them. So yes it might be possible. But I don't know reactJS and I don't know big-calendar. So maybe someone else can help you — ADyson, Oct 24 '19 at 09:09

score 0 · Answer 1 · answered Oct 06 '21 at 21:28

You should be able to do this by providing a custom timeSlotWrapper component, which receives value as a prop (value being the date of that slot).

function CustomTimeSlotWrapper({value, resource, children}) {
  // convert your `value` (a Date object) to something displayable
  return (
    <div className="custom-slot-container">
      <span className="hidden-value">{displayValue}</span>
    <div>
  );
}

Then it's up to you to provide the necessary css to 'hide' that by default, and 'show' it on custom-slot-container:hover. Keep in mind two critical bits though.

The wrapper does not have access to other props, so it can't access the localizer.format() method.
It also has no idea if there are any events being displayed in (technically, over) the slot.

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

1 Answers1