Question

我正在努力获得“点击”＃39;功能在FullCalendar上工作，但是当我按下任何空白的日子时，没有任何反应。我搜遍了所有的搜索结果，无法找到任何解决方案或弄清楚发生了什么。

这是我的代码：

   $(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

仅与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" />

Answer 2

我在公司项目中使用了fullcalendar，当下面的窗口视图中的表，dayClick不工作时，最后我找到了＆＃34; html {overflow-x：hidden}＆＃34;的CSS。结果，我删除了CSS，没关系。

Answer 3

经过进一步的时间并且得到Ram Singh的确认他的日历与我的代码一起工作正常后，我深入研究了我使用过的软件包并发现我没有使用bootstrap.js，因为这与我之前的冲突日历。因此，我在BUT中添加了这个更新到最新版本，希望它能解决任何依赖冲突。我还将我的所有其他软件包更新到了他们的最新版本，希望这也会有所帮助，现在它可以完美运行！：）

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

Answer 4

我已经下载了代码，只是在演示代码中添加了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控制台。

Answer 5

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

dayClick仅在我点击屏幕可见而不滚动时才有效。我将html css {overflow-y：scrolling}更改为{overflow-y：visible}并使用了

Answer 6

我认为如果有人使用全日历4.2.0，这将很有用。

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

Answer 7

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;
}

Answer 8

使用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>

FullCalendar日点击不工作（什么都不做）

8 个答案: