FullCalendar: Event with tooltips/custom event attributes
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.js"></script>
<div style="border:solid 2px red;">
<div id='calendar'></div>
</div>
CSS
/* Remove that awful yellow color from today */
.fc-today {
opacity: 0;
border: none;
}
.fc-event.fc-bg {
z-index: 1;
background: inherit;
opacity: .25;
}
.fc-time-grid-event.fc-v-event.fc-event {
border-radius: 4px;
border: none;
padding: 5px;
}
.fc td, .fc th {
border-style: none;
border-width: 1px;
padding: 0;
vertical-align: top;
}
.fc-event .fc-bg {
z-index: 1;
background: inherit;
opacity: .25;
filter: alpha(opacity=25);
}
JavaScript
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var myDataset = {
"classes": [
[{
"name": "ECEC 301 Advanced Programming for Engineers Lecture",
"days": "MWF",
"times": "02:00 pm - 03:20 pm",
"crn": "11215"
}, {
"name": "ECEC 301 Advanced Programming for Engineers Lab",
"days": "W",
"times": "09:00 am - 10:50 am",
"crn": "11216"
}],
[{
"name": "ECEC 301 Advanced Programming for Engineers Lecture",
"days": "MWF",
"times": "02:00 pm - 03:20 pm",
"crn": "11215"
}, {
"name": "ECEC 301 Advanced Programming for Engineers Lab",
"days": "F",
"times": "02:00 pm - 03:50 pm",
"crn": "11217"
},
{
"name": "SOC 101 Introduction to Sociology Lecture",
"days": "TBD",
"times": "",
"crn": "11044",
"campus": "Online",
"enrollment": "CLOSED",
"short_name": "SOC 101 Lecture"
}
]
]
};
console.log(myDataset);
$('#calendar').fullCalendar({
editable: false,
weekMode: 'liquid',
handleWindowResize: true,
weekends: false,
defaultView: 'agendaWeek'
});
function GetDateString(myDate){
// GET CURRENT DATE
var date = new Date(myDate);
// GET YYYY, MM AND DD FROM THE DATE OBJECT
var yyyy = date.getFullYear().toString();
var mm = (date.getMonth()+1).toString();
var dd = date.getDate().toString();
// CONVERT mm AND dd INTO chars
var mmChars = mm.split('');
var ddChars = dd.split('');
// CONCAT THE STRINGS IN YYYY-MM-DD FORMAT
var...