Отображение многодневных событий с календарем CLNDR

Question

Я работал над этим некоторое время и искал SO для возможного решения, но у меня все еще есть проблемы с выяснением того, как создать многодневное событие в одной непрерывной строке/баре. Многодневные события действительно отображаются, однако они отображаются каждый день в течение всего времени многодневного события, с уважением. Например, если у меня есть событие, которое происходит с 23.01.23 по 27.01.23, каждый из дней для этого события будет отображаться пять раз, а не один раз на протяжении всей продолжительности.

Календарь создается с помощью CLNDR, moment, underscore.js в ядре ASP.Net EF. Я все еще новичок в MVC и во всех компонентах, необходимых для создания этого календаря, но любая помощь будет очень признательна.

HTML

      <div id="calendar">
    <script id="calendar-template" type="text/template">
        <div class="clndr-grid">
            <div class="clndr-controls">
                <div class="clndr-today-button" style="border-right: 1px solid #6c757d;">Today</div>
                <div class="clndr-previous-button" style="border-right: 1px solid #6c757d;">&laquo;<span> Prev Month</span></div>
                <div class="clndr-next-button" style="border-right: 1px solid #6c757d;"><span>Next Month </span>&raquo;</div>
                <div class="CalendarHeader" style="margin-left:13%;"><strong><%= month %></strong>&nbsp;<%= year %></div>
            </div>

            <div class="days-of-the-week">
                <% _.each(daysOfTheWeek, function (day) { %>
                <div class="header-day"><%= day %></div>
                <% }) %>
            </div>
            <div class="days-container row" style="margin-right:0;margin-left:0; ">
                <% _.each(days, function (day) { %>
                <div class="<%= day.classes %><% _.each(day.events, function(event){ %><%= event.category %><% }); %>">
                    <span class="date"><%= day.day %></span>
                    <% _.each(day.events, function(event){ %>

                    <% if (event.TimeOffTypeId === 1) { %>

                    <span class="vacation" onclick="timeOffClick('<%= event.Id %>','<%= event.TimeOffTypeId %>','<%= event.UserId %>','<%= event.ApproverId %>','<%= event.ApprovalDate %>','<%= event.Start %>','<%= event.End %>','<%= event.NoteId %>','<%= event.Note %>')">
                        <%= event.Name %>
                    </span>

                    <% } if (event.TimeOffTypeId === 2) { %>

                    <span class="officeClosed" onclick="timeOffClick('<%= event.Id %>','<%= event.TimeOffTypeId %>','<%= event.UserId %>','<%= event.ApproverId %>','<%= event.ApprovalDate %>','<%= event.Start %>','<%= event.End %>','<%= event.NoteId %>','<%= event.Note %>')">
                        <%= event.Name %>
                    </span>

                    <% } if (event.TimeOffTypeId === 3) { %>

                    <span class="conference" onclick="timeOffClick('<%= event.Id %>','<%= event.TimeOffTypeId %>','<%= event.UserId %>','<%= event.ApproverId %>','<%= event.ApprovalDate %>','<%= event.Start %>','<%= event.End %>','<%= event.NoteId %>','<%= event.Note %>')">
                        <%= event.Name %>
                    </span>

                    <% } %>
                    <% }) %>
                </div>
                <% }); %>
            </div>
        </div>
    </script>
</div>

JS

      <script type="text/javascript">
    var calendar = {};

    $(function () {
        var data = @Html.Raw(Model.Data);

        calendar = $('#calendar').clndr({
            dateParameter: 'Start',
            daysOfTheWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday',],
            showAdjacentMonths: true,
            startWithMonth: moment('@Html.Raw(DateTime.Today.ToLocalTime().ToString(format: "d"))')
            forceSixRows: true,
            constraints: {
                startDate: '2011-01-01' @*There are no Projects before then*@
            },
            template: $('#calendar-template').html(),
            events: data,
            multiDayEvents: {
                startDate: 'Start',
                singleDay: 'Start',
                endDate: 'End'
            }@*,
            clickEvents: {
                click: function (target) {
                    // ...do something
                }
            }*@
        });
        console.log(calendar);
    });