Is there a delicate way to pass calendar events variables in Javascript

Get Help JavaScript
#1

As you can see from the example below, I have a @model which contains data.

In order to use particular parts of the data, I have assigned it to a Json object by using Json.Serialize .The reason I have done so, is that the events:[ ] section accepts data in some specific format, looking like a json kind of format.

As you can see in the events:[ ] section, I have tried to extract data in such a way so that the events:[ ] part of the program accepts it. (and everything works fine like that)

Problem is that, the number of records in json can vary as it pulls data from a database table.

My desired outcome is: A better formulation to introduce neccessary data in the events:[ ] section.

There might be a way of using the json properly, but I could not find it yet. I would be happy to hear from you if you have any idea about it.


@model IEnumerable<WebAppV2.Models.CalendarEvent>


<script>

    document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');


        var json = @Html.Raw(Json.Serialize(@Model));


        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialDate: '2021-01-01',
            editable: false,
            selectable: false,
            businessHours: true,
            dayMaxEvents: true,
            events: [


                {
                    title: json[0].title,
                    start: json[0].start,
                    end: json[0].end
                },

                {
                    title: json[1].title,
                    start: json[1].start,
                    end: json[1].end
                },

                {
                    title: json[2].title,
                    start: json[2].start,
                    end: json[2].end
                },


            ]
        });

        calendar.render();
    });

</script>
#2

Worked with this solution.

var events = @html.Raw(Json.Serialize(@Model.Select(e => new
{
e.title,
e.start,
e.end
})));

and later
var calendar = new FullCalendar.Calendar(calendarEl, {
initialDate: ‘2021-01-01’,
editable: false,
selectable: false,
businessHours: true,
dayMaxEvents: true,
events: events
});

calendar.render();