How to add event color box outside scheduler like event-calnedar?

Scheduler
#1

Hi,
I want to add a box to choose event color like event-calendar:

屏幕截图 2023-12-26 141555
屏幕截图 2023-12-26 1415551812×955 73.9 KB

I find a box of small calendar outside the scheduler（ Mini calendar outside the scheduler (dhtmlx.com) ）
but I don’t know how to add a box of choosing and setting event color outside the scheduler

#2

Hi @polo1,

As I understand, your requirement is to create an element that will be used to filtering events(like in the attached screenshot), am I right?

If so, it can be done with Filter functionality, you can read about it by the following link:
https://docs.dhtmlx.com/scheduler/filtering.html

Also, you can find code reference for event filtering in the following sample:
https://docs.dhtmlx.com/scheduler/samples/09_api/09_filtering_events.html

This sample uses different fields than color, but the same approach can be used in order to filter events by color.

Kind regards,

#3

hi,
thank you for your kind answer, it is really helpful! But I also want to know if I can add new type of event filtering?

From this simple: https://docs.dhtmlx.com/scheduler/samples/09_api/09_filtering_events.html , there are three types: “Appointments”, “Tasks”, “Trainings”， I want to add a new type on the calendar , like “Study” in them, can I?

#4

Hi @polo1,

You can filter event by any property, like follows:

scheduler.filter_week = function(id, event){
    if(event.study == 1)
        return true;
    return false;
}

Here is a demo:
https://snippet.dhtmlx.com/bs5dn9ox

You can create any custom properties that you require, and apply filtering for them.

Kind regards,

#5

thanks for your kind answer, I know what you mean, but I want to know if I can add a filter type name just on the website, like event-calendar that I can add new color type on the website: DHTMLX - Event Calendar. Event color

#6

Hello @polo1,

As I understand you want to add the custom control(like plus button on the demo), that will show a popup after click, in which you will be able to create an additional filter, am I right?

This requirement lays more on JavaScript, than in the Scheduler, as you have to create custom logic(the same way as in the following sample, or your own way, that will populate list of filters with the new one).

Here is an example of how it can be implemented with JS(click the “Add filter” button, so it will add an additional filter with values defined in inputs:
https://snippet.dhtmlx.com/y57l2hje

Here is the main logic of creating new filters:

let addFilterBtn = document.querySelector("#adf");
let labelInput = document.querySelector("#fil_label");
let filterTypeInput = document.querySelector("#fil_type");
let filtersListHTML = document.querySelector("#filters_wrapper");

addFilterBtn.addEventListener("click", () => {
    const newFilterVal = filterTypeInput.value;
    filters[newFilterVal.toLowerCase()] = true;
    let htmlContent = `
        <label class="checked_label" id="scale${filterTypeInput.value}">
			<input type="checkbox" class="sch_radio" name="${labelInput.value.toLowerCase()}" value="1" checked/>
			<i class="material-icons icon_color">check_box</i>${labelInput.value}
		</label>
    `; 
    filtersListHTML.children[filtersListHTML.children.length -1].insertAdjacentHTML( 'afterend', htmlContent);
    initializeFilters();
    scheduler.updateView();
})

The idea is to collet values for new filter from somewhere:

   const newFilterVal = filterTypeInput.value;

Push the new filter value into the scheduler filters, like follows:

    // default values for filters
    var filters = {
        appointment: true,
        task: true,
        training: true
    };

....
    filters[newFilterVal.toLowerCase()] = true;

After that you will have to create new checkbox control and push it into the HTML list with controls:

    let htmlContent = `
        <label class="checked_label" id="scale${filterTypeInput.value}">
			<input type="checkbox" class="sch_radio" name="${labelInput.value.toLowerCase()}" value="1" checked/>
			<i class="material-icons icon_color">check_box</i>${labelInput.value}
		</label>
    `; 
    filtersListHTML.children[filtersListHTML.children.length -1].insertAdjacentHTML( 'afterend', htmlContent);

Then reattach listeners for filters list(as there will be one new checbox control):

    initializeFilters();

And then call the updateView in order to repain the scheduler with new applied filter.

You can add any count of additional filters. If the requirement is have the exact behaviour that in the event calendar demo, you will have to update logic in demo, in order to show custom popup after click the Add filter button, but logic will be similar.

Kind regards,

#7

thank you so much！！！！！！