Show multiple dates in a single calendar

Pasted in from this community post: 
https://community.tadabase.io/t/using-a-calendar-component-to-show-a-couple-of-date-fields-and-labels/3027

TB.render('component_X', function(componentData) {
    function getAllFields(obj) {
      let fields = [];
      function extractFields(data) {
        for (const key in data) {
          if (key === 'fields') {
            fields.push(...data[key]);
          } else if (typeof data[key] === 'object' && data[key] !== null) {
            extractFields(data[key]);
          }
        }
      }
      extractFields(obj);
      return fields;
    }
    
    var calendarFields = getAllFields(JSON.parse(jQuery(componentData.ele).attr("options"))["detailView"]);
    var calendar = jQuery(componentData.ele).find(".af-full-calendar").fullCalendar();
    var titleFields = "DATE TITLE FIELD SLUG";
    var dateFields = ["DATE FIELD SLUG".....];
    var events = [];

    componentData.records.forEach(function(record, i) {
      dateFields.forEach(function(f, j) {
        if (record.hasOwnProperty(f) && record[f] != "") {
          colName = calendarFields.find(c => c.slug == f).name;
          var eventData = {
            id: i +"-"+ j,
            title: record[titleFields] + ' - ' + colName,
            start: record[f]
          };
          events.push(eventData);
        }
      });
    });

    // Remove existing events
    calendar.fullCalendar('removeEvents');

    // Add new events
    events.forEach(function(event) {
      calendar.fullCalendar('renderEvent', event);
    });
});