fullcalendar day toggle
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.2/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.2/fullcalendar.min.css">
<br><h1>Click on days to toggle on and off</h1><br>
<div style="border:solid 1px red;">
<div id='calendar'></div>
</div>
JavaScript
$(document).ready(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var events_array = [{
title: 'Test1',
start: new Date(2018, 10, 20),
tip: 'Personal tip 1'
}, {
title: 'Test2',
start: new Date(2018, 10, 21),
tip: 'Personal tip 2'
}];
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'today'
},
selectable: true,
events: events_array,
eventRender: function (event, element) {
element.attr('title', event.tip);
},
dayClick: function (date, jsEvent, view) {
// alert('Clicked on: ' + date.format());
if ($(this).css('background-color') == 'rgb(102, 96, 55)') {
//alert('on');
$(this).css('background-color', 'rgb(255, 255, 255)');
} else {
//alert('off');
$(this).css('background-color', 'rgb(102, 96, 55)');
}
}
});
});