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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dynamically load data into the schedule control when month changes

Thread ID:

Created:

Updated:

Platform:

Replies:

143992 Apr 12,2019 04:31 PM UTC Nov 14,2019 12:44 PM UTC ASP.NET MVC - EJ 2 7
loading
Tags: Schedule
Kenneth Tang
Asked On April 12, 2019 04:31 PM UTC

Dear all,

We are using the schedule control with EJ2 MVC and we want load data dynamically into the control as the user changes months. 

Is there a way to accomplish this? Please advance, thx.


KennethT


Karthigeyan Krishnamurthi [Syncfusion]
Replied On April 15, 2019 05:35 AM UTC

Hi Kenneth, 
 
Greetings from Syncfusion. 
 
By default, JS2 Scheduler support load on demand concept where post is raised for each navigation and CRUD actions with start and end date of current view as parameters.  
  
     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; }  
        }  
  
In the below sample, March 2018 month has 4 events and we have changed the collection while changing the month with in actionComplete event. 
 
actionComplete: function (args) { 
    if (args.requestType === "dateNavigate" || args.requestType === "viewNavigate") { 
      this.eventSettings.dataSource = [{ 
        Id: 12, 
        Subject: 'Smarter Puppies', 
        Location: 'Sweden', 
        StartTime: new Date(2018, 2, 4, 10, 0), 
        EndTime: new Date(2018, 2, 4, 11, 30) 
      }] 
    } 
  } 
 
Regards, 
Karthi 


Kenneth Tang
Replied On April 15, 2019 02:23 PM UTC

Dear Karthigeyan,

Thank for info,

But from your sample, please advance how we could get the data value from the script. args.data is undefined when we trace, thx.

KennethT

actionComplete: function (args) { 
    if (args.requestType === "dateNavigate" || args.requestType === "viewNavigate") { 
      this.eventSettings.dataSource = [{ 
        Id: 12, 
        Subject: 'Smarter Puppies', 
        Location: 'Sweden', 
        StartTime: new Date(2018, 2, 4, 10, 0), 
        EndTime: new Date(2018, 2, 4, 11, 30) 
      }] 
    } 
  } 

Karthigeyan Krishnamurthi [Syncfusion]
Replied On April 16, 2019 05:16 AM UTC

Hi Kenneth,  
  
Thanks for your update. 
 
The ActionComplete event will be raised on every Scheduler actions and args parameter will include data only performing CRUD actions on events. 
  
Regards,  
Karthi  
 


Kenneth Tang
Replied On April 16, 2019 12:46 PM UTC

Dear Karthi,

We want to retrieve the current month event ONLY when user press the navigating in schedule. How could we achieve
our aim and could you show a complete sample to us for MVC version instead of javascript?

Thank a lot!

KennethT 

Karthigeyan Krishnamurthi [Syncfusion]
Replied On April 17, 2019 09:42 AM UTC

Hi Kenneth, 
 
Thanks for your update. 
 
We have prepared the CRUD sample for your reference. By default, JS2 Schedule works on load on demand concept and in the below sample, the function LoadData will be called with current view date ranges on every CRUD and navigation actions. 
 
@Html.EJS().Schedule("schedule").Width("100%").Height("650px").CssClass("block-events").Views(view => { view.Option(View.Day).Add(); view.Option(View.TimelineDay).Add(); view.Option(View.TimelineMonth).Add(); }).CurrentView(View.TimelineDay).SelectedDate(new DateTime(2018, 8, 1)).EventSettings(es => es.DataSource(dataManger => 
                            { 
                                dataManger.Url("/Home/LoadData").CrudUrl("/Home/UpdateData").CrossDomain(true).Adaptor("UrlAdaptor"); 
                            })).Render() 
 
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. 
    return Json(data, JsonRequestBehavior.AllowGet);   
}   
 
 
Regards, 
Karthi 


Alex
Replied On November 13, 2019 09:19 PM UTC

Dear Karthigeyan,
Would it be possible to show an example for Blazor applications?

Thanks 
Alex

Nevitha Ravi [Syncfusion]
Replied On November 14, 2019 12:44 PM UTC

Hi Alex, 

