I'm using fullCalendar in Asp.Net MVC to create a calendar syncing application, where two people can view each-other's events on the same calendar. That all works fine and dandy, now I just want to the modal to be unique depending on if events come from Model.ListA and Model.ListB. Feel like I've tried everything under the sun. Any and all suggestions would be greatly appreciated! Note: belongsTo === '' in the JS is obviously my last stab in the dark....not working though. Couple other scenarios have the modal at least opening, but the links I include in the #modal-links not showing. I use this same approach with my main calendar and it works, but now that Im using if elseif they won't show the link buttons. Also, I pass the 2 lists in using a view model. Thanks again!
Here's a snippet from my code that should help understand what I'm working with...
<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();
}
});
});`
