onSelectSlot start date is from the start of the day, not where I start the selection (in week view)

[MateiMihaiSTEEP]

Check that this is really a bug

• I confirm

Reproduction link

https://jquense.github.io/react-big-calendar/examples/index.html?path=/docs/props--on-select-slot

Bug description

• I try to select some slots to create an event(in week view), and it works on the last day of the week, but in the rest the selection starts from the start of the day no matter where I select.
• it can be even reproduced on the oficial link with the examples

Expected Behavior

the start of the slot is not from where I placed the mouse(in week view)

Actual Behavior

when I select a slot(in week view), I want to start from where I first stared selecting, not from another place.

react-big-calendar version

1.11.2 and 11.11.0

React version

18.2.0

Platform/Target and Browser Versions

Chrome, Safari - only here I tested

Validations

• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a react-big-calendar issue and not an implementation issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

Screen.Recording.2024-03-25.at.13.31.36.mov

[IzaanAnwar]

Hey I have been struggling with the same issue, did you find a work around?

[nourbenamor2001]

I made some simple changes to the code within the repository, the file onSelectSlot.js which handles this functionality:
These are the results:

2024-03-29.19-46-57.mp4

I tried to modify it by changing the const onSelectSlot:

  const onSelectSlot = useCallback((slotInfo) => {
    /**
     * Here we are waiting 250 milliseconds (use what you want) prior to firing
     * our method. Why? Because both 'click' and 'doubleClick'
     * would fire, in the event of a 'doubleClick'. By doing
     * this, the 'click' handler is overridden by the 'doubleClick'
     * action.
     */
    window.clearTimeout(clickRef?.current)
    clickRef.current = window.setTimeout(() => {
      window.alert(buildMessage(slotInfo))
    }, 250)
  }, [])

to this:

const onSelectSlot = useCallback((slotInfo) => {
    /**
     * Here we are waiting 250 milliseconds (use what you want) prior to firing
     * our method. Why? Because both 'click' and 'doubleClick'
     * would fire, in the event of a 'doubleClick'. By doing
     * this, the 'click' handler is overridden by the 'doubleClick'
     * action.
     */
    const { start, end } = slotInfo;
    const adjustedStart = DateTime.fromJSDate(start).startOf('day'); // Ensure start of day

    window.clearTimeout(clickRef?.current);
    clickRef.current = window.setTimeout(() => {
      window.alert(buildMessage({ start: adjustedStart, end })); // Use adjustedStart
    }, 250);
  }, [])

I considered using a different date library like Luxon or Day.js. These libraries often have simpler APIs and could handle time zones more intuitively than moment.

It ends up in this code:

import React, { useCallback, useRef, useEffect, useMemo } from 'react'
import moment from 'moment'
import { Calendar, momentLocalizer } from '../../src'
import demoEvents from '../resources/events'
import mdx from './onSelectSlot.mdx'
import { DateTime } from 'luxon';

const mLocalizer = momentLocalizer(moment)

export default {
  title: 'props',
  component: Calendar,
  parameters: {
    docs: {
      page: mdx,
    },
  },
}

function buildMessage(slotInfo) {
  return `[onSelectSlot] a date selection was made, passing 'slotInfo'
  ${JSON.stringify(slotInfo, null, 2)}`
}


export function OnSelectSlot() {
  const clickRef = useRef(null)

  useEffect(() => {
    /**
     * What Is This?
     * This is to prevent a memory leak, in the off chance that you
     * teardown your interface prior to the timed method being called.
     */
    return () => {
      window.clearTimeout(clickRef?.current)
    }
  }, [])

  const onSelectSlot = useCallback((slotInfo) => {
    /**
     * Here we are waiting 250 milliseconds (use what you want) prior to firing
     * our method. Why? Because both 'click' and 'doubleClick'
     * would fire, in the event of a 'doubleClick'. By doing
     * this, the 'click' handler is overridden by the 'doubleClick'
     * action.
     */
    const { start, end } = slotInfo;
    const adjustedStart = DateTime.fromJSDate(start).startOf('day'); // Ensure start of day

    window.clearTimeout(clickRef?.current);
    clickRef.current = window.setTimeout(() => {
      window.alert(buildMessage({ start: adjustedStart, end })); // Use adjustedStart
    }, 250);
  }, [])

  const defaultDate = useMemo(() => new Date(2015, 3, 1), [])

  return (
    <div className="height600">
      <Calendar
        defaultDate={defaultDate}
        events={demoEvents}
        localizer={mLocalizer}
        onSelectSlot={onSelectSlot}
        selectable
      />
    </div>
  )
}
OnSelectSlot.storyName = 'onSelectSlot'

I hope this helps! @IzaanAnwar @MateiMihaiSTEEP

[forceddd]

This issue should only exist in WEEK and DAY. I created a PR. I hope it can help you.

[MateiMihaiSTEEP]

is this change in the 11.1.3 ? because is the same issue

[MateiMihaiSTEEP]

the actual problem that I have is in week view, I try to select slots in the same day but it starts always from the beginning go the day not from where I select

[forceddd]

is this change in the 11.1.3 ? because is the same issue

Not yet, this fix has not been merged into the master branch yet

[Solarkadakiadam]

Hey everyone, anyone knows which older version i can use to get around this issue? Or when will the fix for this issue will be merged?

[forceddd]

Hey everyone, anyone knows which older version i can use to get around this issue? Or when will the fix for this issue will be merged?

try version 1.11.1

[Solarkadakiadam]

Hey everyone, anyone knows which older version i can use to get around this issue? Or when will the fix for this issue will be merged?

try version 1.11.1

Have the same error on the 1.11.1 too

[cutterbl]

This should now be resolved in v1.11.6

[Solarkadakiadam]

This should now be resolved in v1.11.6

Yes updated the version now its fixed, thank you