Clever Geek Handbook

Fullcalendar - dynamically change line height

I am trying to dymanically change the height of a fullcalendar row.

Performed.

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

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:

Row heights are updated as expected, but the position of inserted events and backgrounds does not change accordingly .

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

Has anyone had the same problem? Any suggestion?

+3


source to share


2 answers


Event positions respond to a browser resize event. You can manually resize your browser by calling:



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


source


try this just add !important

to css



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


source






More articles:


All Articles