How to load the data on demand and perform CRUD action in Schedule?

2 mins read

The following steps shows the way to render appointments on scheduler, based on the externally selected date from the application end.

Step 1: Create a normal load on demand sample using scheduler by referring this online sample.

@(Html.EJ().Schedule("Schedule1")

.Width("100%")

.Height("525px")

.CurrentDate(new DateTime(2016, 10, 29))

.EnableLoadOnDemand(true)

.AppointmentSettings(fields => fields.Datasource(ds => ds.URL("/Home/GetData").CrudURL("/Home/Batch").Adaptor("UrlAdaptor"))

.ApplyTimeOffset(false)

.Id("Id")

.Subject("Subject")

.StartTime("StartTime")

.EndTime("EndTime")

.AllDay("AllDay")

.Recurrence("Recurrence")

.RecurrenceRule("RecurrenceRule"))

)

Step 2: Render an individual datePicker control on the same page where the schedule is rendered and bind the client-side event Select as shown below.

@Html.EJ().DatePicker("DatePick").TagName("div").DisplayInline(true).ShowFooter(false).Value("10/23/2016").ClientSideEvents(s => s.Select("onSelected"))

Step 3: Define the Select event function onSelected, on which the query to be passed to the controller (through which the selected date will be passed) is defined as shown below.

function onSelected(args) {

// this function will be called when the date is selected in the month calendar

$("#Schedule1").ejSchedule({ currentDate: new Date(args.value) }); // here we are rendering the Scheduler with the selected date

var date = new Date(args.value).toISOString();

var obj = $("#Schedule1").data("ejSchedule"); // object for schedule is created

var dataManager1 = ej.DataManager({

url: '@Url.Action("GetData","Home")',

crudUrl: '@Url.Action("Batch", "Home")',

crossDomain: true

});

var query = ej.Query().addParams("curDate", date); // By using addParams we can send the parameter to controller for filtering

if (!ej.isNullOrUndefined(obj))

obj.option("appointmentSettings.query", query); // here we are assigning the query to schedule

}

Step 3: In the controller side, define the GetData function by defining an argument to it that accepts the date value passed from client-side. Using the selected date, we can filter the appointments and return the filtered appointments back to the scheduler.

public JsonResult GetData(string curDate)

{

var DataSource = new DataClasses1DataContext().ScheduleDatas.ToList();

List<ScheduleData> appointmentList = DataSource.ToList();

if (!string.IsNullOrEmpty(curDate))

{

DateTime StartDate = Convert.ToDateTime(curDate);

DateTime EndDate = Convert.ToDateTime(curDate).AddHours(23).AddMinutes(59).AddSeconds(59);

appointmentList = DataSource.ToList().Where(app => app.StartTime >= StartDate && app.StartTime <= EndDate || app.Recurrence == true).ToList();// here particular date appointment is filtered

}

return Json(appointmentList, JsonRequestBehavior.AllowGet);

}

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample1909642833

Did you find this information helpful?

Yes

Comments (0)

How to load the data on demand and perform CRUD action in Schedule?

Access denied