Greetings from Syncfusion Support. 

We have prepared a Blazor Scheduler CRUD sample for your reference using CustomAdaptor and HttpClient which can be downloaded from the following link. 


<EjsSchedule TValue="AppointmentData" Height="550px" CurrentView="View.Week" SelectedDate="@(new DateTime(2018, 4, 19))">  
    <ScheduleEventSettings TValue="AppointmentData">  
        <EjsDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></EjsDataManager>  
    </ScheduleEventSettings>  
</EjsSchedule>  
@code {  
    static HttpClient client = new HttpClient();  
    public class CustomAdaptor : DataAdaptor  
    {  
        public async override Task<object> ReadAsync(DataManagerRequest dataManagerRequest, string key = null)  
        {  
            var json = await client.GetStringAsync("https://localhost:44382/api/schedule");  
            AppointmentData[] datasource = JsonConvert.DeserializeObject<AppointmentData[]>(json);  
            return dataManagerRequest.RequiresCounts ? new DataResult() { Result = datasource, Count = datasource.Count() } : (object)datasource;  
        }  
        public async override Task<object> InsertAsync(DataManager dataManager, object data, string key)  
        {  
  
            AppointmentData insertData = data as AppointmentData;  
            var formContent = new FormUrlEncodedContent(new[]  
            {  
                new KeyValuePair<stringstring>("Id", insertData.Id.ToString()),  
                new KeyValuePair<stringstring>("Subject", insertData.Subject),  
                new KeyValuePair<stringstring>("StartTime", insertData.StartTime.ToString()),  
                new KeyValuePair<stringstring>("EndTime", insertData.EndTime.ToString()),  
                new KeyValuePair<stringstring>("RecurrenceID", insertData.RecurrenceID.ToString()),  
                new KeyValuePair<stringstring>("RecurrenceRule", insertData.RecurrenceRule),  
                new KeyValuePair<stringstring>("RecurrenceException", insertData.RecurrenceException),  
                new KeyValuePair<stringstring>("IsAllDay", insertData.IsAllDay.ToString())  
            });  
            var json = await client.PostAsync("https://localhost:44382/api/schedule", formContent);  
            return data;  
        }  
  
        public async override Task<object> UpdateAsync(DataManager dataManager, object data, string keyField, string key)  
        {  
  
            AppointmentData updateData = data as AppointmentData;  
            var formContent = new FormUrlEncodedContent(new[]  
            {  
                new KeyValuePair<stringstring>("Id", updateData.Id.ToString()),  
                new KeyValuePair<stringstring>("Subject", updateData.Subject),  
                new KeyValuePair<stringstring>("StartTime", updateData.StartTime.ToString()),  
                new KeyValuePair<stringstring>("EndTime", updateData.EndTime.ToString()),  
                new KeyValuePair<stringstring>("RecurrenceID", updateData.RecurrenceID.ToString()),  
                new KeyValuePair<stringstring>("RecurrenceRule", updateData.RecurrenceRule),  
                new KeyValuePair<stringstring>("RecurrenceException", updateData.RecurrenceException),  
                new KeyValuePair<stringstring>("IsAllDay", updateData.IsAllDay.ToString())  
            });  
            var json = await client.PutAsync("https://localhost:44382/api/schedule", formContent);  
            return data;  
        }  
             public async override Task<object> RemoveAsync(DataManager dataManager, object data, string keyField, string key) //triggers on appointment deletion through public method DeleteEvent 
        { 
            var uri = "https://localhost:44382/api/schedule/" + data; 
            var json = await client.DeleteAsync(uri); 
            return data; 
        } 
 
        public async override Task<object> BatchUpdateAsync(DataManager dataManager, object changedRecords, object addedRecords, object deletedRecords, string keyField, string key)  
        {  
            object records = deletedRecords;  
            List<AppointmentData> deleteData = deletedRecords as List<AppointmentData>;  
            foreach (var data in deleteData)  
            {  
                var uri = "https://localhost:44382/api/schedule/" + data.Id;  
                var json = await client.DeleteAsync(uri);  
                records = deletedRecords;  
            }  
            List<AppointmentData> addData = addedRecords as List<AppointmentData>;  
            foreach (var data in addData)  
            {  
                var formContent = new FormUrlEncodedContent(new[]  
               {  
                    new KeyValuePair<stringstring>("Id", data.Id.ToString()),  
                    new KeyValuePair<stringstring>("Subject", data.Subject),  
                    new KeyValuePair<stringstring>("StartTime", data.StartTime.ToString()),  
                    new KeyValuePair<stringstring>("EndTime", data.EndTime.ToString()),  
                    new KeyValuePair<stringstring>("RecurrenceID", data.RecurrenceID.ToString()),  
                    new KeyValuePair<stringstring>("RecurrenceRule", data.RecurrenceRule),  
                    new KeyValuePair<stringstring>("RecurrenceException", data.RecurrenceException),  
                    new KeyValuePair<stringstring>("IsAllDay", data.IsAllDay.ToString())  
                });  
                var json = await client.PostAsync("https://localhost:44382/api/schedule", formContent);  
                records = addedRecords;  
            }  
            List<AppointmentData> updateData = changedRecords as List<AppointmentData>;  
            foreach (var data in updateData)  
            {  
                var formContent = new FormUrlEncodedContent(new[]  
               {  
                    new KeyValuePair<stringstring>("Id", data.Id.ToString()),  
                    new KeyValuePair<stringstring>("Subject", data.Subject),  
                    new KeyValuePair<stringstring>("StartTime", data.StartTime.ToString()),  
                    new KeyValuePair<stringstring>("EndTime", data.EndTime.ToString()),  
                    new KeyValuePair<stringstring>("RecurrenceID", data.RecurrenceID.ToString()),  
                    new KeyValuePair<stringstring>("RecurrenceRule", data.RecurrenceRule),  
                    new KeyValuePair<stringstring>("RecurrenceException", data.RecurrenceException),  
                    new KeyValuePair<stringstring>("IsAllDay", data.IsAllDay.ToString())  
                });  
                var json = await client.PutAsync("https://localhost:44382/api/schedule", formContent);  
                records = changedRecords;  
            }  
            return records;  
        }  
    }  
}  


