Appointment Filtering

[Halit]

Hi,

How can i filter appointments using urlAdaptor? Found an example in js docs but not able to implement it in core:

https://ej2.syncfusion.com/javascript/documentation/schedule/appointments/#appointment-filtering

[Satheesh Kumar Balasubramanian]

Hi Halit, 

  

Thanks for using Syncfusion Products. 

  

We have prepared sample to filter the appointments using urlAdaptor. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/171625/ze/AppointmentFiltering-17049866 

  

HomeController.cs:  

        [HttpPost] 

        public List<ScheduleEvent> LoadData([FromBody]Params param) 

        { 

            var appData = _context.ScheduleEvents.ToList().Where(app => (app.StartTime >= param.StartDate && app.StartTime <= param.EndDate && app.VehicleId == param.VehicleId) || (app.RecurrenceRule != null && app.RecurrenceRule != "")).ToList();  // Here filtering the events based on the start and end date value. 

            return appData; 

        } 

  

Index.cshtml:  

@using Syncfusion.EJ2 

@using Syncfusion.EJ2.Schedule 

  

  

@{ 

    var dataManager = new DataManager() { Url = "/Home/LoadData", CrudUrl = "Home/UpdateData", Adaptor = "UrlAdaptor", CrossDomain = true }; 

} 

  

<div class="col-lg-9 control-section"> 

    <ejs-schedule id="schedule" actionBegin="onActionBegin" width="100%" height="800px" selectedDate="DateTime.Now" showQuickInfo="true" popupOpen="onPopupOpen" resourceHeaderTemplate="#resource-template"> 

        <e-schedule-views> 

            <e-schedule-view option="TimelineMonth"></e-schedule-view> 

            <e-schedule-view option="TimelineWeek"></e-schedule-view> 

            <e-schedule-view option="TimelineDay"></e-schedule-view> 

        </e-schedule-views> 

        <e-schedule-group byGroupID="false" resources="@ViewBag.Resources"></e-schedule-group> 

        <e-schedule-eventsettings dataSource="dataManager" query="new ej.data.Query().addParams('VehicleId', '1')"> 

            <e-eventsettings-fields> 

                <e-field-subject name="ReservationTitle"></e-field-subject> 

                <e-field-recurrenceid name="RecurrenceId"></e-field-recurrenceid> 

                <e-field-description name="Notes"></e-field-description> 

            </e-eventsettings-fields> 

        </e-schedule-eventsettings> 

    </ejs-schedule> 

</div> 

  

<script type="text/javascript"> 

    var scheduleGroups = @Html.Raw(Json.Serialize(ViewBag.Vehicles)) 

    function onActionBegin(args) { 

        var scheduleObj = document.querySelector('.e-schedule').ej2_instances[0]; 

            if (args.requestType === 'toolbarItemRendering') { 

                var exportItem = { 

                    align: 'Center', type: 'Input', template: new ej.dropdowns.DropDownList({ 

                        index: 0, 

                        width: 240, 

                        dataSource: scheduleGroups, 

                        fields: { text: 'VehicleName' }, 

                        change: function (args) { 

                            scheduleObj.eventSettings.query = new ej.data.Query().addParams('VehicleId', args.itemData.VehicleId); 

                        } 

                    }) 

                }; 

                args.items.push(exportItem); 

            } 

        } 

</script> 

  

Kindly try the above sample and let us know if this meets your requirement. 

  

Regards, 

Satheesh Kumar B