Skip to content

Changing of date doesn't work on prevClick, nextClick or onSelectDate #191

Open
@mm105

Description

@mm105

Before Submitting

  • I have searched existing issues for similar bugs

Bug Description

When I click on prev/next buttons or select date from datepicker popup, dates in table are not changing accordingly. Thus I'm not able to iterate through weeks. Date between prev and next button is changing and is correct. Sample data used is from file

Not sure if I'm doing something wrong in callback functions or this is library internal bug?

image

Reproduction

import { Scheduler, SchedulerData, View, ViewType } from 'react-big-schedule';
import {
  eventsDemoData,
  resourcesDemoData,
} from './mockData/data';
import { useCallback, useState } from 'react';
import 'react-big-schedule/dist/css/style.css';

const INITIAL_DATE_DISPLAY = '2022-12-18';

export const MyScheduler = () => {
  const [schedulerData, setSchedulerData] = useState<SchedulerData>(() => {
    const newSchedulerData = new SchedulerData(
      INITIAL_DATE_DISPLAY,
      ViewType.Week,
      false,
      false,
      {
        besidesWidth: 300,
        eventItemPopoverTrigger: 'click',
        schedulerContentHeight: '100%',
        dragAndDropEnabled: false,
      },
    );

    newSchedulerData.setResources(resourcesDemoData);
    newSchedulerData.setEvents(eventsDemoData);

    return newSchedulerData;
  });

  const prevClick = useCallback((newData: SchedulerData) => {
    newData.prev();
    newData.setEvents(eventsDemoData);
    setSchedulerData(newData);
  }, []);

  const nextClick = useCallback((newData: SchedulerData) => {
    newData.next();
    newData.setEvents(eventsDemoData);
    setSchedulerData(newData);
  }, []);

  const onViewChange = useCallback((newData: SchedulerData, view: View) => {
    newData.setViewType(
      view.viewType,
      view.showAgenda,
      view.isEventPerspective,
    );
    newData.setEvents(eventsDemoData);
    setSchedulerData(newData);
  }, []);

  const onSelectDate = useCallback((newData: SchedulerData, date: string) => {
    newData.setDate(date);
    newData.setEvents(eventsDemoData);
    setSchedulerData(newData);
  }, []);

  return (
    <>
      <Scheduler
        schedulerData={schedulerData}
        nextClick={nextClick}
        prevClick={prevClick}
        onSelectDate={onSelectDate}
        onViewChange={onViewChange}
      />
    </>
  );
};

Steps to Reproduce

  1. Open the app
  2. Click on next or prev button
  3. Date between prev and next buttons is changed but dates in week/table are not, thus it's not possible to change the week

Browser

Chrome

Operating System

Windows 11

React Version

18.3.1

react-big-schedule Version

4.4.5

Additional Context

Only console errors/warnings are ones related to defaultProps, but I think this is not the issue.

image
image

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions