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

Dynamically load data into the schedule control when month changes

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


7 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team 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 



KT Kenneth Tang 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) 
      }] 
    } 
  } 


KK Karthigeyan Krishnamurthi Syncfusion Team 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  
 



KT Kenneth Tang 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 


KK Karthigeyan Krishnamurthi Syncfusion Team 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 



AL Alex November 13, 2019 09:19 PM UTC

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

Thanks 
Alex


NR Nevitha Ravi Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon