无法绑定完整日历调度程序 - 来自数据库和实体框架的资源

Question

我可以在完整日历上绑定事件，但我想通过房间或类绑定数据，但我不能按照此URL：https：//fullcalendar.io/scheduler/ 我正在使用实体框架-ASP.NET -SQL Server因此，任何人都可以帮助我绑定Recourses

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            contentType: "application/json",
            data: "{}",
            url: "Default.aspx/GetEvents",
            dataType: "json",
            success: function (data) {
                $('div[id*=fullcal]').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        // right: 'timelineDay,agendaTwoDay,timelineThreeDays,month,agendaWeek,agendaDay,listWeek'//New1-agendaTwoDay
                        right: 'timelineDay,timelineThreeDays,agendaWeek,month,listWeek'
                    },
                    aspectRatio: 1.8,//New4
                    scrollTime: '00:00', //New5 undo default 6am scrollTime
                    // defaultView: 'agendaDay',//New2
                    defaultView: 'timelineDay',//New2
                    views: {//New3
                        timelineThreeDays: {
                            type: 'timeline',
                            duration: { days: 3 }
                        }
                    },
                    //views: {//New3
                    //    agendaTwoDay: {
                    //        type: 'agenda',
                    //        duration: { days: 2 },
                            // views that are more than a day will NOT do this behavior by default
                            // so, we need to explicitly enable it
                    //        groupByResource: true
                    //        //// uncomment this line to group by day FIRST with resources underneath
                    //        //groupByDateAndResource: true
                    //    }
                    //},
                    //// uncomment this line to hide the all-day slot
                    //allDaySlot: false,
                    schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',//New for Licence
                    eventLimit: true, // allow "more" link when too many events
                    editable: true,
                    //new Resourses
                    resourceLabelText: 'Rooms',
                    resources: [
                        { id: 'a', title: 'Auditorium A' },
                        { id: 'b', title: 'Auditorium B', eventColor: 'green' },
                        { id: 'c', title: 'Auditorium C', eventColor: 'orange' },
                    ],
                    //Resourses
                    events: $.map(data.d, function (item, i) {
                        var event = new Object();
                        event.id = item.EventID;
                        event.start = new Date(item.StartDate);
                        event.end = new Date(item.EndDate);
                        event.title = item.EventName;
                        event.url = item.Url;
                        event.ImageType = item.ImageType;
                        //new 
                        event.resourceId = item.resourceId;
                        return event;
                    }), eventRender: function (event, eventElement) {
                        if (event.ImageType) {
                            if (eventElement.find('span.fc-event-time').length) {
                                eventElement.find('span.fc-event-time').before($(GetImage(event.ImageType)));
                            } else {
                                eventElement.find('span.fc-event-title').before($(GetImage(event.ImageType)));
                            }
                        }
                    },
                    loading: function (bool) {
                        if (bool) $('#loading').show();
                        else $('#loading').hide();
                    }
                });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                debugger;
            }
        });
        $('#loading').hide();
        $('div[id*=fullcal]').show();
    });
    function GetImage(type) {
        if (type == 0) {
            return "<br/><img src = 'Styles/Images/attendance.png' style='width:24px;height:24px'/><br/>"
        }
        else if (type == 1) {
            return "<br/><img src = 'Styles/Images/not_available.png' style='width:24px;height:24px'/><br/>"
        }
        else
            return "<br/><img src = 'Styles/Images/not_available.png' style='width:24px;height:24px'/><br/>"
    }
</script>

Answer 1

在您的JavaScript中告诉FullCalendar在哪里获取资源和事件。

resources: "/YourController/GetResources/",
events: "/YourController/GetEvents/"

然后在您的控制器中返回数据，以下是返回资源的示例，听起来您已经返回事件。

    public JsonResult GetResources()
    {
        var resources = uof.repo.getResources();
        var list = Enumerable.Empty<object>()
         .Select(r => new { id = Convert.ToInt64(0), title = "title" })
         .ToList();
        list.Clear();
        foreach (var resource in resources)
        {
            list.Add(new { id = resource.Id, title = resource.FullName });
        }
        return Json(list.ToArray(), JsonRequestBehavior.AllowGet);
    }