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
}
});
}
});
}
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).
链接地址: http://www.djcxy.com/p/81262.html上一篇: 确定在全日历中选择事件时哪一天发生的事件