Refreshing/filtering data in scheduler

[Toni]

Hello

I want my appointments be categorized and filtered consequently.

Next to my scheduler I will show a group of checkboxes with all my available categories. Let's say they are A, B and C.

In the very first execution, all categories will be selected (checked) but, as the user changes them the scheduler is refreshed and the selected values will be stored in a cookie so next execution only the appointments belonging to the selected categories. 

I.e., user unchecks the C categories: Scheduler datasource is refreshed so it only shows appointments from A and B categories and a cookie is stored with the values "A,B".

Every time that the user comes back to the page, only appointments from A and B categories will be shown.

I'd like to refresh the datasource using a javascript function that calls the URI via Ajax with my required parameters.

I also would like to set a minimum date for the scheduler. It has no sense that the user try to browse a 2 years ago calendar. 

Thanks in advance.

EDITED: Despite I asked you for a minimum date (in the calendar), I'd like to see the events prior to the current date. Currently, the don't render in the scheduler.

[Karthigeyan Krishnamurthi]

Hi Toni, 

 

Thank you for contacting Syncfusion support. 

 

We have prepared the below sample to dynamically update the Scheduler data source based on check box value. In the below sample, each event has Category field and the filtering is done based on that field. 

https://stackblitz.com/edit/jbpiks-ahfvmy?file=index.js 

 

new ej.buttons.CheckBox({ cssClass: 'e-resource e-airways-1', label: 'Categorize-A', checked: true, change: onChange }, '#Categorize-A'); 

new ej.buttons.CheckBox({ cssClass: 'e-resource e-airways-2', label: 'Categorize-B', checked: true, change: onChange }, '#Categorize-B'); 

new ej.buttons.CheckBox({ cssClass: 'e-resource e-airways-3', label: 'Categorize-C', checked: true, change: onChange }, '#Categorize-C'); 

 

function onChange(args) { 

  var ele = document.querySelectorAll('.e-resource'); 

  var filteredData = []; 

  for (var i = 0; i < ele.length; i++) { 

    if (ele[i].getAttribute('aria-checked') === 'true') { 

      debugger; 

      var fildata = filter(ele[i].firstElementChild.children[0].id); 

      filteredData = filteredData.concat(fildata); 

    } 

  } 

  scheduleObj.eventSettings.dataSource = filteredData; 

  scheduleObj.dataBind(); 

} 

 

function filter(id) { 

  var dm = new ej.data.DataManager({ json: data }); 

  var CurData = dm.executeLocal(new ej.data.Query().where("Category", 'equal', id)); 

  return CurData; 

} 

 

 

Note: Above sample is for your reference and the same can be achieved in Core. 

 

We have validated your requirement and we like to let you know that we have already logged a feature request on this and it can be tracked through our feedback portal below. 

https://www.syncfusion.com/feedback/4204/support-for-scheduler-mindate-and-maxdate 

 

Please upvote this feature to make this our priority. While this feature itself is important we will prioritize the features every release, based on the user demands.  

If you have any more specification/suggestions to the feature request you can add it as a comment in the portal. 

 

Regards, 

Karthigeyan 

[Toni]

Thanks for your answer, it's ok for me.

I've upvoted the feature request as you suggested. I've also commented it but I think that, maybe, is another different feature.

And, talking about new features... I suggest the possibility to add a params (key,value) property to pass optionally to the query. In the sample proposed, is more efficient to filter the items on server side than on the browser.

Thanks for everything.

[Karthigeyan Krishnamurthi]

Hi Toni,  

 

Thanks for your update. 

 

Regards, 

Karthigeyan