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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

With the month view - how to navigate between months

Thread ID:

Created:

Updated:

Platform:

Replies:

143765 Apr 4,2019 11:12 AM UTC Apr 15,2019 04:00 AM UTC Angular 9
loading
Tags: ejSchedule
Sunita
Asked On April 4, 2019 11:12 AM UTC

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 [Syncfusion]
Replied On 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. 
 
 
 
 
Regards, 
Karthi 


Sunita
Replied On 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.



Hareesh Balasubramanian [Syncfusion]
Replied On 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. 

Regards, 
Hareesh B 


Sunita
Replied On April 10, 2019 11:25 AM UTC

Thanks Hareesh.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On April 11, 2019 03:36 AM UTC

Most welcome Sunita 😊 


Sunita
Replied On 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.

Thanks,
Sunita

Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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 { 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. 

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


Regards, 
Karthi 



Sunita
Replied On April 14, 2019 11:04 AM UTC

Thanks Karthi.

-Sunita

Karthigeyan Krishnamurthi [Syncfusion]
Replied On April 15, 2019 04:00 AM UTC

Most welcome Sunita 😊 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon