答案 0 :(得分:4)
CSS可能适合你https://jsfiddle.net/2kov1y7v/
a.fc-event {
border-radius: 10px; /* round edges */
width: 15px; /* fixed width */
color: transparent; /* hide text */
}
/* inline the tr's for events */
div.fc-content-skeleton > table > tbody > tr {
display: inline-block;
}
答案 1 :(得分:2)
我的一个项目遇到了同样的问题,这是我的解决方案:
$('#calendar').fullCalendar({
....
lazyFetching: false,
eventSources: [
{
url : '08mn7li1nmriqc6sktvjq6gluk@group.calendar.google.com',
color: '#ea4647',
className: 'holidays-event holidays-french-event'
}, {
url: 'fr.french#holiday@group.v.calendar.google.com',
color: '#06b981',
className: 'holidays-event holidays-day-event'
}
],
eventAfterAllRender: function() {
var view = $('#calendar').fullCalendar('getView');
if (view.type == 'basicWeek' || view.type == 'basicDay') {
return false;
}
// reset calendar dots
$('#calendar').find('.fc-day-number').find('.fc-event').remove();
// manage dots
var events = $('#calendar').fullCalendar('clientEvents');
for (var i = 0; i < events.length; i++) {
var event = events[i];
if (event.source.url === '08mn7li1nmriqc6sktvjq6gluk@group.calendar.google.com') {
// build dots holidays for specific source
var name = event.title;
var now = event.start.clone();
// loop through event dates
while (now.isBefore(event.end)) {
var $dot = $('<span class="fc-day-grid-event fc-event fc-start fc-not-end dot-event" title=""></span>');
// add bootstrap popover for dot
$dot.popover({
'content': name,
'trigger': 'hover',
'container': '#calendar',
'placement': 'bottom'
});
// append to calendar day
$('.fc-day-number[data-date="'+ now.format('YYYY-MM-DD') +'"]').append($dot);
now.add(1, 'days');
}
}
}
}
});
用于点效果的CSS:
#calendar .dot-event {
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-block;
margin-left: 10px;
vertical-align: text-bottom;
}
答案 2 :(得分:0)
backgroundColor: 'red' // override!
events: [
{
title: 'Title ',
constraint: 'availableForMeeting',
start: new Date(),
end: new Date(),
allDay: true,
url: '/x/1/edit',
backgroundColor: 'red' // override!
},
]