Pradeep Asanka
Pradeep Asanka

Reputation: 411

some event should show only in day view fullcalendar

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
                    }
                });
    } 

    });

}

Upvotes: 1

Views: 2306

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

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

Upvotes: 4

Related Questions