CODEWITHSUNDEEP
javascriptreactjshoverreact-big-calendar
Ichrak Mansour
Ichrak Mansour

Reputation: 1942

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 :

                 <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?

Upvotes: 0

Views: 3376

Answers (1)

Steve -Cutter- Blades
Steve -Cutter- Blades

Reputation: 5432

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.

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

Upvotes: 0

Related Questions