1. Home
  2. Forum
  3. React - EJ 2
  4. Binding data when change current day

Binding data when change current day

Hi!
Is there a way where I can make a request to my backend when I change the day in my calendar?

That is, when I change the day I want to reload the events of that day with a new request to my backend. In this way I avoid that if I have many events my service is late in answering.



3 Replies
VD Vinitha Devi Murugan Syncfusion Team November 26, 2021 07:18 AM UTC

Hi Brandon, 
 
Greetings from Syncfusion Support. 
 
We have validated your shared query “Is there a way where I can make a request to my backend when I change the day in my calendar” at our end and suggest you to use datamanager for performing CRUD actions in which we have start and end date of current view based on that we reloaded the events during each CRUD actions and view and date navigation using LoadData method. Please refer to the following sample.  
 
  
    this.dataManger = new DataManager({ 
      url: 'http://localhost:54738/Home/LoadData',  
      crudUrl: 'http://localhost:54738/Home/UpdateData', 
      crossDomain: true, 
      adaptor: new UrlAdaptor() 
    }); 
 
Controller.ts 
 
public JsonResult LoadData(Params param)  // Here we get the Start and End Date of current view, based on that can filter the data and return to Scheduler  
{ 
  var data = db.ScheduleEventDatas.Where(app => (app.StartTime >= param.StartDate && app.StartTime <= param.EndDate) || (app.RecurrenceRule != null && app.RecurrenceRule != "")).ToList();  // Here filtering the events based on the start and end date value.  
  return Json(data, JsonRequestBehavior.AllowGet); 
} 
 
public JsonResult LoadData(Params param)  // Here we get the Start and End Date of current view, based on that can filter the data and return to Scheduler  
{ 
    var data = db.ScheduleEventDatas.Where(app => (app.StartTime >= param.StartDate && app.StartTime <= param.EndDate) || (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; } 
} 
 
[HttpPost] 
public JsonResult UpdateData(EditParams param) 
{ 
    if (param.action == "insert" || (param.action == "batch" && param.added != null)) // this block of code will execute while inserting the appointments 
    { 
        for (var i = 0; i < param.added.Count; i++) 
        { 
            var value = (param.action == "insert") ? param.value : param.added[i]; 
            int intMax = db.ScheduleEventDatas.ToList().Count > 0 ? db.ScheduleEventDatas.ToList().Max(p => p.Id) : 1; 
            DateTime startTime = Convert.ToDateTime(value.StartTime); 
            DateTime endTime = Convert.ToDateTime(value.EndTime); 
            ScheduleEventData appointment = new ScheduleEventData() 
            { 
                Id = intMax + 1, 
                StartTime = startTime, 
                EndTime = endTime, 
                Subject = value.Subject, 
                Location = value.Location, 
                Description = value.Description, 
                IsAllDay = value.IsAllDay, 
                StartTimezone = value.StartTimezone, 
                EndTimezone = value.EndTimezone, 
                RecurrenceRule = value.RecurrenceRule, 
                RecurrenceID = value.RecurrenceID, 
                RecurrenceException = value.RecurrenceException, 
                GroupID = value.GroupID.ToString() 
            }; 
            db.ScheduleEventDatas.InsertOnSubmit(appointment); 
            db.SubmitChanges(); 
        } 
    } 
    if (param.action == "update" || (param.action == "batch" && param.changed != null)) // this block of code will execute while updating the appointment 
    { 
        for (var i = 0; i < param.changed.Count; i++) 
        { 
            var value = (param.action == "update") ? param.value : param.changed[i]; 
            var filterData = db.ScheduleEventDatas.Where(c => c.Id == Convert.ToInt32(value.Id)); 
            if (filterData.Count() > 0) 
            { 
                DateTime startTime = Convert.ToDateTime(value.StartTime); 
                DateTime endTime = Convert.ToDateTime(value.EndTime); 
                ScheduleEventData appointment = db.ScheduleEventDatas.Single(A => A.Id == Convert.ToInt32(value.Id)); 
                appointment.StartTime = startTime; 
                appointment.EndTime = endTime; 
                appointment.StartTimezone = value.StartTimezone; 
                appointment.EndTimezone = value.EndTimezone; 
                appointment.Subject = value.Subject; 
                appointment.Location = value.Location; 
                appointment.Description = value.Description; 
                appointment.IsAllDay = value.IsAllDay; 
                appointment.RecurrenceRule = value.RecurrenceRule; 
                appointment.RecurrenceID = value.RecurrenceID; 
                appointment.RecurrenceException = value.RecurrenceException; 
                appointment.GroupID = value.GroupID.ToString(); 
            } 
            db.SubmitChanges(); 
 
        } 
    } 
    if (param.action == "remove" || (param.action == "batch" && param.deleted != null)) // this block of code will execute while removing the appointment 
    { 
        if (param.action == "remove") 
        { 
            int key = Convert.ToInt32(param.key); 
            ScheduleEventData appointment = db.ScheduleEventDatas.Where(c => c.Id == key).FirstOrDefault(); 
            if (appointment != null) db.ScheduleEventDatas.DeleteOnSubmit(appointment); 
        } 
        else 
        { 
            foreach (var apps in param.deleted) 
            { 
                ScheduleEventData appointment = db.ScheduleEventDatas.Where(c => c.Id == apps.Id).FirstOrDefault(); 
                if (apps != null) db.ScheduleEventDatas.DeleteOnSubmit(appointment); 
            } 
        } 
        db.SubmitChanges(); 
    } 
    var data = db.ScheduleEventDatas.ToList(); 
    return Json(data, JsonRequestBehavior.AllowGet); 
} 
 
public class EditParams 
{ 
    public string key { get; set; } 
    public string action { get; set; } 
    public List<ScheduleEventData> added { get; set; } 
    public List<ScheduleEventData> changed { get; set; } 
    public List<ScheduleEventData> deleted { get; set; } 
    public ScheduleEventData value { get; set; } 
} 
 
Db Structure:  
 
 
DB Design: 
 
 
Also, we suggest you to refer below UG link for more information. 
 
 
Kindly try the above CRUD sample and get back to us if you need any further assistance.  
 
Regards, 
Vinitha 


BR Brandon November 26, 2021 04:10 PM UTC

Thank you for your help!

Is there any other way to detect the Start and End Date of the current view instead of using LoadData and DataManager? 

In the front end side 


VD Vinitha Devi Murugan Syncfusion Team November 29, 2021 06:58 AM UTC

Hi Brandon, 
 
Thanks for your update. 
 
We have checked your query ” Is there any other way to detect the Start and End Date of the current view instead of usingLoadData and DataManager” and achieved your requirement using actionComplete event of our scheduler with below code. We have prepared the below sample for your reference. 
 
 
  onActionCompleted(args) { 
    if(args.requestType === "viewNavigate" || args.requestType === "dateNavigate") { 
      var currentViewDates = this.scheduleObj.getCurrentViewDates(); // You can get the start and end date of currnet month using `getCurrentViewDates` public method 
      var startDate = new Date(currentViewDates[0]); 
      var endDate = currentViewDates[currentViewDates.length - 1]; 
      console.log(startDate); 
      console.log(endDate); 
    }   
  } 
 
Kindly try with the above solution and get back to us if you need any further assistance 
 
Regards, 
Vinitha 


Loader.
Up arrow icon