[REACT] Multiple Filter on Calendar View

[davidlumber]

Is it possible more custom filter apart from resource filter on calendar view.

https://bryntum.com/products/calendar/examples/resourceview/

[Animal]

Yes.

Filtering is a data based operation and operates on the Store. That is product independent. A Store is like a database table that holds rows of your business entities.

For example the EventStore holds events. The resourceStore holds the resources.

There are various configs and methods on Stores.

https://bryntum.com/products/calendar/docs/api/Core/data/Store#config-filters

https://bryntum.com/products/calendar/docs/api/Core/data/Store#function-filter

We have an example which filters the event store: https://bryntum.com/products/calendar/examples/filtering/

[tasnim]

Hi,

Sure, Here is an example of how you could achieve it

Let's say we want a checkbox. When it's checked we want to only show "ALL DAY" events

So First we'd need to add a checkbox to the sidebar.

new Calendar({
	...
	sidebar : {
		items : {
			showAllDayEvents : {
				type : 'check',
				label : 'show all day events',
				color : 'b-blue',
				onAction(params) {
					// Get required properties from the params
					const { source, checked } = params;
					// Getting the calendar instance
					const calendar = source.up('calendar');
					// If the checkbox status is checked
					if (checked) {
						// show the record that has allDay set to true (show the all day events)
						calendar.eventStore.addFilter({
							id : 'allDayFilter',
							filterBy : (record) => record.allDay
						});
					} else {
						// If the checkbox status is not checked then remove the filter and show all events
						calendar.eventStore.removeFilter('allDayFilter');
					}
 				}
			}
		}
	}
});

Please check these docs links
https://bryntum.com/products/calendar/docs/api/Scheduler/data/EventStore#function-removeFilter
https://bryntum.com/products/calendar/docs/api/Scheduler/data/EventStore#function-addFilter
https://bryntum.com/products/calendar/docs/api/Core/widget/Checkbox
https://bryntum.com/products/calendar/docs/api/Calendar/widget/Sidebar#config-items

And here is a gif demo

chrome_i2F9Hd70gx.gif (224.73 KiB) Viewed 105 times

Best regards,
Tasnim