Как отобразить уникальный модал на eventClick в зависимости от того, происходит ли событие из Model.ListA или Model.ListB

Я использую fullCalendar в Asp.Net MVC для создания приложения синхронизации календаря, где два человека могут просматривать события друг друга в одном календаре. Это все работает отлично и модно, теперь я просто хочу, чтобы модал был уникальным в зависимости от того, происходят ли события из Model.ListA и Model.ListB. Чувствую, что я пробовал все под солнцем. Любые предложения будут с благодарностью! Примечание: в JS, очевидно, принадлежит "Мне" === '', это мой последний удар в темноте... не работает. Пара других сценариев по крайней мере имеет модальное открытие, но ссылки, которые я включаю в # модальные ссылки, не отображаются. Я использую этот же подход с моим основным календарем, и он работает, но теперь, когда я использую if else, они не будут показывать кнопки ссылок. Кроме того, я передаю 2 списка в использовании модели представления. Еще раз спасибо!

Вот фрагмент моего кода, который должен помочь понять, с чем я работаю...

<div class="col-md-11">
    <div id="fullCalModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 id="modalTitle" class="modal-title"></h4>
                </div>
                <h5 id="modalStart" class="modal-body"></h5>
                <h5 id="modalEnd" class="modal-body"></h5>
                <h5 id="modalDetails" class="modal-body"></h5>
                <h5 id="modalPrivate" class="modal-body"></h5>
                <div id="modal-links"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div id='calendar'></div>
</div>

`<script type="text/javascript">
$(document).ready(function () {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar').fullCalendar({
        allDay: false,
        timezone: 'local',
        selectable: true,
        selectHelper: true,
        editable: true,
        year: y,
        month: m,
        date: d,
        header: {
            left: 'title',
            right: 'prev,next,today,agendaDay,agendaWeek,month'
        },
        defaultView: 'month',
        editable: true,
        //googleCalendarApiKey: 'API-Key',
        droppable: true,
        slotDuration: '00:30:00',
        scrollTime: '06:00:00',
        slotEventOverLap: true,
        disableResizing: false,
        eventOrder: '-start',
        eventSources: [
        {
            events: @Html.Raw(Json.Encode(Model.ListA)),
            //"belongsTo": 'A',
            color: '#007575',
            textColor: 'white'
        },
        {
            events: @Html.Raw(Json.Encode(Model.ListB)),
            //"belongsTo": 'B',
            color: 'purple',
            textColor: 'white'
        }
        ],
        eventClick: function(event, jsEvent, view){
                $('#modalTitle').html(event.title);
                $('#modalStart').html("START: " + event.start._d.toLocaleDateString() + " " + event.start._d.toLocaleTimeString());
                $('#modalEnd').html("END: " + event.end._d.toLocaleDateString() + " " + event.end._d.toLocaleTimeString());
                $('#modalDetails').html("DETAILS: " + event.details);
                $('#modalPrivate').html("PRIVATE: " + event.isPrivate);
                if(belongsTo === 'A'){
                    $('#modal-links').html("<a class='btn btn-default2 btn-md' href='/Members/ChooseContacts/"+event.Id+"'>Send Invitation</a><a class='btn btn-default1 btn-md' href='/Events/GetDirections/"+event.Id+"'>Get Directions</a><a class='btn btn-default1 btn-md' href='/Events/GetWeather/"+event.Id+"'>Weather Forecast</a><a class='btn btn-default1 btn-md' href='/Events/Edit/"+event.Id+"'>Edit</a><a class='btn btn-default1 btn-md' href='/Events/Delete/"+event.Id+"'>Delete</a>");
                } else if (belongsTo === 'B') {
                    $('#modal-links').html("<a class='btn btn-default1 btn-md' href='/Members/AddToMyEvents/"+event.Id+"'>Add To My Events</a>");
                }
                $('#fullCalModal').modal();
            }
        });
});`

1 ответ

Я думаю, что для каждого элемента в Model.List должен быть определен принадлежность.

поэтому каждый элемент в Model.ListA будет иметь belongsTo : A и то же самое для ListB,

затем попробуйте сделать проверку, как это (event.belongsTo === 'A')хотя я не уверен на 100%, но постараюсь ничего не потерять

Другие вопросы по тегам