How to Configure 7-Day Navigation in Agenda View for React ScheduleComponent

[Aviv Daniel]

Hello Syncfusion Support Team,

I am using the ScheduleComponent in React with the Agenda view to display appointments. By default, the Agenda view displays 7 days initially, but when navigating with the Next/Previous buttons, it only advances by one day at a time. I would like to configure it to navigate by 7 days instead.

I reviewed the API and documentation, and while I found the agendaDaysCount property, it only affects the number of days initially displayed and doesn’t impact the navigation interval. I haven’t seen any other properties or examples that might help adjust this behavior.

Could you please advise on how to achieve this 7-day navigation in the Agenda view? Any guidance or examples would be greatly appreciated.

Thank you for your help!

[Vijay Ravi]

Hi Aviv Daniel,

To fulfill your requirement, where clicking the "Next" button navigates to the next 7 days and clicking the "Previous" button navigates 7 days back, we recommend utilizing the onNavigating event. This will allow you to adjust the currentDate based on the selectedDate and effectively manage the date range as required as shown in the below shared code snippet. Refer the below shared sample for your reference.

[index.js]
 

 

const agendaDaysCount = 7;

  const onNavigating = (args) => {

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

      const currentDate = args.previousDate;

      const newDate = new Date(currentDate);

      if (args.currentDate > args.previousDate) {

        //navigate next 7 days

        newDate.setDate(currentDate.getDate() + agendaDaysCount);

      } else {

         //navigate before 7 days

        newDate.setDate(currentDate.getDate() - agendaDaysCount);

      }

      args.currentDate = newDate;

    }

  };

  return (

    <div className='schedule-control-section'>

      <div className='col-lg-9 control-section'>

        <div className='control-wrapper'>

          <ScheduleComponent

            agendaDaysCount={agendaDaysCount}

            navigating={onNavigating}

          >

            <Inject services={[Agenda]} />

          </ScheduleComponent>

        </div>

      </div>

    </div>

  );

Sample link: https://stackblitz.com/edit/agenda-view-navigation-customization-ucg7qk?file=index.js

navigating api: https://ej2.syncfusion.com/react/documentation/api/schedule/#navigating

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

[Aviv Daniel]

Thanks so much for the support! The solution works great for navigating in the agenda view. However, I have one more question. I’m using multiple views (not just the agenda view), and I’d like this navigation logic to apply only to the agenda view (for example, it shouldn't affect the "month" view).

I noticed in the API documentation that there's a currentView property, which seems like it would be perfect for checking the active view. However, when I try to use currentView, it returns undefined. I’ve set up a demo here to show the issue: https://stackblitz.com/edit/agenda-view-navigation-customization-pqoqbp?file=index.js

Do you have any advice on how to target only the agenda view or resolve the undefined issue with currentView?

Thanks again for your help!

[Vijay Ravi]

Hi Aviv Daniel,

To apply the custom navigation logic only to the Agenda view and not to other views (e.g., "Month," "Day," "Week"), you can check the currentView property of the Schedule component within the onNavigating event. This approach, the custom navigation behavior is only executed when the current view is "Agenda" as shown in the below shared code snippet. Refer the below shared sample for your reference.

[index.js]
 

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

const AgendaView = () => {

  const agendaDaysCount = 7;

  const scheduleObj = useRef(null);

  const onNavigating = (args) => {

    if (args.action === 'date' && scheduleObj.current.currentView === "Agenda") {

      const currentDate = args.previousDate;

      const newDate = new Date(currentDate);

      if (args.currentDate > args.previousDate) {

        //navigate next 7 days

        newDate.setDate(currentDate.getDate() + agendaDaysCount);

      } else {

         //navigate before 7 days

        newDate.setDate(currentDate.getDate() - agendaDaysCount);

      }

      args.currentDate = newDate;

    }

  };

  return (

    <div className='schedule-control-section'>

      <div className='col-lg-9 control-section'>

        <div className='control-wrapper'>

          <ScheduleComponent

            ref={scheduleObj}

            width='100%'

            height='650px'

            currentView='Agenda'

            selectedDate={new Date(2021, 1, 15)}

            eventSettings={{ dataSource: generateObject() }}

            agendaDaysCount={agendaDaysCount}

            navigating={onNavigating}

          >

            <ViewsDirective>

              <ViewDirective option='Day' />

              <ViewDirective option='Week' />

              <ViewDirective option='WorkWeek' />

              <ViewDirective option='Month' />

              <ViewDirective option='Agenda' />

            </ViewsDirective>

            <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />

          </ScheduleComponent>

        </div>

      </div>

    </div>

  );

};

export default AgendaView;

Sample link: agenda view navigation customization (forked) - StackBlitz

currentView api: https://ej2.syncfusion.com/react/documentation/api/schedule/#currentview

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay