Get startDate and endDate, when click on Scheduler header navigation dates, calendars

[Sinisa]

Hi guys,

I have two questions.

FIRST:

I'm calling events data to Schedule with this

let dataManager = new DataManager(eventsData);

I have function which get events data from the server, for the current activeView rendered dates.

When I click on the Scheduler header menu to change activeView, eg. from this week to next week, and when those data, from the server, had been pushed to the eventsData (useState hook in Next/React), the Scheduler are get back to default activeView window, which is current week ( it's getting back from the selected dates activeView eg. next week, or next month is the same)

How to fix this, when I update dataSource to stay on the current activeView window without "redirection " to default dates in the Scheduler ?

SECOND:

I have trouble to get startDate and endDate when I click on Scheduler header navigation.

Why I need the dates.

I'm trying to load data with a custom axios function from Laravel background server, so I need dates in the moment when user click on them.

Unfortunately I can't use dataManager in this scenario, but I need to have the same data like when you use the dataManager and after click on the header menus, dates or calendar, url in the new dataManager() get queries with dates. eg. /?StartDate=2023-03-05T13:00:00.000Z&EndDate=2023-03-10T13:00:00.000Z

What I tried.

I tried to get dates through onActionBegin ( not working always get current dates ).

Also onActionComplete ( I get dates from OnActionCompleteArgs, ) but that is huge proces, I need to get sheduleObje through document.queryselector, then to find activeView after that to find renderDates and to take first and last :(
So is there some better solution for this get the dates problem ?

PS. I didn't upload any kind of code, because I think that this is a general questions about how something work.

Thank you guys,

You are doing amazing work

[Ravikumar Venkatesan]

Hi Sinisa,

Q1: when I update dataSource to stay on the current activeView window without "redirection " to default dates in the Scheduler?

You can stay in the currently selected active view of the Scheduler when updating the selectedDate or currentView of the Scheduler with the respective view or date range dataSource while navigating by canceling the default navigating action by setting up args.cancel = true and update the respective selectedDate, currentView, and dataSource values in the state as shown in the below code snippet.

[App.js]

import { useState } from 'react';

import { zooEventsData } from "./data";

 

function App() {

  let scheduleObj;

  const [scheduleModel, setScheduleModel] = useState({

    currentAction: "InitialRendering",

    currentView: "Week",

    selectedDate: new Date(2021, 1, 15),

    dataSource: getCurrentViewApps(new Date(2021, 1, 15), "Week", true)

  });

 

  function onNavigating(args) {

    if (args.action === "date" && scheduleModel.selectedDate !== args.currentDate) {

      args.cancel = true;

      let resultData = getCurrentViewApps(args.currentDate, scheduleModel.currentView, true);

      setScheduleModel(prevState => ({ ...prevState, currentAction: args.action, selectedDate: args.currentDate, dataSource: resultData }));

    } else if (args.action === "view" && scheduleModel.currentView !== args.currentView) {

      args.cancel = true;

      let resultData = getCurrentViewApps(args.currentDate, args.currentView, true);

      setScheduleModel(prevState => ({ ...prevState, currentAction: args.action, currentView: args.currentView, dataSource: resultData }));

    }

  }

 

  return (

    <div className="App">

      <ScheduleComponent width='100%' height='650px' ref={t => scheduleObj = t} selectedDate={scheduleModel.selectedDate} currentView={scheduleModel.currentView}

        eventSettings={{ dataSource: scheduleModel.dataSource }} navigating={onNavigating.bind(this)}>

      </ScheduleComponent>

    </div>

  );

}

Q2: Is there some better solution for this get the dates problem ?

You can get the navigating date range start and end dates by calculating them at the sample end using the getWeekFirstDate, getWeekLastDate, and addDays methods as shown in the below code snippet.

[App.js]

import { useState } from 'react';

import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Inject, Resize, DragAndDrop, getWeekFirstDate, getWeekLastDate, addDays } from '@syncfusion/ej2-react-schedule';

import { Predicate, DataManager, Query } from "@syncfusion/ej2-data";

import { zooEventsData } from "./data";

 

function App() {

  let scheduleObj;

  let data = zooEventsData;

  let dateRange = {};

  const [scheduleModel, setScheduleModel] = useState({

    currentAction: "InitialRendering",

    currentView: "Week",

    selectedDate: new Date(2021, 1, 15),

    dataSource: getCurrentViewApps(new Date(2021, 1, 15), "Week", true)

  });

 

  function getCurrentViewApps(date, view, dateRangeChanged) {

    if (dateRangeChanged) {

      dateRange = getViewStartEnd(date, view);

    }

    let predicate = new Predicate("StartTime", "greaterthanorequal", dateRange.start, false);

    predicate = predicate.and("EndTime", "lessthanorequal", dateRange.end, false);

    let result = new DataManager(data).executeLocal(new Query().where(predicate));

    return result;

  }

 

  function getViewStartEnd(date, view) {

    let start;

    let end;

    if (view === "Day") {

      start = new Date(date);

      end = addDays(new Date(date), 1);

    } else if (view === "Week") {

      start = getWeekFirstDate(new Date(date), 0);

      end = addDays(getWeekLastDate(new Date(date), 0), 1);

    } else if (view === "WorkWeek") {

      start = addDays(getWeekFirstDate(new Date(date), 0), 1);

      end = getWeekLastDate(new Date(date), 0);

    } else if (view === "Month") {

      let year = date.getFullYear();

      let month = date.getMonth();

      start = getWeekFirstDate(new Date(year, month, 1), 0);

      end = addDays(getWeekLastDate(new Date(year, month + 1, 0), 1), 1);

    }

    return { start: start, end: end };

  }

}

 

export default App;

Regards,

Ravikumar Venkatesan

Attachment: ej2reactschedulegetnavigatingdaterange_d1fd8091.zip