'How to change the cursor pointer on fullcalendar?

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!

javascriptcssfullcalendar


Solution 1:[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;
}

Solution 2:[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.

Solution 3:[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

Solution 4:[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
});

Solution 5:[5]

Solution for Vue3 with Composition API

// Code in template
<full-calendar :options="calendarOptions"></full-calendar>

// place
export default {
   setup(props) {
       const calendarOptions = {
             plugins: [
                listPlugin,
                dayGridPlugin,
                timeGridPlugin,
                interactionPlugin
            ],
            
            // this is where magic comes in
            editable: true,
       }
   }

   return {
      calendarOptions
   }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Sarbbottam
Solution 3 Maurice
Solution 4 user2812481
Solution 5 Andre W.

Related Questions