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

Question

您好，我的 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);
    }

我需要在每个员工自己的日历中显示坐骑列表。这是我的 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 对象中 return 对象列表？

员工class：

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; }

}

坐骑class：

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; }

}

Answer 1

您可以尝试将查询重写为 return 按员工 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);
}

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

Answer 2

我的回答补充了上面的回答。遍历客户端代码中的数据以创建多个日历控件。下面的代码未经测试，但应该可以工作。

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');

            },
        });  
     });

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

How to display multiple calendar for list of object

javascript

c#

asp.net-mvc

json

calendar