DataSource not loading from controller in dot net MVC

[Oracularman]

I have the following dataset being returned from my Dot Net MVC controller

Json result:

[{"id":1,"title":"something","startDate":"2018-03-18T00:00:00","endDate":"2018-03-18T00:00:00","color":"red"}]

HTML & JavaScript:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

 <script type="text/javascript"> 
$(document).ready(function() {
            // show current year by default
             var currentYear = new Date().getFullYear();

            $('#calendar').calendar({
                     weekStart: 1,
                     minDate: new Date(currentYear-1, 0, 1),
                     maxDate: new Date(currentYear+1, 11, 31),
                     style: 'border',
                     yearChanged: function(e) {
                         e.preventRendering = true;
                         $.ajax({
                             url: "/Activity/GetCalendar",
                             dataType: "json",
                             success: function(response) {
                                 var data = [];
                                 for (var i = 0; i < response.length; i++) {
                                     data.push({
                                         id: response[i].id,
                                         title: response[i].title,
                                         startDate: new Date(response[i].startDate),
                                         endDate: new Date(response[i].endDate),
                                         color: response[i].color
                                     });
                                 }
                                 $(e.target).data('calendar').setDataSource(data);
                            }
                         });
                     }
                });
});
 </script>

The Calendar displays without the date being highlighted in red. Any idea why?

[Oracularman]

Thank you Paul, for a wonderful Calendar. Got it working in ASP.NET Core MVC:

Controller:

public JsonResult GetCalendaryr() {

        var OwnerId = this.User.FindFirstValue(ClaimTypes.NameIdentifier);

        var eventList = (from e in _context.Events.Where(d => d.IsDeleted == false).Where(o => o.UserID == UserId)
                        select new
                        {
                            startdate = string.Format("{0:yyyy-MM-dd}", e.Timestamp.Date),
                            enddate = string.Format("{0:yyyy-MM-dd}", e.Timestamp.Date),
                            color = "green"
                        }).Distinct();

        var rows = eventList.ToArray();
        return Json(rows);
    }

VIEW:

<span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 18px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"><div id="calendar"></div></span>

<script type="text/javascript"> 
$(document).ready(function() { 
    // show current year by default
    var currentYear = new Date().getFullYear();
     $.ajax({ 
            url: "/Event/GetCalendaryr",
            type: 'GET',
            contentType: 'application/json',
            dataType: 'json',
            success: function(response) { 
            var data = [];
                for (var i = 0; i < response.length; i++) {
                    data.push({
                        startDate: new Date(response[i].startdate),
                        endDate: new Date(response[i].enddate),
                        color : response[i].color
                    }); 
                }  
             $('#calendar').calendar({ 
                    enableRangeSelection: false,
                    minDate:new Date(currentYear,0,1),
                    maxDate:new Date(currentYear,11,31),
                    dataSource: data
                    });  
             },
           error: function (error) {
           alert(error);
          }
    });
});      
</script>