fullcalendar - dynamically change row height

Question

I am trying to dymanically change row height of fullcalendar.

---

Done so far.

I added a slider in order to select row height. With a little of jQuery I modify the css of the rows in order to make them wider or thinner.

The HTML code:

<div id="slider"></div>

and the associated javascript:

<script>
  $(function() {
    $( "#slider" ).slider({
      value:100,
      min: 20,
      max: 80,
      step: 20,
      value: 20,
      slide: function( event, ui ) {
        heightmod(ui.value);

      }
    });
    heightmod( $( "#slider" ).slider( "value" ) );

  });

  function heightmod(value)
  {
      $('.fc-time-grid .fc-slats td').css('height', value+'px');
  }

</script>

Result:

The height of the rows is updated properly, however the position of the inserted events and backgrounds does not change accordingly.

Funny thing is, if I open or close the browser debug toolbar (ctrl+shift+i in most browsers) the html coordinates of the events inserted in the calendar is magically updated to match correct position.

Has anyone had the same problem? Any suggestion?

Answer 1

The events positions react to the browser resize event. You can resize the browser manually by calling:

$(window).trigger('resize');

Answer 2

try this, Just add !important in css

function heightmod(value)
{
  $('.fc-time-grid .fc-slats td').css('height', value+'px !important');
}