jQuery.eCalendar() - 仅在单击日期时显示事件

Question

我正在尝试创建一个电子日历，以便在单击它时仅显示当天的事件。可以这样做吗？我将不胜感激任何帮助。

这是我的代码：

$(document).ready(function() {
$('#calendar').eCalendar({
weekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
textArrows: {
previous: '<',
next: '>'
},
eventTitle: 'Events',
url: '',
events: [{
title: 'Event 1',
description: 'Description 1',
datetime: new Date(2019, 8, 15, 17)
}, {
title: 'Event 2',
description: 'Description 2',
datetime: new Date(2019, 9, 14, 16)
}, {
title: 'Event 3',
description: 'jQueryScript.Net',
datetime: new Date(2019, 9, 10, 16)
}]
});
});

下面是代码的示例：

https://www.jqueryscript.net/time-clock/Create-A-Simple-Event-Calendar-with-jQuery-e-calendar.html

Answer 1

您必须通过添加单击事件来修改库。

这是我添加到库中的内容。 首先，我创建了一个点击事件：

//Add click event for each day with events on calender
var mouseClickEvent = function () {
$(".c-event-item").hide();
var d = $(this).attr('data-event-day');
$('div.c-event[data-event-day="' + d + '"]').show();
$('div.c-event-item[data-event-day="' + d + '"]').show();
};

在 print(( 上，注册每天的 mouseClickEvent。

if (d.getDate() == day && (d.getMonth() - 1) == dMonth && d.getFullYear() == dYear) {
cDay.addClass('c-event').attr('data-event-day', d.getDate());
cDay.on('mouseover', mouseOverEvent).on('mouseleave', mouseLeaveEvent);
//register the click events
cDay.on('mousedown', mouseClickEvent)
}

另外，不要忘记默认情况下需要通过在 print(( 上添加此代码来隐藏事件列表

//hide the eventlist by default
item.attr('style', 'display:none');

你可以在这里查看我的修改： https://jsfiddle.net/cuaowret/