全日历日单击不起作用(不执行任何操作)

我试图让"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);
            }
        });
    });

仅与 FullCalender v2 相关：

我发现在我的日历上，带有类fc-bg的div被隐藏了 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" />

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

我认为如果

有人使用完整日历 4.2.0，这将很有用。

确保交互插件正在加载。
而不是天单击使用日期单击。他们更改了事件名称。

在花了更多的时间并得到Ram Singh的确认，他的日历与我的代码一起工作之后，我深入研究了我使用的软件包，并注意到我没有使用bootstrap.js因为这之前与我的日历冲突。因此，我将其重新添加到 BUT 中，但将其更新到最新版本，希望它能解决任何依赖冲突。我还将所有其他软件包更新到最新版本，希望这也有所帮助，现在它运行良好！:)

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

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

我已经

下载了代码，刚刚在演示代码中添加了您的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 控制台。

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

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

我对完整日历 v4.0.0 测试版也有类似的问题......我创建了一个补丁，直到它修复：

$('.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;
}

相关内容

最新更新

热门标签：