I have been following this video tutorial: https://youtu.be/IpCEfbLiwag in hope to achieve a page which contains a FullCalendar containing the dates from my Task table from the database. While it is not necessary to go through the video in order to help out, I decided it's not a bad idea to also include the source.
I also have a few changes adapted to my code so here is my CalendarController.
public ActionResult Index()
{
return View();
}
public JsonResult GetEvents()
{
List<TaskModel> taskList = new List<TaskModel>();
string connectionString = Configuration["ConnectionStrings:DefaultConnection"];
using (SqlConnection connection = new SqlConnection(connectionString))
{
connection.Open();
string sql = "ReadAllTasks";
SqlCommand command = new SqlCommand(sql, connection);
command.CommandType = CommandType.StoredProcedure;
using (SqlDataReader dataReader = command.ExecuteReader())
{
while (dataReader.Read())
{
TaskModel task = new TaskModel();
task.Id = Convert.ToInt32(dataReader["Id"]);
task.Name = Convert.ToString(dataReader["Name"]);
.....................
task.Comments = Convert.ToString(dataReader["Comments"]);
task.StartDate = Convert.ToDateTime(dataReader["StartDate"]);
task.EndDate = Convert.ToDateTime(dataReader["EndDate"]);
.....................
if (task.DependencyId == 1)
{
task.DependencyId = Convert.ToInt32(dataReader["DependencyId"]);
}
task.PhaseId = Convert.ToInt32(dataReader["PhaseId"]);
taskList.Add(task);
}
}
connection.Close();
}
return new JsonResult(taskList);
}
Basically, using a Stored Procedure, I am getting all Tasks from the sql server, put them in a list and then return them in a Json Format like below:
(this is what I get when I call /Calendar/GetEvents)
[{"id":3,"name":"New Task","isGate":false,"condition":"","precondition":"","comments":"","startDate":"2012-12-12T11:11:00","endDate":"2014-12-12T11:11:00","inProgress":true,"finished":false,"aborted":false,"assignedTo":"1fa2f008-f7fe-43ba-9c5d-fd9e67e995d3","assignedToName":null,"dependencyId":0,"phaseId":1},{"id":1004,"name":"New Task","isGate":false,"condition":"","precondition":"","comments":"","startDate":"2012-12-12T11:11:00","endDate":"2014-12-12T11:11:00","inProgress":false,"finished":true,"aborted":false,"assignedTo":"1fa2f008-f7fe-43ba-9c5d-fd9e67e995d3","assignedToName":null,"dependencyId":0,"phaseId":1},{"id":1008,"name":"New Task","isGate":false,"condition":"","precondition":"","comments":"","startDate":"2012-12-12T11:11:00","endDate":"2014-12-12T11:11:00","inProgress":false,"finished":true,"aborted":false,"assignedTo":"5a4b508f-5e12-418f-9ce4-8e3061b833fe","assignedToName":null,"dependencyId":0,"phaseId":2012},{"id":3004,"name":"New Task","isGate":false,"condition":"","precondition":"","comments":"","startDate":"2012-12-12T11:11:00","endDate":"2014-12-12T11:11:00","inProgress":false,"finished":false,"aborted":false,"assignedTo":"711f2295-d8a4-49dd-88be-ea7143aa11d8","assignedToName":null,"dependencyId":0,"phaseId":1}]
Now, probably the most important part. Index.cshtml contains the following:
<!DOCTYPE html>
<html lang='en'>
<head>
<link href="https//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="https//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<br />
<div id="bootstrapModalFullCalendar">
</div>
</div>
</div>
</div>
<div id="fullCalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">x</span> <span class="sr-only">close</span></button>
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a class="btn btn-primary" id="eventUrl">Event Page</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('#bootstrapModalFullCalendar').fullCalendar({
header: {
left: '',
center: 'prev title next',
right: ''
},
eventClick: function (event, jsEvent, view) {
$('#modalTitle').html(event.Name);
$('#modalBody').html(event.Comments);
$('#eventUrl').attr('href', event.url);
$('#fullCalModal').modal();
return false;
},
events: '@Url.Action("GetEvents","Calendar")'
});
});
</script>
</body>
</html>
When I go to Calendar/Index, there is just a blank page. I receive no errors or warnings in my console. What is going wrong?
Your data seems wrong. When I use your HTML with my custom data (from a working example), it renders just fine
I think you need to take a look here: Event Source Object
You define options that are not in fullcalendar. You should consider formatting the text in the controller. One example of what the controller could return and should work:
[{
"id": 150,
"start": "2019-10-28",
"end": "2019-10-28",
"title": "Some preformatted text returned by the controller",
"allDay": true,
"url": null,
"color": null,
"textColor": null,
"backgroundColor": "green"
}]