FullCalendar日点击不工作(什么都不做)

Question

我试图让'dayClick'功能在FullCalendar上运行,但是当我按下任何空白的日子时,没有任何反应.我搜遍了所有的SO,找不到任何解决方案或弄清楚发生了什么.

这是我的代码:

   $(document).ready(function () {
        $('#calendar').fullCalendar({
            header: {
                left: 'title',
                center: '',
                right: 'prev,next today'
            },
            defaultView: 'month',
            weekends: false,
            editable: false,
            selectable: true,
            events: "/Home/GetEvents/",

            eventClick: function (calEvent, jsEvent, view) {
                alert('You clicked on event id: ' + calEvent.id
                    + "\nSpecial ID: " + calEvent.someKey
                    + "\nAnd the title is: " + calEvent.title);

            },

            dayClick: function (date, jsEvent, view) {
                alert("Day Clicked");
                $('#eventDate').val($.fullCalendar.formatDate(date, 'dd/MM/yyyy'));
                ShowEventPopup(date);
            }
        });
    });

Answer 1

我发现在我的日历上div,fc-bg通过使用隐藏了类display:none;.事实证明,这是dayClick事件附加的内容,因为它被隐藏了,我无法点击它.

这个fc-bg类被隐藏的原因是因为我在页面上包含了一个打印CSS.事实证明,这个样式表media="print"在链接上非常重要,否则将始终使用它.

在页面上包含FullCalendar CSS文件时,请确保链接如下所示:

<link href="/css/vendor/fullcalendar.min.css" rel="stylesheet" />
<link href="/css/vendor/fullcalendar.print.css" media="print" rel="stylesheet" />

Answer 2

我在公司项目中使用了fullcalendar,当窗口在下面的窗口查看时,dayClick无法正常工作,最后我找到了"html {overflow-x:hidden}"结果的css,我删除了css,没关系.

Answer 3

我认为如果有人使用 fullcalendar 4.2.0，这将会很有用。

1. 确保交互插件正在加载。
2. 使用 dateClick 代替 dayClick。他们更改了活动名称。

Answer 4

在花费了更多时间并从 Ram Singh 那里确认他的日历与我的代码配合良好之后，我深入研究了我使用的软件包，并注意到我没有使用 bootstrap.js，因为这与我的日历发生了冲突。因此，我将其添加回但将其更新到最新版本，希望它能够解决任何依赖项冲突。我还将所有其他软件包更新到最新版本，希望这也会有所帮助，现在它可以完美运行！:)

希望这些信息可以帮助其他人！