Event showing as all day event but in actual it is not all day event

[anjalikalsariya]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/sandbox/priceless-morning-9jzt7q?file=%2Fevents.js%3A6%2C31

Bug description

When event have same start and end date with time 12:00 AM. It is showing as all day event but it should be normal event. That Same event showing as normal event in google and outlook calendar.

Example ,
Start date is 27 Nov 12:00AM
End date is 27 Nov 12:00AM

React big calendar that I am usinng

Outlook calendar

Expected Behavior

I think it should behave same like outlook and google calendar

Start date is 27 Nov 12:00AM
End date is 27 Nov 12:00AM

Actual Behavior

Event showing as all day event but in actual it is not all day event

For example of this type of dates

react-big-calendar version

^1.13.1

React version

18.3.1

Platform/Target and Browser Versions

Mac OS - Chrome

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

[anjalininjadev]

Any one can help me please ?

[dBianchii]

+1 for me. Would like to see this fixed

[wcbianchi]

Please, it will help a lot.

[nickcarnival]

@anjalikalsariya

Have you all tried the allDayAccessor ?

This allows you to define when an event is or is not an all day event

[anjalikalsariya]

@nickcarnival No I didn't try that before. I will try and let you know

[nickcarnival]

@anjalikalsariya So I played around a bit with the allDayAccessor and was NOT able to resolve the same start and end time showing as allDay issue.

I did find a work around that is not a great fix but may help you out...

You can add one second to the end accessor like so:

      endAccessor={(e) => {
        return moment(e.end).add(1, "s").toDate();
      }}

You'll also want to remove the allDay: true from the events.js:

This event will no longer show as all day:

cc @dBianchii @wcbianchi this might solve one of your problems. It's a hack for sure but hopefully it helps one of you.

[nickcarnival]

Apologies for the brain dump but I became curious why the above hack "fixes" the issue.

TLDR; the all day accessor will be ignored you have to make sure at least one of the hour, minute, second or millisecond are different between the start and end in order for the event not to be considered an all day event.

Also, this could be wrong I'm not very familiar with this codebase.

It does not seem like exclusively altering the allDayAccessor will prevent same events that have the same start and end date (including the ms, s, m, h) from entering the all day event array.

I believe this is what determines whether or not to append an event to the all days array:
source code permalink

    events.forEach((event) => {
      if (inRange(event, start, end, accessors, localizer)) {
        let eStart = accessors.start(event),
          eEnd = accessors.end(event)

        if (
          accessors.allDay(event) ||
          localizer.startAndEndAreDateOnly(eStart, eEnd) ||
          (!showMultiDayTimes && !localizer.isSameDate(eStart, eEnd))
        ) {
          allDayEvents.push(event)
        } else {
          rangeEvents.push(event)
        }
      }
    })

Using this date, which I took from your codesandbox, as an example:

const exampleEvent = {
  title: "Event title",
  start: new Date(2015, 3, 0),
  end: new Date(2015, 3, 0)
}

We need this block to return false in order to not have an all day event:

accessors.allDay(event) ||
localizer.startAndEndAreDateOnly(eStart, eEnd) ||
(!showMultiDayTimes && !localizer.isSameDate(eStart, eEnd))

Assuming we set our assessor to

allDayAccessor={(e) => false}

We still have the other conditions to deal with.

We can set the showMultiDayTimes prop to True and skip the localizer.isSameDate check.

This leaves us with only this condition localizer.startAndEndAreDateOnly(eStart, eEnd) runs this on both start and end:

export function isJustDate(date) {
  return (
    dates.hours(date) === 0 &&
    dates.minutes(date) === 0 &&
    dates.seconds(date) === 0 &&
    dates.milliseconds(date) === 0
  )
}

So our exampleEvent startAndEndAreAreDateOnly will return true which means this event is an all day event :)

It seems like the simplest way around this is to just add a second or millisecond to the end date which doesn't seem ideal to me.

You could probably make a PR that changes this condition:

accessors.allDay(event) ||
localizer.startAndEndAreDateOnly(eStart, eEnd) ||
(!showMultiDayTimes && !localizer.isSameDate(eStart, eEnd))

I'm not sure what the intended behavior would be, right now it seems as if start and end being equivalent SHOULD be an all day event.

[anjalikalsariya]

Thanks @nickcarnival, I tried this solution and its working for me

- In events array

• In react big calendar

endAccessor={(event: IEvent) =>

            !event.allDay
              ? new Date((event?.end as Date).getTime() - 1)
              : new Date((event?.end as Date).getTime())
}