Change event width in FullCalendar

Question

I know this question is asked here , but I am stuck with this problem and have already wasted a day, so I thought a new question might help with a quick Answer. I use the full calendar in a web application and I would like to change the width of events conditionally. For some, I want the width to be halved and for some to be quartered. This is the solution there.

$('#calendar').fullCalendar({ eventAfterRender: function(event, element, view) { $(element).css('width','50px'); } }); 

Now, how can I use this to reduce half with already installed? If I check the element, I see that the absolute width is set, but I think that it will change depending on the screen size and calendar size, so that I can somehow do something like width : width/2 so that it doesn't broke when resized. if this is a very simple question, please bear with me as I am very new to web development.

Answer 1

Assign class names to the events you want to change.

Then, in the eventAfterRender method eventAfterRender you can do something like this:

 eventAfterRender: function(event, element, view) { var width = $(element).width(); // Check which class the event has so you know whether it half or quarter width if($(element).hasClass("HalfClass")) width = width / 2; if($(element).hasClass("QuarterClass")) width = width / 4; // Set the new width $(element).css('width', width + 'px'); },