some event should show only in day view fullcalendar

Question

I have rendered fullcalendar event months week and day view. but I want some events only into month view and some other events only into week view and rest for day view. Is there any way to fulfill this. Hope you understand.

     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

Sure this is possible!

You can achieve this in the eventRender callback.

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().
}

This compares the view.type with the array values of the event's "non-standards field" I added.

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

Look at my Fiddle and closely check each views (check day: 2016-07-20).