Только первое событие отображается в FullCalendar.Я не могу понять, почему я не могу отобразить более одного события - PullRequest
Новая
       32

Только первое событие отображается в FullCalendar.Я не могу понять, почему я не могу отобразить более одного события

0 голосов
/ 03 декабря 2018

Я могу отображать только первое событие в FullCalendar.Данные поступают из базы данных в SQL Server с использованием модели в Entity Framework.Затем я вернул объект JSON в представление.Может кто-нибудь указать мне правильное направление, чтобы я мог отобразить все события из базы данных?

CalendarView 

      <!DOCTYPE html>

     @{
          Layout = null;

      }

    <html>
    <head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>




    <style type="text/css">

    body {
        margin: 0;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }

    #top {
        background: #eee;
        border-bottom: 1px solid #ddd;
        padding: 0 10px;
        line-height: 40px;
        font-size: 12px;
    }

    #calendar {
        max-width: 900px;
        margin: 40px auto;
        padding: 0 10px;
    }
    </style>


    <script type="text/javascript">



    /*Get data from the database and load it on the FullCalendar*/
    $(window).load(function () {

        jQuery(document).ready(function ($) {

            var events = [];
            $.ajax({
                type: "GET",
                url: "@Url.Action("GetEvents", "Calendar")",  //Get the data
                contentType: "application/json",
                success: function (data) {
                    $.each(data, function (i, v) {

                        events.push({
                            title: v.ProjectName,
                            start: moment(v.DateCreated),


                        });


                        GenerateCalendar(events);  
                    })


                },
                        error: function (error)
                        {
                            alert('Error');
                        }

            });


            function GenerateCalendar(events) {

                $('#calendar').fullCalendar({
                    height: 666,
                    nowIndicator: true,
                    defaultView: 'agendaWeek',
                    columnHeaderFormat: 'ddd D MMM',
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },

                    defaultView: 'month',                       
                    selectable: true,
                    editable: false,
                    events: events  //This allows the calendar to display only the first event.


                });

            }


        });

    });



 </script>

 </head>
 <body>


<div id="calendar"></div>


 </body>
 </html>

CalendarController 

   public JsonResult GetEvents()
   {


        using (FacilityRequestEntities db = new FacilityRequestEntities())
        {
            var events = db.Dashboards.ToList();
            return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }

   }

Таблица базы данных, SQL Server 

   FaspNumberId Projectname CurrentStatus DateCreated       RequestorName        
   001          AAA         Approved      2018-11-30 01:40:00     John 
   002          BBB         Pending       2018-12-01 01:16:00     Eric 
   003          CCC         Approved      2018-12-01 03:46:00     Marie  
   004          DDD         Disapproved   2018-12-02 05:52:00     Anne

1 Ответ

0 голосов
/ 06 декабря 2018

Мне удалось выяснить проблему, внеся несколько изменений в мой CalendarView.Пожалуйста, смотрите решение ниже: 

 <!DOCTYPE html>

 @{
     Layout = null;

 }


 <html>
 <head>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>



 <style type="text/css">

    body {
        margin: 0;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }

    #top {
        background: #eee;
        border-bottom: 1px solid #ddd;
        padding: 0 10px;
        line-height: 40px;
        font-size: 12px;
    }

    #calendar {
        max-width: 900px;
        margin: 40px auto;
        padding: 0 10px;
    }
 </style>


 <script type="text/javascript">

    $(window).load(function () {


        $(document).ready(function() {

             // Fetch our events
            $.ajax({
                url: "@Url.Action("GetEvents", "Calendar")",  //Get the data from the controller,
                method: "GET",
                datatype: "json",

            }).done(function (data) {
                // Parse our events into an object called events that will later be used to initialize FullCalendar
                var events = [];

                $.each(data, function (i, v) {

                    events.push({
                        title: v.ProjectName,
                        start: moment(v.DateCreated),
                    });
                });

                $('#calendar').fullCalendar({

                     height: 666,
                    nowIndicator: true,
                    defaultView: 'agendaWeek',
                    columnHeaderFormat: 'ddd D MMM',
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },

                    defaultView: 'month',
                    selectable: true,
                    editable: false,
                    events: events,  //Pass the new collection of events to the FullCalendar initialization function, targeting the #calendar div.
                });
            });


        });

    });



 </script>

 </head>
 <body>


 <div id="calendar"></div>


 </body>
 </html>
...