Full Calendar backgroundColor and borderColor
The evernt border and background color are not equal.
HTML
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id='calendar'></div>
CSS
#calendar {
width: 100%;
}
JavaScript
/*--------------------------------*/
/* CALENDAR */
/*--------------------------------*/
$(document).ready(function() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
var today = yyyy + '-' + mm + '-' + dd;
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var genColor =getRandomColor();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: today,
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Philippine Seven Corporation',
start: '2017-05-01',
backgroundColor : getRandomColor()
},
{
/* title: 'Long Event',
start: '2017-05-07',
end: '2017-05-10', */
// backgroundColor : genColor,
// borderColor : genColor
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-09T16:00:00',
backgroundColor : genColor,
borderColor : genColor
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-16T16:00:00',
backgroundColor : genColor,
borderColor : genColor
},
{
title: 'Conference',
start: '2017-05-11',
end:...