FullCalendar dayClick 不工作（什么都不做）答案

【问题标题】：FullCalendar dayClick not working (does nothing)FullCalendar dayClick 不工作（什么都不做）
【发布时间】：2016-03-14 13:24:31
【问题描述】：

我正在尝试让“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);
            }
        });
    });

【问题讨论】：

标签： javascript jquery asp.net-mvc fullcalendar

【解决方案1】：

仅与 FullCalender v2 相关：

我发现在我的日历上，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" />

【讨论】：

没有为我修复它。（全日历 3.0.0）
你是上帝派来的，这正是我的问题。
你成就了我的一天。谢谢你。
完美解决方案。

【解决方案2】：

我在公司项目中使用了fullcalendar，当下面窗口视图中的表格，dayClick不起作用，最后我找到了“html{overflow-x:hidden}”结果的css，我删除了css，没关系。

【讨论】：

显然是 height: 100% on html 导致它。这有点不好玩，因为我的底部页脚需要那个。
伙计，这很难调试。使用高度很高的外接显示器，该错误从未发生过。只有在移动中，屏幕较小时，错误才开始发生，而且是随机发生的，因为每次我在不同的高度打开 Chrome 开发工具（这使得某些行天可点击，而某些行被破坏）。您的解决方案有效，我必须从 html 中删除 overflow-x: hidden。谢谢...非常感谢！
将 HTML 声明为：<div id="calendar" style="overflow: auto;"></div> 为我工作
我正在使用 fullcalendar 4 beta，但此解决方案不适合我

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

在使用 v4.2.0 时遇到了同样的问题。原来交互插件没有加载。该事件现在也称为dateClick，而不是dayClick。

下面是一个工作示例。

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        height: 600,
        plugins: [ 'dayGrid', 'interaction' ],  // interaction plugin must be specified
        
        dateClick: function(info) {
            alert('Clicked on: ' + info.dateStr);
            alert('Current view: ' + info.view.type);

            // change the day's background color just for fun
            info.dayEl.style.backgroundColor = 'red';
        },
    });

    calendar.render();
  });

<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.2.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.2.0/main.js"></script>

<!-- interaction plugin must be included after core -->
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@4.2.0/main.js"></script>

<link href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.2.0/main.min.css" rel="stylesheet"/>

<div id="calendar"></div>

【讨论】：

如何在 dateclick 上逐月更改月视图？

【解决方案6】：

我已经下载了代码，并在演示代码中添加了您的 dayClick 代码，它工作正常。请看下面的代码：

<script>

    $(document).ready(function () {

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            defaultDate: '2016-01-12',
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: [
            {
                title: 'All Day Event',
                start: '2016-01-01'
            },
            {
                title: 'Long Event',
                start: '2016-01-07',
                end: '2016-01-10'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2016-01-09T16:00:00'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2016-01-16T16:00:00'
            },
            {
                title: 'Conference',
                start: '2016-01-11',
                end: '2016-01-13'
            },
            {
                title: 'Meeting',
                start: '2016-01-12T10:30:00',
                end: '2016-01-12T12:30:00'
            },
            {
                title: 'Lunch',
                start: '2016-01-12T12:00:00'
            },
            {
                title: 'Meeting',
                start: '2016-01-12T14:30:00'
            },
            {
                title: 'Happy Hour',
                start: '2016-01-12T17:30:00'
            },
            {
                title: 'Dinner',
                start: '2016-01-12T20:00:00'
            },
            {
                title: 'Birthday Party',
                start: '2016-01-13T07:00:00'
            },
            {
                title: 'Click for Google',
                url: 'http://google.com/',
                start: '2016-01-28'
            }
        ],

            dayClick: function (date, jsEvent, view) {
                alert("Day Clicked");
            },
            eventClick: function (event) {
                alert('event');
            }
        });

    });

 <div id='calendar'>

我认为您缺少声明任何内容，或者您遇到任何其他错误。请检查您的 Firebug 控制台。

【讨论】：

这就是我如此困惑的原因，我相信它应该可以工作。我正在 Chrome 中进行调试，据我所知，当我检查开发人员工具时没有任何错误。我认为其他人可能遇到了这个问题并修复了它。 eventClick 工作正常，只是 dayClick 什么都不做。你导入了哪些插件？
@JamesLloyd，我已经从fullcalendar.io/download 下载了代码，并将 dayclick 和 eventClick 事件添加到示例中。

【解决方案7】：

我的问题接近于： https://stackoverflow.com/a/39342912/6364246

dayClick 仅在我单击可见屏幕而不滚动时才起作用。我将 html css{overflow-y:scrolling} 更改为 {overflow-y:visible} 并工作

【讨论】：

【解决方案8】：

fullcalendar v4.0.0 beta 也有类似的问题... 我创建了一个补丁，直到它修复：

$('.fc-slats tr').on('click', function(e) {   
e.stopPropagation();
var time:any = $(this).attr('data-time');
var parentOffset:any = $(this).parent().offset(); 
var positionX = e.pageX - parentOffset.left;
var width:any = $(this).width();
var dayOfWeek = (positionX) * 7 / (width);
dayOfWeek = Math.floor(dayOfWeek) + 1;
dayOfWeek = dayOfWeek == 7 ? 0 : dayOfWeek;

var auxDays:any = (moment(context.state.currentDate).day() - dayOfWeek) * -1;

var date:any = moment(context.state.currentDate).add('days', auxDays);
var auxTime:any = time.split(':');
date.set({hour:auxTime[0] - 0,minute:auxTime[1]  - 0,second:0,millisecond:0})
date = date.toDate();
const elem = document.getElementById('modalFormSchedule');
const instance = Materialize.Modal.getInstance(elem as Element);
instance.open();
});


// Style
.fc-nonbusiness {
pointer-events: none !important;
}

【讨论】：