set ClassName

[LiangZipeng-1998]

I need to add classname to the section circled in the diagram.
Is there a way to do that?

[stefanuebe]

You could try to run a javascript and query for the given css class name using the querySelectAll. That will return all elements containing that css class name. Then you can iterate them and use the js api to add class names.

calendar.getElement().executeJs("""
    let elements = this.querySelectorAll(".fc-daygrid-event-harness");
    elements.forEach(e => e.classList.add("hello"));
""");

If you need to find a specific "harness" element, you'll have to iterate the list and filter them by their child elements matching your needs (e.g. look for a child with the class "fc-event-title" and content "xyz" or so)

[LiangZipeng-1998]

I tried to include this in the code, but it didn't work.

[LiangZipeng-1998]

[stefanuebe]

Oh yeah, it needs to be done after the entries have been loaded.

[stefanuebe]

Please try this instead. It modifies the client side events callback, that takes care of fetching the entries. After they have been passed to the calendar, it applies the class name to the resulting entries.

private void initCalendar() {
        ...
        calendar.getElement().executeJs("""
                     let old = this.calendar.getOption("events");
                     this.calendar.setOption("events", (info, successCallback, failureCallback) => {
                        let modSuccess = (array) => {
                            successCallback.call(this.calendar, array);
                            let elements = this.querySelectorAll($0);
                            elements.forEach(e => e.classList.add($1));
                        };
                     
                        old.call(this.calendar, info, modSuccess, failureCallback); 
                     });     
                     
                """, ".fc-daygrid-event-harness", "hello");
     ...
}

[stefanuebe]

It might be that you have to execute this again when the calendar has been detached an reattached, but not sure about this atM

[LiangZipeng-1998]

This method is available in version 6.0.3, but not in version 3.1.0. Is there a method that is compatible with 3.1.0?

[stefanuebe]

There might be, but I do not support that old version anymore. Is there any reason, that you use 3.1.0?

You can give it a try by yourself by trying to override the client side methods addEvents(array) and updateEvents(array) in a subclass and then call the queryselector / classname.add code afterwards. But not sure if that will work as intended. Or you could try to override the client side method render and call the respective code afterwards.

[LiangZipeng-1998]

Thanks!Version 6.0.3 is currently used.