I'm currently developing a full calendar to showcase a clear and aesthetically pleasing schedule for my client. I am attempting to assign a unique color to each event by generating random colors on every page load using codes. However, I have encountered an issue where the border color and background color are not matching. This discrepancy is due to the fact that I am also adding a random color to the border color. When I tried storing the getRandomColor function in a variable and applying that variable to both the border and background color of each event, it resulted in all events having the same color which does not meet my objective.
Is there a way to ensure that the background color matches the border color when randomized colors are involved?
JSFIDDLE: https://jsfiddle.net/aice09/w1pxfzcm/2/
$(document).ready(function() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January starts at 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: getRandomColor(),
borderColor: getRandomColor()
}, {
id: 999,
title: 'Repeating Event',
start: '2017-05-09T16:00:00',
backgroundColor: getRandomColor()
}, {
id: 999,
title: 'Repeating Event',
start: '2017-05-16T16:00:00',
backgroundColor: getRandomColor(),
borderColor: getRandomColor()
}, {
title: 'Conference',
start: '2017-05-11',
end: '2017-05-13',
backgroundColor: genColor,
borderColor: genColor
}, {
title: 'Meeting',
start: '2017-05-12T10:30:00',
end: '2017-05-12T12:30:00',
backgroundColor: genColor,
borderColor: genColor
}, {
title: 'Lunch',
start: '2017-05-12T12:00:00',
backgroundColor: genColor,
borderColor: genColor
}, {
title: 'Meeting',
start: '2017-05-12T14:30:00',
backgroundColor: getRandomColor(),
borderColor: getRandomColor()
}, {
title: 'Happy Hour',
start: '2017-05-12T17:30:00',
backgroundColor: getRandomColor(),
borderColor: getRandomColor()
}, {
title: 'Dinner',
start: '2017-05-12T20:00:00',
backgroundColor: getRandomColor(),
borderColor: getRandomColor()
}, {
title: 'Birthday Party',
start: '2017-05-13T07:00:00',
backgroundColor: getRandomColor(),
borderColor: getRandomColor()
}, {
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-05-28',
backgroundColor: getRandomColor(),
borderColor: getRandomColor()
}],
eventClick: function(event) {
if (event.title) {
alert(event.title);
}
}
});
});#calendar {
width: 100%;
}<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<!--Full Calendar-->
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css">
<!--Bootstrap 3.3.7-->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id='calendar'></div>