FullCalendar: Event with tooltips/custom event attributes

by Soundar Pandian

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 td, .fc th {
  border-style: none !important;
}
.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...