Lazy Loading for Month Timeline View

[Thomas Pentenrieder]

As described in this post I'd like to have a 12 month timeline view. Since this would load a lot of events I'd like to make use of the lazy load feature. However I always get Start and End for the full year, not  limited to just the viewport.

I'm using the Datamanger with UrlAdaptor to get the data from my backend. 

Am I missing something here?

  const [dataManager, setDataManager] = useState<DataManager | undefined>(undefined);

  useEffect(() => {

    const fetchData = async () => {

      const manager = new DataManager({

        url: config.apiEndpoint + '/api/appointments',

        crudUrl: config.apiEndpoint + '/api/appointments',

        adaptor: new UrlAdaptor(),

        headers: [{ Authorization: `Bearer ${token}`, 'graphevents': showGraphEvents }],

      });

      await manager.ready;

      setDataManager(manager);

    };

    fetchData();

  }, [token]);

 

const services: Object[] = [TimelineMonth, TimelineViews, TimelineYear, Year];

  if (canEdit) {

    services.push(Resize, DragAndDrop);

  }

return (

       <ScheduleComponent

            currentView="TimelineMonth"

            width='100%'

            height='100%'

            eventSettings={eventSettings}

            group={group}

            resourceHeaderTemplate={ResourceHeaderTemplate}

            popupOpen={onPopupOpen}

            eventRendered={onEventRendered}

            rowAutoHeight={true}

            enablePersistence={true}

            ref={scheduleRef}>

            <ResourcesDirective>

              <ResourceDirective field='ProjectId' title='Projects' name='Project' allowMultiple={false} dataSource={projectData} textField='name' idField='id' colorField='color' />

              <ResourceDirective field='OwnerId' title='Owner' name='Owners' allowMultiple={true} dataSource={userData} textField='fullName' idField='id' />

            </ResourcesDirective>

            <ViewsDirective>

              <ViewDirective option='TimelineDay' displayName="Day" />

              <ViewDirective option="TimelineWorkWeek" displayName="Work Week" />

              <ViewDirective option='TimelineWeek' displayName="Week" />

              <ViewDirective option='TimelineMonth' displayName="Month" />

              <ViewDirective option='TimelineMonth' displayName="Year" interval={12} allowVirtualScrolling={true} enableLazyLoading={true} displayDate={new Date(new Date().getFullYear(), 0, 1)} />

            </ViewsDirective>

            <Inject services={services} />

          </ScheduleComponent>

);



[Ram Raju Elaiyaperumal]

Hi Thomas,

We can suggest you can utilize the schedule data virtualization. The attached SB sample demonstration solution in below.

SB: https://ej2.syncfusion.com/react/demos/#/fluent2/schedule/data-virtualization

In data virtualization, appointments are loaded only for the resources currently being displayed. This feature is supported only in vertical scrolling and not in horizontal scrolling.



Please try the solution and let us know if you need any further assistance.

Regards,

Ram

[Thomas Pentenrieder]

A vertical view is unfortunately not an option, is lazy loading for timeline views on the roadmap?

[Vijay Ravi]

Hi Thomas,

In the previously shared demo link, vertical views were not included. However, we would like to clarify that data virtualization functions seamlessly in both vertical and timeline views within the Scheduler component. When lazy loading is enabled, only the events within the visible viewport will be rendered.

Demo link:  https://ej2.syncfusion.com/react/demos/#/fluent2/schedule/data-virtualization

 

Enable lazyLoading UG: https://ej2.syncfusion.com/react/documentation/schedule/virtual-scrolling

Sample link: https://stackblitz.com/edit/react-iacnka-wsude4?file=index.js

Regards,

Vijay

[Thomas Pentenrieder]

Here's a fork of your sample reduced to just the timeline view and with interation set to 12 for the full year.

In this case the appointments for all months are being loaded and reloads are only based on vertical scrolling. I'd like to lazy load based on the shown timeframe, not the re

https://stackblitz.com/edit/react-iacnka-sjy9fg?file=index.js

[Vijay Ravi]

Hi Thomas
 

We have logged a feature request for this requirement, and the feature will be included in any of our upcoming releases. Track the status by using the feedback link below.

Feedback: https://www.syncfusion.com/feedback/61884/provide-support-for-horizontal-scrolling-for-data-virtualization

Generally, we will plan any feature implementation based on customer request count, feature rank, and Wishlist plan. You can cast your vote in the feedback.

Regards,

Vijay