javascript 如何更改全日历上的光标指针?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/25154084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 04:03:43  来源:igfitidea点击:

How to change the cursor pointer on fullcalendar?

javascriptcssfullcalendar

提问by KelvinLegolas

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!

我正在为我的项目使用 fullCalendar 插件。我注意到当我将“editable:”设置为 false 时,光标悬停在事件上成为默认值,而不是作为指针光标停留。我该如何改变?谢谢!

回答by Cerbrus

This should do the trick:

这应该可以解决问题:

.myCalendar {
    cursor: pointer;
}

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

.myCalendar当然,使用正确的 css 选择器而不是。
查看示例日历,您可能正在寻找.fc-event, 以在将鼠标悬停在日历事件上时保留指针:

.fc-event{
    cursor: pointer;
}

回答by sarbbottam

Add the following CSS.

添加以下 CSS。

.fc-content {
    cursor: pointer;
}

div.fc-contentwraps the calendar cells, so adding cursor: pointer;to .fc-contentwill produce the desired behavior.

div.fc-content包装日历单元格,因此添加cursor: pointer;.fc-content将产生所需的行为。

But is that really desired?

但这真的是我们想要的吗?

In general convention cursor:pointeris used for any clickable element.

一般约定cursor:pointer用于任何可点击元素

回答by user2812481

I noticed that if you just set editable to truethen 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.

我注意到如果你只是将 editable 设置为true那么它会在悬停时显示手指指针。如果您打算让用户单击事件,我不确定为什么您甚至希望将其设置为 false。

So simply set the editable value to trueduring initialization:

因此,只需true在初始化期间将可编辑值设置为:

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