Как создать календарь событий в 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
}}

</script>

Когда я запускаю проект, появляется ошибка ajax. Я пытался проверить только календарь, чтобы увидеть, работает ли он, но он не появляется на странице.

Answer 1

A calender не является элементом html. Вам нужно добавить div к вашему виду с идентификатором:

<div id="calendar"><div>

И обновите свой JavaScript:

    function GenerateCalendar(events) {
            $('#calendar').fullCalendar('destroy'); //clear first
            $('#calendar').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 
            });
     }