某些事件应仅在全日历日视图中显示

Question

我已经渲染了fullcalendar 事件月周和日视图。但我希望某些事件仅在月视图中，而其他一些事件仅在周视图中，而在日视图中休息。有没有办法实现这一点。希望你能理解。

     function BookingCalendar() {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var calendar = $('#bookingCalendar').fullCalendar({
        theme: false,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        selectable: true,
        selectHelper: true,
        slotEventOverlap: false,
        events: {
            url: 'Booking',
            type: 'POST',
            data: {
                //companyId: $('#CompanyID').val(),                
                companyId: 0,
            }
        },
        eventRender: function(event, element) {
            var toolTipContent = '';
            var count = 0;

            if (event.itemcode != '') {
                var strItemCode = event.itemcode.split(";");
                for (var i = 0; i < strItemCode.length; i++) {
                    count++;
                    toolTipContent = toolTipContent + strItemCode[i] + '<br />';
                    if (count > 3) {
                        toolTipContent = toolTipContent + '...' + '<br />';
                        break;
                    }
                }
            }
            else
            {
                if (event.id != '') {
                    toolTipContent = toolTipContent + event.id + '<br/>';
                }

                if (event.CustomerName != '') {
                    toolTipContent = toolTipContent + event.CustomerName + '<br/>';
                }

                if (event.ShipAddress != '') {
                    toolTipContent = toolTipContent + event.ShipAddress + '<br/>';
                }

                if (event.ShipCity != '') {
                    toolTipContent = toolTipContent + event.ShipCity + ',';
                }

                if (event.ShipState != '') {
                    toolTipContent = toolTipContent + event.ShipState + ' - ';
                }

                if (event.ShipPostalCode != '') {
                    toolTipContent = toolTipContent + event.ShipPostalCode + '<br/>';
                }

                if (event.Country != '') {
                    toolTipContent = toolTipContent + event.Country + '<br/>';
                }

                if (event.Email != '') {
                    toolTipContent = toolTipContent + 'E: ' + event.Email + '<br/>';
                }

                if (event.Phone != '') {
                    toolTipContent = toolTipContent + 'P: ' + event.Phone;
                }
                if (event.Phone != '') {
                    toolTipContent = toolTipContent + 'P: ' + event.Phone;
                }


          }
                element.qtip({
                    content: toolTipContent,
                    position: { corner: { tooltip: 'bottomLeft', target: 'topRight' } },
                    style: {
                        border: {
                            width: 1,
                            radius: 3,
                            color: '#2779AA'
                        },
                        padding: 10,
                        textAlign: 'left',
                        tip: true, // Give it a speech bubble tip with automatic corner detection
                        name: 'cream' // Style it according to the preset 'cream' style
                    }
                });
    } 

    });

}

Answer 1

当然可以！

您可以在eventRender 回调中实现这一点。

eventRender: function(event, element, view) {
    var toolTipContent = 'This item is viewable in '+view.type;
    var count = 0;

    console.log(view.type);
    console.log(event.viewableIn);
    console.log(element);

    if( $.inArray( view.type,event.viewableIn ) == -1 ){


        element.length = 0;         // This is the trick to "remove" the element.
    }

    console.log(element);           // To check the element again...
    console.log();                  // Just an empty line in console.log().
}

这会将view.type 与我添加的事件"non-standards field" 的数组值进行比较。

viewableIn: ["month","agendaWeek","agendaDay"]

查看我的Fiddle 并仔细查看每个视图（查看日期：2016-07-20）。