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

With the month view - how to navigate between months

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()"
                    <e-resource field='FieldId' title='Airline' [dataSource]='resourceDataSource' [allowMultiple]='allowMultiple' name='Airlines'
                                textField='text' idField='id'>
                    <e-view option="Month"></e-view>

Any help much appreciated.


This is how it is displayed -

9 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team April 5, 2019 06:13 AM UTC

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. 

SU Sunita April 5, 2019 09:16 AM UTC

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.

HB Hareesh Balasubramanian Syncfusion Team April 8, 2019 01:49 PM UTC

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. 

    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. 

Hareesh B 

SU Sunita April 10, 2019 11:25 AM UTC

Thanks Hareesh.

KK Karthigeyan Krishnamurthi Syncfusion Team April 11, 2019 03:36 AM UTC

Most welcome Sunita 😊 

SU Sunita April 11, 2019 10:39 AM UTC

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.


KK Karthigeyan Krishnamurthi Syncfusion Team April 12, 2019 05:21 AM UTC

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.  
     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 { getset; }  
            public DateTime EndDate { getset; }  

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. 



SU Sunita April 14, 2019 11:04 AM UTC

Thanks Karthi.


KK Karthigeyan Krishnamurthi Syncfusion Team April 15, 2019 04:00 AM UTC

Most welcome Sunita 😊 

Live Chat Icon For mobile
Up arrow icon