如何为对象列表显示多个日历
本文关键字:日历 列表显示 对象 | 更新日期: 2023-09-27 18:04:17
你好,我有mvc项目的问题。我需要为工人制作多个日历(每个工人一个日历与工人日期)。这是我的代码。
public JsonResult Index()
{
var employees = this.employeeManager.EmployeeList();
var eventList = new List();
foreach (var employee in employees)
{
var eventList = from e in employee.Mounts
select new
{
id = e.Id,
firstName = e.Name,
dateFrom = e.DateFrom,
dateTo = e.DateTo,
};
}
return Json(eventList, JsonRequestBehavior.AllowGet);
}
我需要在每个员工自己的日历中显示mount列表。这是我的javascript代码:
function GetEvents() {
$.ajax({
dataType: "json",
contentType: "application/json",
data: "{}",
url: "/Employee/Index",
dataType: "json",
success: function (data) {
$('#calendar').fullCalendar({
theme: false,
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
defaultView: 'basicWeek',
editable: true,
events: $.map(data, function (item, i) {
var event = new Object();
event.start = moment(item.DateFrom).utc();
event.end = moment(item.DateTo).utc();
event.title = item.name;
event.id = item.id;
return event;
}),
eventClick: function (calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
$(this).css('border-color', 'red');
},
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#cal_error").text(errorThrown); //Handle Error
}
});
}
我如何返回json对象与对象列表?
员工类:
public class EmployeeDto
{
public long Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string PhoneNumer { get; set; }
public string Email { get; set; }
public MountDto[] Mounts { get; set; }
public bool Active { get; set; }
}
山类:
public class MountDto
{
public long? Id { get; set; }
public string Name { get; set; }
public string Place { get; set; }
public string PhoneNumber { get; set; }
public DateTime DateTo { get; set; }
public DateTime DateFrom { get; set; }
}
我的回答补充了上面的答案。在客户端代码中遍历数据以创建多个日历控件。下面的代码没有经过测试,但是应该可以工作。
function GetEvents() {
$.ajax({
dataType: "json",
contentType: "application/json",
data: "{}",
url: "/Employee/Index",
dataType: "json",
success: function (data) {
data.forEach(function(item)
{
$('#calendar').fullCalendar({
theme: false,
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
defaultView: 'basicWeek',
editable: true,
events: $.map(item.eventsList, function (currEvent, i) {
var event = new Object();
event.start = moment(currEvent.DateFrom).utc();
event.end = moment(currEvent.DateTo).utc();
event.title = currEvent.name;
event.id = currEvent.id;
return event;
}),
eventClick: function (calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
$(this).css('border-color', 'red');
},
});
});
您可以尝试重写您的查询,以返回按员工id分组的数据列表:
public JsonResult Index()
{
var employees = this.employeeManager.EmployeeList();
var employeesList = employees.Select(e => new
{
id = e.Id,
firstName = e.Name,
eventsList = e.Months.Select(o => new {
id = o.Id,
firstName = o.Name,
dateFrom = o.DateFrom,
dateTo = o.DateTo
}).ToList()
}).ToList();
return Json(employeesList, JsonRequestBehavior.AllowGet);
}
您还需要重写客户端代码以遍历返回的数据。