correct start and end date is not selected

Question

I am using react-big-calendar to schedule my availability and unavailability. I am facing a problem when i drag from nov 5 to nov 6 then it selects nov 4 to nov 5 cells. Why is that happening? I have taken a screenshot as well

for example, here you can see i have selected Nov 13 till Nov 14 but

Nov 12 and Nov 13 are selected.

Here is my code

const DnDCalendar = withDragAndDrop(Calendar);

const localizer = momentLocalizer(moment);

const Scheduler = ({ match }) => {
  const [verb, setVerb] = React.useState("create");
  const [open, setIsOpen] = React.useState(false);
  const [event, setEvent] = React.useState();

  const showEventForm = (event, verb = "create") => {
    setVerb(verb);
    setEvent(event);
    setIsOpen(true);
  };

  const {
    params: { guideId }
  } = match;

  const [createSchedule] = useMutation(CREATE_SCHEDULE);
  const [updateSchedule] = useMutation(UPDATE_SCHEDULE);

  const { data, loading } = useQuery(GET_SCHEDULE, {
    skip: !guideId,
    variables: { id: guideId }
  });
  const schedules = get(data, "getScheduleById", []);

  const handleScheduleSubmit = async (val, mutation) => {
    const finalVal = {
      description: val.desc,
      startdate: val.start,
      enddate: val.end,
      guideRefId: parseInt(guideId, 10)
    };
    console.log("finalVal", finalVal);
    try {
      await mutation({
        variables: {
          data: finalVal,
          id: val.id
        },
        refetchQueries: [
          {
            query: GET_SCHEDULE,
            variables: {
              id: guideId
            }
          }
        ]
      });
      setIsOpen(false);
    } catch (err) {
      console.log("err", err);
    }
  };

  const events =
    schedules !== null && schedules.length > 0
      ? schedules.map(schedule => ({
          ...omit(schedule, ["startdate", "enddate", "description"]),
          start: new Date(schedule.startdate),
          end: new Date(schedule.enddate),
          desc: schedule.description
        }))
      : [];
  console.log("events", events);
  return (
    <>
      <Wrapper>
        {open && (
          <ScheduleForm
            event={event}
            isOpen={open}
            verb={verb}
            mutation={verb === "update" ? updateSchedule : createSchedule}
            handleScheduleSubmit={handleScheduleSubmit}
            setIsOpen={() => setIsOpen(false)}
          />
        )}
        {loading ? (
          <p>Loading...</p>
        ) : (
          <DnDCalendar
            selectable
            events={events}
            startAccessor="start"
            endAccessor="end"
            defaultDate={moment().toDate()}
            localizer={localizer}
            toolbar
            resizable
            onEventDrop={onEventDrop}
            components={{
              event: EventComponent,
              agenda: {
                event: EventAgenda
              }
            }}
            onSelectSlot={event => showEventForm(event)}
            onSelectEvent={event => showEventForm(event, "update")}
          />
        )}
      </Wrapper>
    </>
  );
};

export default Scheduler;

the finalVal object which is in handleScheduleSubmit gives following

description: undefined
enddate: Thu Nov 14 2019 00:00:00 GMT+0545 (Nepal Time) {}
guideRefId: 8
startdate: Wed Nov 13 2019 00:00:00 GMT+0545 (Nepal Time) {}

but when sending to api it becomes something like this which i checked in network request headers

enddate: "2019-11-13T18:15:00.000Z"
guideRefId: 9
startdate: "2019-11-12T18:15:00.000Z"

How do i get rid of this issue?

911madza · Answer 1 · 2019-11-23T14:24:26.720

0

that's cause in finalVal object, the startdate and enddate keys are set to your local NPT timezone, which is +0545 GMT,

while in events object, the start and end keys are set to +0000 GMT, resulting in previous day, since the default is set to midnight.

use built-in moment.js to fix this timezone conversion issue. See this for more.

edited Nov 23 '19 at 14:24

answered Nov 23 '19 at 14:15

911madza

80
8

thanks a lot for answering the question. Where exactly do i need to use moment for fixing timezone? Do i need to use it only in finalVal object? – Serenity Nov 24 '19 at 07:46

correct start and end date is not selected

1 Answers1