twitter-bootstrapfullcalendarresourcesdropdownhtml-injections

Fullcalendar: Dropdown HTML within Resource hidden by Calendar

I'm trying to add specific actions within a dropdown to the given fullcalendar resources. So far Fullcalendar is a very great tool, but somehow the calendar overlaps the HTML content that I'm injecting.

Is there a better way to inject Dropdowns and other HTML elements, without being overlapped by the calendar?

It would be great if the dropdown would be completely visible. Am I missing something?

enter image description here

resourceGroupLabelDidMount: function(e) {
  var $this = $(e.el);
  $this.find('.fc-datagrid-cell-cushion').html($('.element').html())
}

Here is a code example: https://codepen.io/sirsir1/pen/BaYXqVj

Solution

  • Found a solution to my own question, it seems to work fine by adding position-fixed class to the ul element:

    <ul class="position-fixed">
  ...
</ul>

    Here is a working code example: https://codepen.io/sirsir1/pen/zYWdPRN