With the month view - how to navigate between months

[Sunita]

I am trying to use ejs-schedule  below is how I added it to my application. Using month view. It displays the current month. And I am not able to navigate between months?

Clicking on header (i.e. name of the month) nothing is happening. Can you please help me out to resolve this? How do I navigate between months?

<ejs-schedule #scheduleObj width='100%' cssClass='schedule-resources' height='650px' [selectedDate]="selectedDate"

                          [eventSettings]="eventSettings" (dataBinding)="onDataBinding()" (actionBegin)="onActionBegin($event)" (dataBound)="onDataBound()"

                          (popupOpen)="onPopupOpen($event)">

                <e-resources>

                    <e-resource field='FieldId' title='Airline' [dataSource]='resourceDataSource' [allowMultiple]='allowMultiple' name='Airlines'

                                textField='text' idField='id'>

                    </e-resource>

                </e-resources>

                <e-views>

                    <e-view option="Month"></e-view>

                </e-views>

            </ejs-schedule>

Any help much appreciated.

Thanks.

This is how it is displayed -

[Karthigeyan Krishnamurthi]

Hi Sunita, 

 

Greetings from Syncfusion. 

 

By default, Scheduler with only the Month view will be displayed like below. We suspect that custom CSS is used / custom code example is used in your sample which could be the cause for the issue. Kindly share your code example with JavaScript function to proceed further. 

https://stackblitz.com/edit/angular-8grx2c?file=app.component.html 

 

 

 

 

Regards, 

Karthi 

[Sunita]

Thanks Karthi.

I reviewed the code in my component.ts - there was code written to remove the navigation. Fixed it and its working now.

Also can you please help with aligning header to the center.

Thanks for you help again.

[Hareesh Balasubramanian]

Hi Sunita, 

Thanks for your update. 

We have prepared a sample as per the shared screenshot using actionBegin event which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-8grx2c-irtm7g?file=app.component.ts 

    onActionBegin(args): void { 

      if(args.requestType === "toolbarItemRendering") { 

        let item1 = args.items[1]; 

        let item2 = args.items[2]; 

        args.items[1] = item2; 

        args.items[2] = item1; 

        args.items[0].align = "Center"; 

        args.items[1].align = "Center"; 

        args.items[2].align = "Center"; 

      } 

    } 

Please check the sample and let us know if you need further assistance. 

Regards, 

Hareesh B 

[Sunita]

Thanks Hareesh.

[Karthigeyan Krishnamurthi]

Most welcome Sunita 😊 

[Sunita]

Is there any event when navigating between months ? I want to load data based on current view dates. I tried using (navigating)="onNavigating($event) - but this doesnt gives correct dates when fetched from this.scheduleObj.getCurrentViewDates();

On navigating between months - on which event can I call my server api to get data for the dates displayed in view. I need to first date and last date displayed in month view.

Help appreciated.

Thanks,

Sunita

[Karthigeyan Krishnamurthi]

Hi Sunita, 

 

By default, EJ2 Scheduler support load on demand concept. During view navigation and any CRUD actions, current view start and end date are passed as parameters to the initial url function like below.  

https://ej2.syncfusion.com/angular/documentation/schedule/data-binding/#scheduler-crud-actions 

 

     public JsonResult LoadData(Params param)  // Here we get the Start and End Date and based on that can filter the data and return to Scheduler  

        {  

            DateTime start = param.StartDate;  

            DateTime end = param.EndDate;  

            var data = db.ScheduleEventDatas.Where(app => (app.StartTime >= start && app.StartTime <= end) || (app.RecurrenceRule != null && app.RecurrenceRule !="")).ToList();  // Here filtering the events based on the start and end date value.  

            return Json(data, JsonRequestBehavior.AllowGet);  

        }  

        public class Params  

        {  

            public DateTime StartDate { get; set; }  

            public DateTime EndDate { get; set; }  

        }  

When the view is navigated, actionComplete event will be triggered after navigating event where you can call your server API and the current view start and end date can be retrieved within that event using below code example. 

https://ej2.syncfusion.com/angular/documentation/api/schedule/#actioncomplete 

https://ej2.syncfusion.com/angular/documentation/api/schedule/actionEventArgs/ 

this.activeView.renderDates[0]; 

this.activeView.renderDates[this.activeView.renderDates.length-1]; 

Regards, 

Karthi 

[Sunita]

Thanks Karthi.

-Sunita

[Karthigeyan Krishnamurthi]

Most welcome Sunita 😊