ramitaherwahdan1978 says:
$.each(data, function (i, v) {
You need to make use id Data property in the success event handler.
And use the same property name as defined in model.
$.each(data.Data, function (i, v) {
Refer below sample.
Database
CREATE TABLE CalEvents
(
EventId int PRIMARY KEY IDENTITY,
Subject VARCHAR(50),
Description VARCHAR(50),
theStart DATETIME ,
theEnd DATETIME,
ThemeColor VARCHAR(50),
IsFullDay BIT
)
INSERT INTO CalEvents VALUES('taleen BD','taleen BD 2023','06/11/2023 12:00:00 AM','06/11/2023 12:00:00 AM','Green','False')
INSERT INTO CalEvents VALUES('ahmad BD','ahmad BD 2023','07/11/2023 12:00:00 AM','07/11/2023 12:00:00 AM','Red','True')
Model
public class CalEvents
{
[Key]
public int EventId { get; set; }
public string Subject { get; set; }
public string Description { get; set; }
public DateTime theStart { get; set; }
public DateTime theEnd { get; set; }
public string ThemeColor { get; set; }
public Boolean IsFullDay { get; set; }
}
DBContext
public class DBCtx : DbContext
{
public DBCtx(DbContextOptions<DBCtx> options) : base(options)
{
}
public DbSet<CalEvents> CalEvents { get; set; }
}
Controller
public class HomeController : Controller
{
private DBCtx Context { get; }
public HomeController(DBCtx _context)
{
this.Context = _context;
}
public IActionResult Index()
{
return View();
}
[HttpGet]
public JsonResult GetEvents()
{
var events = this.Context.CalEvents.ToList();
return new JsonResult(new { Data = events });
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body class="container">
<div id="calender"></div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span id="eventTitle"></span></h4>
</div>
<div class="modal-body">
<p id="pDetails"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "GET",
url: "/Home/GetEvents",
success: function (data) {
var events = [];
$.each(data.Data, function (i, v) {
events.push({
title: v.Subject,
description: v.Description,
start: moment(v.theStart),
end: v.theEnd != null ? moment(v.theEnd) : null,
color: v.ThemeColor,
allDay: v.IsFullDay
});
})
GenerateCalender(events);
},
error: function (error) {
alert(error.responseText);
}
})
function GenerateCalender(events) {
$('#calender').fullCalendar('destroy');
$('#calender').fullCalendar({
contentHeight: "auto",
defaultDate: new Date(),
timeFormat: 'h(:mm)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agenda'
},
eventLimit: true,
eventColor: '#378006',
events: events,
eventClick: function (calEvent, jsEvent, view) {
$('#myModal #eventTitle').text(calEvent.title);
var $description = $('<div/>');
$description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
if (calEvent.end != null) {
$description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
}
$description.append($('<p/>').html('<b>Description:</b>' + calEvent.description));
$('#myModal #pDetails').empty().html($description);
$('#myModal').modal();
}
})
}
})
</script>
</body>
</html>
Screenshot