Get schedule start and end date on page load

[jose lara]

Hi, at the time the scheduler initially loads, how can I get the current view start and end date? I tried this.scheduleObj.getCurrentViewDates() but it is empty.

[Vinitha Devi Murugan]

Hi Jose, 

 

Syncfusion Greetings. 

 

We achieved your requirement by making use of created event of the scheduler. Please refer below sample. 

 

https://stackblitz.com/edit/angular-krnjzt-kaxqng?file=app.component.ts  

 

  onCreated(): void { 

    // To get current view date we used getCurrentViewDates public method 

    let currentViewDates: Date[] = this.scheduleObj.getCurrentViewDates() as Date[]; 

    let startDate: Date = currentViewDates[0] as Date; 

    let endDate: Date = currentViewDates[currentViewDates.length - 1] as Date; 

    console.log(startDate); 

    console.log(endDate); 

  } 

 

Regards, 

M.Vinitha devi 

[jose lara]

Thx. This works inside the onCreated() method. But, when I use the same logic inside of onNavigating() method, the dates are one week behind. How can I get the current dates in other events as well? 

[Vinitha Devi Murugan]

Hi Jose, 

 

Thanks for your update. 

 

You can get the start and end date of current date range by making use of actionComplete event with args.requestType viewNavigate and dateNavigate. For the same we have prepared the below sample, kindly refer it. 

 

https://stackblitz.com/edit/angular-krnjzt-nyshwq?file=app.component.ts 

//To get the start and end dates of current view and current Date range 

  onActionComplete(args): void { 

    if ( args.requestType === "viewNavigate" || args.requestType === "dateNavigate") { 

      var currentViewDates = this.scheduleObj.getCurrentViewDates(); 

      var startDate = currentViewDates[0]; 

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

      console.log(startDate); 

      console.log(endDate); 

    } 

  } 

 

Note: Naviagating event triggers before the date or view navigation takes place on scheduler. 

 

Regards, 

M.Vinitha devi 

[Luis Gomez]

Hi, I'm experiencing this problem in Vue. 

this.$refs.scheduler.getCurrentViewDates() is empty onCreated()

[Vinitha Devi Murugan]

Hi Luis, 

 

Thanks for your update. 

 

We have validated your reported query at our end with your shared code. To resolve your reported issue we suggest you to use below code in your sample. 

 

Sample: https://codesandbox.io/s/how-to-get-current-view-dates-in-created-event-gqp6d?file=/src/App.vue:1572-1682  

 

onCreate: function (args) { 

    console.log(this.$refs.scheduler.ej2Instances.getCurrentViewDates()); 

}, 

 

Kindly try with the above solution and get back to us if you need any further assistance 

 

Regards, 

Vinitha 

[Deniz]

Hi,

I think, getcurrentViewDates() method is not usable in every scenario. Assume that view is set to month and start and end dates set to November. In this case calendar will also display 31 October and 01, 02 Decembers and getcurrentViewDates() will also return these dates. But this may be not what you want. I only want to load events of November so I need precise month start and end dates. Currently there seems to be no way to do it if you use build-in navigation.

[Ravikumar Venkatesan]

Hi Deniz,

Greetings from Syncfusion support.

We have validated your query “I only want to load events of November so I need precise month start and end dates” at our end. The Schedule will send the start and end dates of the selected date range to the server end. If you want only the selected month's data you can fetch them alone with the help of the code snippet shown below.

Sample: https://stackblitz.com/edit/ej2-angular-schedule-url-adaptor-sample?file=app.component.ts

[HomeController.cs]

        public JsonResult LoadData(Params param)  // Here we get the Id value we added in the dataQuery

        {

            DateTime start = param.StartDate;

            DateTime end = param.EndDate;

            if (param.StartDate.Month != param.EndDate.Month)

            {

                if (param.StartDate.Day == 1)

                {

                    end = start.AddMonths(1);

                }

                else

                {

                    var previousMonth = new DateTime(param.StartDate.Year, param.StartDate.Month, 1);

                    start = previousMonth.AddMonths(1);

                    end = start.AddMonths(1);

                }

            }

            var data = db.ScheduleEventDatas.Where(app => (app.StartTime >= start && app.StartTime <= end)).ToList();

            return Json(data, JsonRequestBehavior.AllowGet);

        }

Kindly try the shared solution and let us know if you need any further assistance on this.

Regards,

Ravikumar Venkatesan

Attachment: ej2angularscheduleurladaptorservicesample_c184a6a1.zip