Controller page 
        public ScheduleDataContext _context = new ScheduleDataContext(); 
      
        //// GET: api/<controller> 
        [HttpGet] 
        public IEnumerable<AppointmentData> Get() 
        { 
            return _context.AppointmentData.ToList(); 
        } 
 
        [HttpPost] 
        public void Post(AppointmentData appointmentData) 
        { 
            appointmentData.Id = Convert.ToInt32(appointmentData.Id); 
            appointmentData.StartTime = Convert.ToDateTime(appointmentData.StartTime); 
            appointmentData.EndTime = Convert.ToDateTime(appointmentData.EndTime); 
            appointmentData.IsAllDay = Convert.ToBoolean(appointmentData.IsAllDay); 
            _context.AppointmentData.Add(appointmentData); 
            _context.SaveChanges(); 
        } 
 
        // PUT api/<controller>/5 
        [HttpPut] 
        public void Put(string id, AppointmentData appointmentData) 
        { 
            AppointmentData updateData = _context.AppointmentData.First(i => i.Id == Convert.ToInt32(id)); 
            updateData.Subject = appointmentData.Subject; 
            updateData.StartTime = Convert.ToDateTime(appointmentData.StartTime); 
            updateData.EndTime = Convert.ToDateTime(appointmentData.EndTime); 
            updateData.IsAllDay = Convert.ToBoolean(appointmentData.IsAllDay); 
            updateData.RecurrenceException = appointmentData.RecurrenceException; 
            updateData.RecurrenceRule = appointmentData.RecurrenceRule; 
            _context.AppointmentData.Update(updateData); 
            _context.SaveChanges(); 
        } 
 
        // DELETE api/<controller>/5 
        [HttpDelete("{id}")] 
        public void Delete(int id) 
        { 
            AppointmentData deleteData = _context.AppointmentData.First(i => i.Id == id); 
            _context.AppointmentData.Remove(deleteData); 
            _context.SaveChanges(); 
        } 

Please get back to us if you need any further assistance. 

Regards, 
Nevitha 


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