Question

我有一个日历，显示月视图和日视图的不同信息。我希望能够允许用户点击一天，然后让一天显示每个事件的细节。这就是我目前的情况。

$('#calendar').fullCalendar({
            // put your options and callbacks here
            height: 750,
            header: {
                left: 'prev,next today ',
                center: 'title',
                right: 'month'
            },
            dayClick: function(date, jsEvent, view) {

            },
            displayEventTime: false,
            events: function(start, end, timezone, callback) {
                $.ajax({
                    type: 'POST',
                    url: 'WebServices/CalendarAtAGlanceWebService.asmx/GetCalendarSessions',
                    data: JSON.stringify({ date: $('#calendar').fullCalendar('getDate') }),
                    async: true,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (doc) {
                        var events = [];
                        $(doc.d).each(function () {
                            events.push({
                                title: $(this).attr('EventName'),
                                start: $(this).attr('StartDate'), // will be parsed
                                description: $(this).attr("EventDescription")
                            });
                        });
                        callback(events);
                    }
                });
            },
            eventRender: function (event, element) {
                element.find('.fc-title').append("<br/>" + event.description);
            }
        });

Full Calendar这就是月视图中的图像。

Answer 1

使您的dayClick功能如下：

dayClick: function(date, jsEvent, view)
{
    $('#calendar').fullCalendar('gotoDate', date);
    $('#calendar').fullCalendar('changeView', agendaDay);
}

当用户点击月中视图时，这会将视图更改为所点击日期的日视图。然后你只需要更改你的eventRender 逻辑只在日视图中显示描述：

eventRender: function (event, element) 
{
    if($('#calendar').fullCalendar('getView').name == "agendaDay")
    {
        element.find('.fc-title').append("<br/>" + event.description);
    }
}

这将使描述仅针对日视图中的事件显示。这意味着您只会在月视图中看到标题，点击一天将显示当天活动的详细信息。

FullCalendar在dayClick上显示不同的信息

1 个答案: