javascriptreactjstypescriptreact-big-calendardayjs

React-big-calendar and dayjs longer events not showing in sundays or in ending days


I'm making calendar view and there is a bug. Everytime I make longer events, the calendar does not show events in sundays or in the ending day. Here is a picture: enter image description here

The starting time is: Mon Aug 07 2023 15:44:00 GMT+0300 The ending time is: Tue Aug 29 2023 15:44:00 GMT+0300

What am I doing wrong in my code? Is the starting index day of the week wrong or something else? Below my code:

import { Calendar, dayjsLocalizer } from "react-big-calendar";
import 'react-big-calendar/lib/css/react-big-calendar.css';
import dayjs from "dayjs";
import fi from 'dayjs/locale/fi';
dayjs.locale(fi)

        <Calendar
          culture="fi"
          events={data}
          titleAccessor="definition"
          localizer={localizer}
          startAccessor="startTime"
          endAccessor="endTime"
          style={{ height: 600 }}
          messages={defaultMessagesFi}
          defaultView={'month'}
          views={['day', 'week', 'work_week', 'month','agenda']}
          scrollToTime={dayjs().set('hour', 8).set('minute', 0).set('second', 0)}
          //showMultiDayTimes={true}
          //allDayAccessor={true}
        />

Thanks.


Solution

  • One of my users had the same issue, Sundays and the ending day weren't showing, though for all the other users the same calendar displayed correctly. I'm using moment and not dayjs though, but because the problem is so similar, it's maybe caused by the same issue... All my users are in the same timezone so I used the work around described here and now it works: https://github.com/jquense/react-big-calendar/issues/2376

    So apparently "if the client pc time zone utc-offset is less than your calendar time zone utc-offset, momentLocalizer/browserTZOffset will return 1 to adjust span in this situation" and you can reset it with:

    moment.tz.setDefault('your tz');
    const localizer = momentLocalizer(moment);
    localizer.segmentOffset = 0 ;
    <Calendar 
        ... 
        localizer={localizer} 
    />