Can't click on some dates. Fullcalendar not working because of overflow-x and height on html element

I am using the npm version of fullcalendar and I tried to recreate this in the JS Bin but I can’t reproduce it there. I copied the settings from JS Bin but it just doesn’t work on my build. (Read more on when it only works)

Here’s what I’m trying in my build: http://output.jsbin.com/boxuqenupi/

I expect that clicking on all of the date to do console.log() but on mine, it doesn’t log. Not only the select does not get fired but it doesn’t even highlight the date at all.

I thought at first there was some conflict on other packages so I reduced my code to very basic as possible but still used the options from JS Bin:

import $ from 'jquery'
import 'fullcalendar/dist/fullcalendar.min.css'
import 'fullcalendar/dist/fullcalendar.min.js'

$('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay,listWeek'
    },
    selectable: true,
    select: function () {
       console.log('clicked')
    },
    defaultDate: '2017-03-31',
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events: [
      {
        title: 'All Day Event',
        start: '2017-03-01'
      },
      {
        title: 'Long Event',
        start: '2017-03-07',
        end: '2017-03-10'
      },
      {
        id: 999,
        title: 'Repeating Event',
        start: '2017-03-09T16:00:00'
      },
      {
        id: 999,
        title: 'Repeating Event',
        start: '2017-03-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2017-03-30',
        end: '2017-04-01'
      },
      {
        title: 'Meeting',
        start: '2017-03-31T10:30:00',
        end: '2017-03-31T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2017-03-31T12:00:00'
      },
      {
        title: 'Meeting',
        start: '2017-03-31T14:30:00'
      },
      {
        title: 'Happy Hour',
        start: '2017-03-31T17:30:00'
      },
      {
        title: 'Dinner',
        start: '2017-03-31T20:00:00'
      },
      {
        title: 'Birthday Party',
        start: '2017-04-01T07:00:00'
      },
      {
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2017-03-28'
      }
    ]
  });

The very same options I used in the JS Bin i provided.

It works IF there’s only the calendar and that script on the page. There’s no other script on the page that can cause conflict aside from fullcalendar itself and jquery.

It also works if I opened Chrome Dev Tools and put it in the right side and scaled it up so that the calendar get squished and it’s height fit the screen. When the height fits the screen it now works.

But if it’s only the calendar and the script, it works too! And doesn’t even need the height to fit the screen.

My page has a very simple layout: Fixed topbar, Fixed sidebar, and the content.

EDIT Tried loading libs from CDN and initializing from the page directly. Still doesn’t work.

EDIT Tried playing with scrollbar. I can select some dates if I played with scrollbar and some others will be unselectable.

EDIT I deleted elements from Chrome Dev Tools one by one. I found out what causes the conflict. The semantic ui css. I don’t exactly know why tho

EDIT Here is a fiddle the reproduced the bug: http://jsbin.com/cukohicebo When it is on fullscreen some dates are not clickable

[iameddz]

found a solution: .fc-scroller { overflow-x: visible !Important; }

[feliperaul]

@arshaw I would highly recomend re-opening this bug. This was was a pain to debug and I can confirm it happens with overflow-x: hidden set on html.

After I had complaints, I couldn’t believe them because I use an external monitor with a lot of height. But after I tried it on my macbook with a smaller screen, only the bottom row of my calendar wasn’t clickable. Opening dev tools made it worse, because then only the first 2 rows of dates could be clicked.

I later found out that all this was happening due to viewport height. Since every time I had Chrome devtools open in a different height, every time a different row stopped working.

After banging my head for a while, I discovered this: https://stackoverflow.com/a/39342912/1290457

So, yes, this is a bug, it is hurting people, very hard to debug, and the only hack so far is to remove overflow-x: hidden from html element.

I’m on fullcalendar v3.4.0 and I don’t have jqueryUI in my project. Using $('body').on('click', function(e) { console.log(e.target) } ) I can see that the click events are firing, so fullcalendar should be reacting to them, but dayclick never fires and the day doesn’t even get highlighted.