有些事件只能在日历fullcalendar中显示

我已经完成了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
                    }
                });
    } 

    });

}

当然这是可能的!

你可以在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与我添加的事件的“非标准字段”的数组值进行比较。

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

看看我的小提琴并仔细检查每个视图(检查日期:2016-07-20)。

链接地址: http://www.djcxy.com/p/81261.html

上一篇: some event should show only in day view fullcalendar

下一篇: Fullcalendar doesn't show correctly event in month mode