如何在 mvc 中创建事件日历

Question

我想在 asp.net MVC 中做事件/调度程序日历。到目前为止，我已经为 中的数据库表编写了这段代码

，但有些东西不起作用。

控制器代码：

        public ActionResult Index()

    {

        return View();

    }

       public JsonResult GetEvents()

    {

        var events = db.MedicationTrackers.ToList();

        return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

    }

和视图索引代码

@model IEnumerable<LICENTA.Database.MedicationTracker>

@{

    ViewBag.Title = "Index";

}

<h2>Index</h2>

@section Scripts {

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

<scripts src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></scripts>

<script>

    $(document).ready(function () {

        var events = [];

        $.ajax({

            type: "GET",

            url: "/MedicationTrackers/GetEvents",

            success: function (data) {

                $.each(data, function(i,v){ //i=index v=value

                    events.push({

                        title: v.IdMember,

                        description: v.IdMedication,

                        start: moment(v.Start),

                        end: v.Stop != null? moment(v.End):null,

                        status: v.Status

                    })

                })

                GenerateCalendar(events);

            },

            error: function (error) {

                alert("Error occured!!")

            }

                })

            })

        function GenerateCalendar(events) {

            $('calender').fullCalendar('destroy'); //clear first

            $('calender').fullCalendar({

                contentheight: 400,

                defaultdate: new date(),

                timeformat: 'h(:mn)a',

                header: {

                    left: 'prev,next today',

                    center: 'title',

                    right: 'month, basicweek, basicday, agenda'

                },

                eventlimit: true,

                eventcolor: '#378006',

                events: events

}}

当我运行项目时，出现 ajax 错误。我试图只测试日历以查看它是否有效，但它没有出现在页面上。

Answer 1

Acalender不是 html 元素。您需要div使用 id将 a 添加到您的视图中：<div id="calendar"><div>并更新您的 javascript：&nbsp; &nbsp; function GenerateCalendar(events) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#calendar').fullCalendar('destroy'); //clear first&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#calendar').fullCalendar({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; contentheight: 400,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; defaultdate: new date(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; timeformat: 'h(:mn)a',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; header: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 'prev,next today',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; center: 'title',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right: 'month, basicweek, basicday, agenda'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventlimit: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventcolor: '#378006',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; events: events&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp;}