In previous versions of Full Calendar, I would use eventRender to manipulate the event element and add data attributes.

Now that we are tasked with upgrading to v5, it looks like eventRender was deprecated and I cannot find a way to do the same thing.

In the docs here... I am able to use eventDidMount to access the element (el) - however any call to attr or data result in a "attr is not defined" error.

 eventDidMount: function(data) {
        data.el.data('res', 123);
    },

data.el.data is not a function

So knowing data is jQuery, I try this...

eventDidMount: function(data) {
        $(data.el).data('res', 123);
    },

No errors anymore, but also no data attribute added.

So I also tried using "append" to insert an element with an attribute on it, but that adds it as plain text.

eventDidMount: function(data) {
    data.el.append('<span data-id="123"></span>');
},

Driving myself mad here trying to do something relatively simple, has anyone else run into this?

In previous versions of Full Calendar, I would use eventRender to manipulate the event element and add data attributes.

Now that we are tasked with upgrading to v5, it looks like eventRender was deprecated and I cannot find a way to do the same thing.

In the docs here... https://fullcalendar.io/docs/event-render-hooks I am able to use eventDidMount to access the element (el) - however any call to attr or data result in a "attr is not defined" error.

 eventDidMount: function(data) {
        data.el.data('res', 123);
    },

data.el.data is not a function

So knowing data is jQuery, I try this...

eventDidMount: function(data) {
        $(data.el).data('res', 123);
    },

No errors anymore, but also no data attribute added.

So I also tried using "append" to insert an element with an attribute on it, but that adds it as plain text.

eventDidMount: function(data) {
    data.el.append('<span data-id="123"></span>');
},

Driving myself mad here trying to do something relatively simple, has anyone else run into this?

• javascript
• fullcalendar

Share Improve this question Follow asked Oct 28, 2020 at 10:51 CollinsCollins 1,1591414 silver badges3535 bronze badges 2

• 2 “So knowing data is jQuery, I try […] No errors anymore, but also no data attribute added.” - that’s not what .data() does, see docs: “Using the data() method to update data does not affect attributes in the DOM. To set a data-* attribute value, use attr.” – C3roe Commented Oct 28, 2020 at 10:59
• Thank you, I think you are correct - so it was working, I just wasn't seeing it! – Collins Commented Oct 28, 2020 at 11:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Its always the way. I tear my hair out for 30 mins, post a question, then find an answer.

eventDidMount: function(data) {
        data.el.setAttribute("data-id", 123);
    },