0

我正在尝试创建一个 eCalendar 以仅在单击它时显示当天的事件。有可能这样做吗？如果有任何帮助，我将不胜感激。

这是我的代码：

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

4

1 回答 1

0

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

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

    //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/

于 2019-08-23T03:28:10.257 回答