Как отобразить уникальный модал на 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%, но постараюсь ничего не потерять