如何获取日历渲染日期单元格的日期

时间:2014-10-09 12:42:29

标签: fullcalendar

我需要在每个事件网址中找到附加日期的情况(对于事件网址,我使用jquery添加href attr)查询字符串但是在检查文档之后我发现eventClickeventRender都没有返回显示事件的单元格的日期。


我尝试谷歌搜索它并使用eventClick回调找到棘手的解决方案并使用页面X和Y然后获取最近的元素,其中包含特定单元格日期的数据属性但是

eventClick:function(event,jsEvent,view){
var clickedDate = $.nearest({x: jsEvent.pageX, y: jsEvent.pageY}, '.fc-day').attr('data-date');
alert(clickedDate);
}


但是当我在同一个日期单元格中发生多个事件时,此解决方案将失败,并且弹出窗口中将显示更多事件。

注意:$.nearest是jquery插件,用于查找给定X,Y位置中最近的元素



注意:我使用的是v2

1 个答案:

答案 0 :(得分:0)

这对您来说效果如何吗?

http://jsfiddle.net/3E8nk/531/

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: '2014-06-12',
    editable: true,
    eventRender: function(event, element, view) {

        var start = event.start.clone().startOf('day');
        var end = event.end ? event.end.clone().endOf('day') : start.clone().endOf('day');

        //Known bug: We get all "touching" events and not just necessarily events on the day we clicked

        var events = $('#calendar').fullCalendar('clientEvents');

        var touchingEvents = events.filter(function(event) {
            var
                eventStartWithin = event.start.isWithin(start, end),
                eventEndWithin = event.end ? event.end.isWithin(start, end) : false;
            return eventStartWithin || eventEndWithin;
        });

        console.log(touchingEvents);

    },
    events: [
        {
            title: 'All Day Event',
            start: '2014-06-01'
        },
        {
            title: 'Long Event',
            start: '2014-06-07',
            end: '2014-06-10'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: '2014-06-09T16:00:00'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: '2014-06-16T16:00:00'
        },
        {
            title: 'Meeting',
            start: '2014-06-12T10:30:00',
            end: '2014-06-12T12:30:00'
        },
        {
            title: 'Lunch',
            start: '2014-06-12T12:00:00'
        },
        {
            title: 'Birthday Party',
            start: '2014-06-13T07:00:00'
        },
        {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2014-06-28'
        }
    ]
});