Używam pluginu fullCalendar http://fullcalendar.io/docs/ w mojej aplikacji ale natchnąłem się na problem z którym nie potrafię sobie poradzić. Mianowicie przed wczytaniem kalendarza na stronę wraz z eventami które tworzą mi się automatycznie, pobieram dane z bazy danych przez kontroler do którego prowadzi funkcja loadData. Wszystko działa pięknie tylko problem polega na tym, że jak pierwszy raz ładuję stronę na której jest kalendarz to funkcja eventRender zachowuje się tak jakby tablica myData była pusta. Tablica pusta nie jest - wg. debuggera w przeglądarce. Jeżeli zmienię tydzień w kalendarzu na następny dopiero wtedy załadują mi się eventy z tablicy myData, czyli można powiedzieć dopiero jak za drugim razem uruchomi się funkcja eventRender. Nie wiem czemu jak program przechodzi pierwszy raz przez funkcje eventRender to zachowuje się jakby tablica myData była pusta. Nawet jak włączę stronę z kalendarzem, czyli w tym momencie nie wczytały mi się te dane z tablicy do kalendarza(nie mam na nich stylu css) to jak nacisnę event który jest w tabeli to już program wykrywa że się tam znajduję i np. nie mogę na nim wykonać akcji. Próbowałem już dziesiątki rzeczy i nie wpadłem na nic co by pozwoliło mi to naprawić :(. Będę wdzięczny za pomoc!
P.S $('#calendar').fullCalendar('refetchEvents');- użycie tej funkcji mnie nie satysfakcjonuje bo długo się to wszystko będzie wczytywać!
@section scripts{
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/moment-timezone.js"></script>
<link href="~/Content/fullcalendar.css" rel="stylesheet" />
<script src="~/Scripts/fullcalendar.js"></script>
<script id="jsbin-javascript">
var clickedEvents = [];
var myData = [];
var myEvents = [];
//Pobieram dane z kontrolera w formacie string
var loadData = function () {
$.get("/BookVisit/TakeBookedEvents/", function (data, status) {
for (var i = 0; i <= data.length; i++) {
myData.push(data[i].loginUser);
}
});
};
//Automatycznie tworzę eventy do kalendarza
var timeCursor = moment();
var endtime = +moment().add(5, 'days');
while (+timeCursor < endtime) {
var start = +timeCursor;
timeCursor = timeCursor.add(15, 'minutes');
var end = +timeCursor;
myEvents.push({ start: start, end: end });
}
var eventRender = function (event, element) {
$(element).html(moment(event.start).format('h:mm'));
//podczas renderowania eventów sprawdzam czy któryś z nich znajduje się w tablicy myData jeżeli tak dodaję klasę css.
if (myData.indexOf(event.start.format()) >= 0)
{
$(element).addClass('already-clicked');
return element;
}
else {
return element;
}
};
$(document).ready(function () {
loadData();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
editable: false,
allDaySlot: false,
selectable: true,
events: myEvents,
eventColor: '#33CC33',
timezone: 'UTC',
eventRender: eventRender,
});
});
</script>
}
W załączniku jeszcze jest zdjęcie
- full.jpg (167 KB) - ściągnięć: 170
jQuery 
JavaScript 
