FullCalendar: Event with tooltips/custom event attributes

by Robert Rozas Navarro

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.css">
<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/fullcalendar/2.4.0/fullcalendar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
<div style="border:solid 2px 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 eventos;
    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"
         }
      ]
   ]
};


    $('#calendar').fullCalendar({
        
        editable: true,
        weekMode: 'liquid',
    handleWindowResize: true,
    weekends: false,
         defaultView: 'agendaWeek'
       
    });

    // adding a every monday and wednesday events:
    $('#calendar').fullCalendar('addEventSource',    
        function(start, end, timezone, callback) {
            // When requested, dynamically generate virtual
            // events for every monday and wednesday.
         var events = [];
       
         for (loop = start._d.getTime();
                 loop <= end._d.getTime();
                 loop = loop + (24 * 60 * 60 * 1000)) {
        var test_date = new Date(loop);
        var classes = myDataset.classes;
        for(i = 0; i < classes.length; i++){
           
            var obj = classes[i];
            for(j=0; j < obj.length; j++){
                
                var days = obj[j].days;
                var daysArray = days.split('');
                
               ...