如何为对象列表显示多个日历

本文关键字:日历 列表显示 对象 | 更新日期: 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);
}

您还需要重写客户端代码以遍历返回的数据。