We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Get Schedule View startDate and endDate when click on scheduler toolbar items

Hi guys,

Lets ask again, 

How to get startDate and endDate when click on scheduler toolbar menu ?

Not the current activeView but activeView which will be displayed when you change dates.

eg. If I click to display next week I will need startDate and endDate for the next week.

Screenshot 2023-03-15 at 5.53.29 pm.png


3 Replies

RV Ravikumar Venkatesan Syncfusion Team March 16, 2023 03:55 PM UTC

Hi Sinisa,

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


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 };



  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' navigating={onNavigating.bind(this)}>






export default App;


Ravikumar Venkatesan

Attachment: ej2reactschedulegetnavigatingdaterange_417b4da9.zip

SI Sinisa March 17, 2023 01:20 AM UTC

Thank you Ravikumar,

This is what I need. Of course not full code, I did some modification for my scenario, but this is it :)

Thank you very much



RV Ravikumar Venkatesan Syncfusion Team March 17, 2023 08:20 AM UTC


You are welcome. We are happy that our solution helped you to achieve your requirement. Let us know if you need any further assistance.

Live Chat Icon For mobile
Up arrow icon