How to change the cursor pointer on fullcalendar?

Question

I'm using fullCalendar plugin for my project. I noticed that when I set the "editable: " into false, the cursor hover on the events becomes default instead of staying as a pointer cursor. How do I change this? Thanks!

Answer 1

This should do the trick:

.myCalendar {
    cursor: pointer;
}

Using the proper css selector instead of .myCalendar, of course.
Looking at this example calendar, you're probably looking for .fc-event, to preserve the pointer when hovering over calendar events:

.fc-event{
    cursor: pointer;
}

Answer 2

Add the following CSS.

.fc-content {
    cursor: pointer;
}

div.fc-content wraps the calendar cells, so adding cursor: pointer; to .fc-content will produce the desired behavior.

But is that really desired?

In general convention cursor:pointer is used for any clickable element.

Answer 3

In my case simply adding

.fc-event{
    cursor: pointer;
}

to my scss class didn't work. It only works when i add ::ng-deep before it like so:

::ng-deep .fc-event{
    cursor: pointer;
}

I hope it helps anyone

Answer 4

I noticed that if you just set editable to true then it will display the finger pointer on hover. I'm not sure why you would even want it to set it to false if you intend to let the user click an event.

So simply set the editable value to true during initialization:

$('#calendar').fullCalendar({
  editable: true
});