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

[xxRockOnxx]

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

[espen]

Is the problem perhaps that Google does not allow linking from an iframe? "Load denied by X-Frame-Options: https://www.google.com does not permit cross-origin framing."

Or where exactly are you seeing this problem?

[xxRockOnxx]

Have you tried loading the JS Bin with output tab only? Does is it fit the page or not? It should at least be scrollable first to see the problem. You'll see that dates at the bottom does not highlight at all when clicked on.

I am using Chrome 56 (Linux). Now that you asked, I'll try on FF.
FF suffers from this problem also.

[espen]

Which date is not working?

[xxRockOnxx]

@espen to describe how and what:

At first dates at the bottom can't be clicked. Notice date 24 and 25. At the end I can click them when scrolled up.

[espen]

Was this working with FC 3.2 or can you check if the same bug occurs on 3.2?

[xxRockOnxx]

tried all versions down to 2.x

[xxRockOnxx]

Bump. Any idea about this? I am pretty sure it conflicts with SUI.

EDIT:

Tried to use only the needed CSS files from SUI. I found out that their site.css is causing the issue.

After trying to hunt down what exactly causes, I finally figured out what and successfully reproduced it in the JSBIN!

It is because of this:

html,
body {
  height: 100%;
}

body: {
  overflow-x: hidden;
}

BIN: http://jsbin.com/mibocikice/edit?output

Scroll down at the bottom. Those dates are not clickable.

[xxRockOnxx]

Tried to investigate more. It seems that one of the dependencies of fullcalendar is jquery-ui. I am not sure if this is a jquery-ui bug but that overflow property is the one causing this.

A temporary HACK here is oveflow-x: visible !important

Kinda weird. But still would appreciate if someone helped

EDIT:

Saw someone experiencing this too! Seems like a jquery-ui problem. http://stackoverflow.com/questions/2330773/jquery-ui-selectable-plugin-make-scroll-bar-not-selectable-when-div-overflows#comment30959380_2331261

If possible please include body{ overflow-x: visible !Important; } in your css file. Others will end up doing this also, so why not include it in the core css of fullcalendar?

[arshaw]

putting CSS overflow on the body is bad news, especially if it has a constrained height, which is what the html,body{height:100%} does (sets it to the height of the viewport).

this issue is unrelated to fullcalendar, so closing.

[xxRockOnxx]

@arshaw just to clear, it's overflow-x which is horizontal and they could just another wrapper right after the body that has overflow-x: hidden; if needed.

[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.

[xxRockOnxx]

@feliperaul I agree this one is VERY HARD to debug and hoping this will be fixed or at least be documented to let the people know about this.

You can override the overflow-x tho and just have a wrapper next to the body with overflow-x: hidden.

@arshaw if a fix is not accepted, can you please at least note it somewhere? I'm not using it in my current project but I know the pain it cause.

[arshaw]

After looking at this again, I realized I might not have investigated the root cause enough. I assumed that because of the height/overflow set on the body, the calendar would be unable to accept mouse interactions on the areas that were leaking outside of the body. However, I'm seeing now that the user is able to interact (I placed a temporary mousedown handler in webinspector and it fires). Seems this is an issue with FullCalendar.

[ChaoticNeutralCode]

I know this have been confirmed and such, but I just wanted to add I ran into this. In my case the 'overflow-x: hidden' was attached to the body with the html/body at 100% height.

[iameddz]

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

[schweigert]

Thanks @iameddz

[Satys]

Thanks @iameddz

[j94305]

The overflow-x trick does not seem to help in my case.

My tests show that if I render a calendar on the browser page and the calendar is fully visible, every cell may be selected. However, if I reduce the height of the browser window so parts of the calendar will not be visible without scrolling there, these (initially off-page) cells won't be selectable.

Setting the height to $("body").width() / 2.5 won't work. Aspect ratio of 2.5 won't work. Only height = "auto" will work, but the table cells will be square, making the calendar huge.

I have not investigated this in depth, but my suspicion is that this is connected to the height of some wrapper set to 100% of the viewable screen instead of the size necessary for the ENTIRE calendar. I'm experiencing this with version 3.8.2, now trying 3.9.0.

[zOxta]

@j94305 In my case it was because of the body height which was set to 100% - overflow-x did not help.

Using 3.9.0.

[JanBliznicenko]

fc-scroller trick works in current Chrome and FF, but not in Edge

[DmitryLobachov]

any updates on this?

[fhferreira]

thanks @iameddz

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

it saves my day!

[jgadbois]

We're using a modal CSS library that adds html { overflow-y: scroll; }. This causes the problem described in this issue. Removing that CSS rule fixes the problem.

[arshaw]

fixed by e88a559d322164228e2bffc13bed5453335b375c (not yet released)

[jgadbois]

Will this be fixed for v4 non-jQuery version as well?

[arshaw]

yessir c86d834b8ead4815ce8011ab1d692c3b2c6b0308

i plan to do a minor release for both v3 and v4-beta tonight

[arshaw]

released in 3.10.0 (and will be released in a v4 beta really really soon)

[arshaw]

this has also been released in 4.0.0-alpha.4

[jgadbois]

Awesome, thanks!