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

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

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: http://www.syncfusion.com/downloads/support/directtrac/general/ze/sample1909642833

Article ID: Published Date: Last Revised Date: Platform: Control:
8904 07/03/2018 07/03/2018 ASP.NET MVC Schedule
Tags:
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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