1

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.

Zibal
  • 52
  • 6
  • 1
    had you change style of your calendar? because I try to generate your error but for me work – AlTheLazyMonkey Jun 30 '23 at 14:57
  • @AlTheLazyMonkey Yeah I have no idea why it does like this on my working computer. I programmed almost the same way on my personal computer and it is working... I copied and pasted the working code on my working laptop and it did the same than previous so it's the problem is not in this code. I have no idea why it is doing like this. I also uninstalled all node_modules and it did not help. What should I try to do? Is it more likely dayjs or calendar bug/"feature"? – Zibal Jun 30 '23 at 16:11
  • 1
    I think it's more of a problem with the calendar than with dayjs, try checking which versions you have installed (not the ones in the package.json, but the ones you actually installed). Also I've seen that unlike my output you also have the event line with the title in it, see if there is some setting somewhere else in the calendar. If you want another test, although I don't think it makes a difference, is to try using moment instead of dayjs (just to exclude the latter). Also programming in TS I've seen that it wants a `Date`, try putting a final `.toDate()`. – AlTheLazyMonkey Jun 30 '23 at 20:26
  • @AlTheLazyMonkey I tested it with Moment and it is working. So dayjs has something... Is my dayjs config wrong or something and how can I check that? Thanks for help – Zibal Jun 30 '23 at 21:31
  • 1
    Can you tell me which version of dayjs you have? – AlTheLazyMonkey Jun 30 '23 at 22:38
  • @AlTheLazyMonkey I use the version 1.11.8 – Zibal Jul 01 '23 at 06:18
  • 1
    great... I also have the same version. Giousto out of curiosity in the "Agenda" view do you see all days or are Sundays also excluded in that view? – AlTheLazyMonkey Jul 01 '23 at 12:25
  • @AlTheLazyMonkey yeah sundays are in agenda view. And in "day" view when i go to sundays, the event is shown :D. But not in week or month view... – Zibal Jul 01 '23 at 14:44

1 Answers1

1

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} 
/>
k4is4
  • 26
  • 1