Start and End dates of Current View

[Salvatore Cannone]

Hi,

Is there a way to retrieve the current Start and End Dates of the current schedule view. For example if I where in month view for August 2023 then the start date would be the 01-08-2023 and end date 31-08-2023.

If I were in week view it would return the date for the start of the week and the date for the end of the week in the current view.

And the last one is there an event that fires when the user changes the date selection?

Regards,

Sam

[Venkateshwaran Saravanakumar]

Hi Salvatore,

Sample:  https://stackblitz.com/edit/pabhwh-fr6zab?file=index.html,index.ts

Q1: Is there a way to retrieve the current Start and End Dates of the current schedule view. For example if I where in month view for August 2023 then the start date would be the 01-08-2023 and end date 31-08-2023. If I were in week view it would return the date for the start of the week and the date for the end of the week in the current view

Yes, as per your requirement, you can retrieve the current start and end dates of the current schedule view with the help of getCurrentViewDates method of the Scheduler. However, it retrieves all the dates that lie in the active view of the scheduler. Meanwhile, you can get the start and end dates of a month/week as you requested by customizing the codes as demonstrated in the code snippet below.

[index.ts]

clickButton.element.onclick = function () {

    const dates = scheduleObj.getCurrentViewDates();

    let currentViewDates;

    if (scheduleObj.currentView == 'Month') {

        currentDate = scheduleObj.selectedDate;

        const currentMonth = currentDate.getMonth();

        currentViewDates = dates.filter((date) => date.getMonth() === currentMonth);

    } else {

        currentViewDates = scheduleObj.getCurrentViewDates();

    }

    const startDate = currentViewDates[0];

    const endDate = currentViewDates[currentViewDates.length - 1];

    console.log(startDate);

    console.log(endDate);

};

 

 

Q2: And the last one is there an event that fires when the user changes the date selection?

When the user changes the date selection, the 'actionBegin, 'actionComplete' and 'navigating' events trigger in the Scheduler. Kindly use the appropriate event according to your use case.

 

Regards,

Venkatesh

[Salvatore Cannone]

Hi  Venkateshwaran,

Thank you for your reply, but is there a way to retrieve on the initial display of the control, rather than having to click to get it.

The reason for this is that I would like to display events when the control is initially displayed. So I would get the dates on initial display then query my server for events within that date range and load those into the schedule.

Regards,

Sam

​​​​​​_​

[Venkateshwaran Saravanakumar]

Salvatore,

Sample: Znc1pe (forked) - StackBlitz

UG: Data binding in EJ2 JavaScript Schedule control | Syncfusion

We have modified our sample code as per your requirements. You can retrieve the dates on the initial display of the control by binding the Schedule Created event, as shown in the highlighted code snippets below. Additionally, you can filter events on the server within that date range by using the URL adaptor. Kindly refer to the shared UG for more details.

[index.ts]

 

let scheduleObj: Schedule = new Schedule({

    width: '100%',

    height: '650px',

    views: ['Day', 'Week', 'WorkWeek', 'Month'],

    selectedDate: currentDate,

    eventSettings: { dataSource: [] },

    navigating: OnNavigating,

    actionBegin: OnActionBegin,

    actionComplete: OnActionComplete,

    created: OnCreated

});

scheduleObj.appendTo('#Schedule');

 

 

function OnCreated() {

    const dates = scheduleObj.getCurrentViewDates();

    let currentViewDates;

    if (scheduleObj.currentView == 'Month') {

        currentDate = scheduleObj.selectedDate;

        const currentMonth = currentDate.getMonth();

        currentViewDates = dates.filter((date) => date.getMonth() === currentMonth);

    } else {

        currentViewDates = scheduleObj.getCurrentViewDates();

    }

    const startDate = currentViewDates[0];

    const endDate = currentViewDates[currentViewDates.length - 1];

    console.log(startDate);

    console.log(endDate);

};

 

[Salvatore Cannone]

Hi Venkateshwaran,

Thanks that works great as long as we don’t use resource grouping. We’re using resource grouping similar to the example https://ej2.syncfusion.com/demos/#/bootstrap5/schedule/timeline-resource-grouping.html and in that case the getCurrentViewDates() function returns an empty array during onCreate.

Sam

[Venkateshwaran Saravanakumar]

Salvatore,

Sample: https://stackblitz.com/edit/pabhwh-drqhdg?file=index.html,index.ts

We have analyzed the issue on our end. Since resource grouping causes the Scheduler to take a longer time to render, the created event is called before it finishes rendering. This situation leads to the 'getcurrentViewDates' function returning an empty array. To resolve this, you can utilize the 'databound' method to display the 'currentViewDates'. However, please note that the 'databound' event triggers after every CRUD action. Therefore, you need to prevent it from triggering after obtaining the dates during the initial load.


[index.ts]

let isInitialLoaing = true;

function OnDataBound(): void {

    if (isInitialLoaing) {

        const dates = scheduleObj.getCurrentViewDates();

        let currentViewDates;

        if (scheduleObj.currentView === 'Month') {

            currentDate = scheduleObj.selectedDate;

            const currentMonth = currentDate.getMonth();

            currentViewDates = dates.filter((date) => date.getMonth() === currentMonth);

        } else {

            currentViewDates = scheduleObj.getCurrentViewDates();

        }

        const startDate = currentViewDates[0];

        const endDate = currentViewDates[currentViewDates.length - 1];

        console.log(startDate);

        console.log(endDate);

        isInitialLoaing = false;

    }

}

 

Regards,
Venkatesh