How to change cursor on Fullcalendar columns - css

Question

TL;DR: I want a cursor pointer on green cells and cursor disabled on grey cells
I am building an application which use Fullcalendar and I face a problem I can’t solve:
I try to modify the cursor directly on cells (not events)
I tried to target the « .fc-future », « .fc-today » and « .fc-past » fullcalendar classes and apply a style like « cursor: pointer » or « cursor: not-allowed » without any success.
Here is a screenshot of what I have:
Does anyone know how can I change the cursor on columns ?
Thanks for your help !
My project:
Fullcalendar 2.8.0

Answer 1

Thanks for your quick reply !
I couldn't figure out how to set this up as you explained in your post.
So I found a workaround.
In Fullcalendar, I added a background event object:
{
start: moment().startOf('isoWeek'), # beginning of week
end: moment().utc().endOf('day'), # end of current day
rendering: 'background',
className: 'disabled-cell'
}
This "fake event" disable all day from beginning of week until the end of the current day.
For the cursor, I created a css class:
// Sass code
.disabled-cell
background-color: gray
opacity: 1
&:hover
cursor: not-allowed
.fc-view
td
cursor: pointer

Answer 2

<div class="fc-scroller-canvas"> contains two divs, one with the fc-content class and another with fc-bg class. You are setting background for the elements inside the fc-bg. Set the cursor CSS property for the same elements inside the fc-bg.
Then, in order to show the cursor through the fc-content, you need to set pointer-events: none; for the fc-content div. This will kind of make it transparent for the mouse pointer, so that you can mouseover or click the elements in the underlying div. That means you will be able to see the cursor you need.
Obviously this may disable some of the functionality that you may need, so you need to set back pointer-events: auto; on things that you need, such as on events themselves (if you do anything with eventClick, for example).