Question

i know this question has been asked here but i am stuck with this problem and have already wasted a day so i thought making a new question might help with a quick response.. I am using full calendar in a web app, and i wanted to change the width of the events conditionally. For some i want the width halved and for some quartered. This is the solution proposed there

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

Now i how can i use this to halve the with that is already set? If i inspect an element i see that the absolut width is set but i think it is going to change depending on the screen size and calendar size, so can i somehow do something like width : width/2 so that it does not break on a resize. if its a very simple question, please bear with me as i am very new to web development.

Answer 1

Assign class names to the events that you want to resize.

Then in the eventAfterRender method 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's 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');
  },