Our powerful JS Calendar component


Post by jhemela »

Hi,

When you set the variable for the eventFilter then it never displays the eventFilter, even if it is set to true or false.

This does not display the eventFilter

	sidebar: {
		side     : 'left',
		items    : {
			eventFilter: true
		},
		collapsed: false,
	},

But when you remove the parameter then this is always displayed.

	sidebar: {
		side     : 'left',
		// items    : {
		// 	eventFilter: true
		// },
		collapsed: false,
	},

How can you also change the column filter? Default it is filtered on the name column. But i want to adjust that.

Attachments
2020-12-10 13_25_39-localhost_8080_#_calendar.png
2020-12-10 13_25_39-localhost_8080_#_calendar.png (58.46 KiB) Viewed 1268 times

Post by mats »

How can you also change the column filter?

How would you like it to work?

Here's how to pass configurations:

items    : {
     eventFilter:  {
           // your configs here
     
} },

Post by jhemela »

Hi Mats,

Now the config disables the filter, but is there an option to hide or show it?

	sidebar: {
		side     : 'left',
		items    : {
			eventFilter: {
				disabled: false
			}
		},
		collapsed: false,
	},

And for the filtering, in your DemoHeader component you have a function as follows where i adjusted the columnfilter to the eventType.
But i can't find it for the eventFilter in the sidebar.


Post by mats »

Here's how you config hidden state:

eventFilter: {
    hidden: true / false
}

Post by jhemela »

Hi mats,

Great! That worked!


Post by jhemela »

jhemela wrote: Mon Dec 14, 2020 2:30 pm

And for the filtering, in your DemoHeader component you have a function as follows where i adjusted the columnfilter to the eventType.
But i can't find it for the eventFilter in the sidebar.

		findChangeHandler     : function ({value}) {
			// We filter using a RegExp, so quote significant characters
			value = value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
			// A filter with an id replaces any previous filter with that id.
			// Leave any other filters which may be in use in place.
			this.$refs.calendar.calendarInstance.eventStore.filter({
				id      : 'eventNameFilter',
                // note: set filtered field in this case eventType
				filterBy: event => event.eventType.match(new RegExp(value, 'i'))
			})
		},

Post by pmiklashevich »

FilterField accepts filterFunction config.

eventFilter: {
    filterFunction : (event, value)  => {
       return event.eventType.match(new RegExp(value, 'i'))
    }
}

Pavlo Miklashevych
Sr. Frontend Developer


Post by jhemela »

Great! That worked!


Post Reply