ScrollTo Behavior Not Working

[Jessica Newman]

Hi there - I have tried to implement a scrollTo feature so when the ScheduleComponent mounts it automatically scrolls to the current time, but it is not working -- nothing happens. Additionally, two more questions: 

1. Would you be able to assist with formatting the SimpleBar to display horizontally? I have the behavior working vertically. 
2. When setting the current view in my useEffect, I am trying to set the selectedDate via the scheduleObjRef (i.e. scheduleObjRef.current.selectedDate = period.from()), but I get an error: Cannot set properties of null (setting 'selectedDate'). I am following the answer to this forum I opened: https://www.syncfusion.com/forums/185898/fix-height-of-left-indent-select-toolbar-view-from-filters 

Thanks! 

import { useRef, useState, useEffect } from 'react';

import {

ScheduleComponent,

Day,

Week,

Month,

Inject,

ViewsDirective,

ViewDirective,

ResourcesDirective,

ResourceDirective,

} from '@syncfusion/ej2-react-schedule';

import { Internationalization } from '@syncfusion/ej2-base';

import SimpleBar from 'simplebar-react';

import 'simplebar-react/dist/simplebar.min.css';

import ResourceHeaderTemplate from './ResourceHeaderTemplate';

import useDashboardFilters, { dashboardFilterPeriods } from '../../../../../hooks/useDashboardFilters';

import { addMinutes, parseISO, differenceInDays, isToday, startOfDay, endOfDay } from 'date-fns';

import EventTemplate from './EventTemplate';

import { Typography } from '@mui/material';

import CenterBackdrop from '../../../../components/CenterBackdrop';

import style from '../../../../../styles/CalendarStyles.css';

import { format24HrTime } from '../../../../../utils/utility';

const instance = new Internationalization();

const fieldsData = {

id: 'id',

startTime: { name: 'startTime' },

endTime: { name: 'endTime' },

subject: { name: 'drugName' },

};

export default function CalendarView({ data, treatmentEvents, clients, isFetching }) {

const { period, setPeriod } = useDashboardFilters();

const scheduleObjRef = useRef();

const [currentView, setCurrentView] = useState('');

const [selectedDate, setSelectedDate] = useState('');

useEffect(() => {

const daysDifference = differenceInDays(period.to(), period.from());

if (daysDifference < 0) {

return;

} else if (daysDifference === 0) {

setCurrentView('Day');

} else if (daysDifference > 0 && daysDifference <= 6) {

setCurrentView('Week');

} else if (daysDifference > 6) {

setCurrentView('Month');

}

setSelectedDate(period.from());

}, [period]);

function handleNavigation(args) {

if (args.action === 'view') {

const currentView = args.currentView;

if (currentView === 'Day') {

const currentDate = args.currentDate;

if (isToday(currentDate) && period.label !== 'Custom') {

setPeriod(dashboardFilterPeriods.today);

} else {

setPeriod({ ...dashboardFilterPeriods.custom, from: () => startOfDay(currentDate), to: () => endOfDay(currentDate) });

}

}

}

}

function renderEventTemplate(event) {

return <EventTemplate event={event} />;

}

function onCreated() {

scheduleObjRef.current.scrollTo(instance.formatDate(new Date(), { skeleton: 'Hm' }));

}

return !clients.length ? (

<Typography>

<i>Please select a client to view the Calendar View.</i>

</Typography>

) : isFetching ? (

<CenterBackdrop />

) : (

<SimpleBar style={{ maxHeight: '100%', overflowX: 'hidden' }}>

<ScheduleComponent

classes={style}

ref={scheduleObjRef}

eventSettings={{ fields: fieldsData, dataSource: treatmentEvents, template: renderEventTemplate }}

readonly={true}

showHeaderBar={false}

selectedDate={selectedDate || new Date()}

eventClick={args => (args.cancel = true)}

popupOpen={args => (args.cancel = true)}

currentView={currentView}

timeScale={{ enable: true, interval: 30, slotCount: 2 }}

group={{ resources: ['Clients'] }}

resourceHeaderTemplate={data => <ResourceHeaderTemplate data={data} />}

navigating={handleNavigation}

startHour={format24HrTime(period.from())}

endHour={format24HrTime(period.to())}

created={onCreated}

>

<ResourcesDirective>

<ResourceDirective field="clientId" idField="id" name="Clients" dataSource={clients} />

</ResourcesDirective>

<Inject services={[Day, Week, Month]} />

<ViewsDirective>

<ViewDirective option="Day" />

<ViewDirective option="Week" />

<ViewDirective option="Month" />

</ViewsDirective>

</ScheduleComponent>

</SimpleBar>

);

}

[Ashokkumar Karuppasamy]

Hi Jessica,

Q1: I have tried to implement a scrollTo feature so when the ScheduleComponent mounts it automatically scrolls to the current time, but it is not working -- nothing happens?

We have prepared a sample to scrollTo. The attached sample below demonstrates the solution. Please give it a try and let us know if you need any further assistance.

UG: https://ej2.syncfusion.com/angular/documentation/schedule/working-days#scroll-to-specific-time-and-date

Sample: https://stackblitz.com/edit/schedule-daterangechange-sample-xwiwts?file=index.js

const Views = () => {

    const scheduleObj = useRef(null);

    const dayDiffrents = 4;

    const [currentView, setCurrentView] = useState('');

    const [selectedDate, setSelectedDate] = useState(new Date(2021, 1, 15));

    useEffect(() => {

      const daysDifference = dayDiffrents;

      if (daysDifference < 0) {

        return;

      } else if (daysDifference === 0) {

        setCurrentView('Day');

      } else if (daysDifference > 0 && daysDifference <= 6) {

        setCurrentView('Week');

      } else if (daysDifference > 6) {

        setCurrentView('Month');

      }

      scheduleObj.current.selectedDate = new Date(2021, 1, 15);

      console.log(scheduleObj.current.selectedDate);

    //  setSelectedDate(new Date(2021, 1, 17));

    }, []);

 

    const onCreated = () => {

       // If you want to scroll through time, you can use the scrollTo method as below.

        scheduleObj.current.scrollTo('07:00');

      // If you want to scroll through Date, you can use the scrollTo method as below.

        scheduleObj.current.scrollTo(null, new Date(2021, 2, 5));

    }

 

 

Q2: Would you be able to assist with formatting the SimpleBar to display horizontally? I have the behavior working vertically?

Providing more details will greatly help us understand and resolve the problem.

Q3: When setting the current view in my useEffect, I am trying to set the selectedDate via the scheduleObjRef (i.e. scheduleObjRef.current.selectedDate = period.from()), but I get an error: Cannot set properties of null (setting 'selectedDate'). I am following the answer to this forum I opened?

We have created a sample based on the shared details, and it is functioning properly. We suspect that there may be an issue during the rendering of the schedule control, where the DOM may not load properly or load late, resulting in the observed issues. Kindly share a runnable sample with us or provide a video. This information will significantly aid us in understanding and resolving the problem.

Regards,
Ashok