RESOLVIDO - Eventos no FullCalendar.js V4

Programação
, ,
#1

Eae galera beleza? Estou tento um problema que esta me deixando louco, já tentei tudo o que é possível e até agora nada…Mas provavelmente é uma coisa besta, vamos lá.

Estou utilizando uma biblioteca do fullcalendar no meu projeto, eu consigo adicionar eventos normalmente, porem, se eu troco de mês, não consigo preencher os eventos mês corrente.
Tentei utilizar a função “datesRender”, basicamente a cada vez que troca de mês entra nela, só que dentro dela eu não consigo criar um evento, se eu colocar a funcão “events” não funciona… :confused:

Aqui vai o código.(lembrando, tentei usar o addEvent e tbm não funcionou…)

document.addEventListener('DOMContentLoaded', function () {
	var calendarEl = document.getElementById('calendar');
	
	var calendar = new FullCalendar.Calendar(calendarEl, {
		eventLimit: true, // for all non-TimeGrid views
		views: {
			timeGrid: {
				eventLimit: 4 // adjust to 6 only for timeGridWeek/timeGridDay
			}
		},
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
		},
		buttonText: {
			today: "Hoje",
			month: "Mês",
			week: "Semana",
			day: "Dia"
		},
		events: [
			{
				title: 'teste',
				start: '2019-02-02'
			}
		],
		eventClick: function () {

			$("#event-modal").modal('show');

		},
		datesRender: function (info) {
			//Convertendo Date para formatar para LocalDateTime
			var dia = info.view.currentStart.getDate();
			var mes = info.view.currentStart.getMonth() + 1;
			var ano = info.view.currentStart.getFullYear();
			if (mes <= 9) {
				mes = "0" + mes;
			}
			if (dia <= 9) {
				dia = "0" + dia;
			}
			var date = ano + "-" + mes + "-" + dia;

			console.log(date);
			$.post("listaQuartosMapaMensal.htm", {
				dataMes: date
			}, function (data) {
			 //Aqui eu retorno o evento do banco
			calendar.addEvents(data.corpo);
			}, "JSON");
		}
	});

	calendar.render();
	calendar.setOption('locale', 'pt-br');
});

function retornaEventos(corpo) {
	var eventos = [];
	var cor = '';
	var corpo = corpo;
	console.log(corpo[0].eventos);
	for (var i = 0; i < corpo[0].eventos.length; i++) {
		if (corpo[0].eventos[i].situacao.includes('Reserva') || corpo[0].eventos[i].situacao.includes('No-show')) {
			cor = 'orange';
		} else if (corpo[0].eventos[i].situacao.includes('Checkin')) {
			cor = 'red';
		} else if (corpo[0].eventos[i].situacao.includes('Limpeza')) {
			cor = 'blue';
		} else if (corpo[0].eventos[i].situacao.includes('Manutenção')) {
			cor = 'cinza';
		}

		eventos.push({
			title: 'Apto:' + corpo[0].eventos[i].ac.numero + ' - ' + corpo[0].eventos[i].situacao + ' ',
			start: '' + corpo[0].eventos[i].hAtual.dataInicial + '',
			end: '' + corpo[0].eventos[i].hAtual.dataFinal + '',
			color: cor,
			url: ''
		});
	}
	console.log(eventos);
	return eventos;
}

Se alguem puder me ajudar ficarei muito grato!

#2

Pessoal eu consegui resolver utilizando versão V3, como não tinha mais pra onde ir acabei utilizando ela, se alguem quiser o código é esse aqui:

$(document).ready(function () {
                    $('#calendar').fullCalendar({
                        eventLimit: true, // for all non-TimeGrid views
                        views: {
                            timeGrid: {
                                eventLimit: 4 // adjust to 6 only for timeGridWeek/timeGridDay
                            }
                        },
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,agendaWeek,agendaDay'
                        },
                        buttonText: {
                            today: "Hoje",
                            month: "Mês",
                            week: "Semana",
                            day: "Dia"
                        },
                        eventClick: function () {

                            $("#event-modal").modal('show');

                        },
                        events: function (start, end, timezone, callback) {
                            eventos(start, end, timezone, callback);
                        }
                    });

                    $('#calendar').fullCalendar('option', 'locale', 'pt-br');

                });

                function retornaEventos(corpo) {
                    var eventos = [];
                    var cor = '';
                    var corpo = corpo;

                    if (corpo[0] !== undefined) {

                        for (var i = 0; i < corpo[0].eventos.length; i++) {
                            if (corpo[0].eventos[i].situacao.includes('Reserva') || corpo[0].eventos[i].situacao.includes('No-show')) {
                                cor = '#ffbd4a';
                            } else if (corpo[0].eventos[i].situacao.includes('Checkin')) {
                                cor = '#f05050';
                            } else if (corpo[0].eventos[i].situacao.includes('Limpeza')) {
                                cor = '#34d3eb';
                            } else if (corpo[0].eventos[i].ab !== undefined && !corpo[0].eventos[i].situacao.includes('Limpeza')) {
                                cor = '#777777';
                            }

                            if (corpo[0].eventos[i].ac !== undefined) {
                                eventos.push({
                                    title: 'Apto:' + corpo[0].eventos[i].ac.numero + ' - ' + corpo[0].eventos[i].situacao + ' ',
                                    start: '' + corpo[0].eventos[i].hAtual.dataInicial + '',
                                    end: '' + corpo[0].eventos[i].hAtual.dataFinal + '',
                                    color: cor,
                                    url: ''
                                });
                            } else if (corpo[0].eventos[i].ab !== undefined) {
                                eventos.push({
                                    title: 'Apto:' + corpo[0].eventos[i].ab.idacomodacao.numero + ' - ' + corpo[0].eventos[i].situacao + ' ',
                                    start: '' + corpo[0].eventos[i].ab.dataInicial + '',
                                    end: '' + corpo[0].eventos[i].ab.dataFinal + '',
                                    color: cor,
                                    url: ''
                                });
                                //console.log(cor + " - " + corpo[0].eventos[i].ab.dataInicial + " - " + corpo[0].eventos[i].ab.dataFinal + " - " + corpo[0].eventos[i].situacao);
                            }
                        }
                    }

                    return eventos;
                }

                function eventos(start, end, timezone, callback) { //include the parameters fullCalendar supplies to you!

                    //Convertendo Date para formatar para LocalDateTime
                    var dia = start.format('DD');
                    var mes = start.format('M');
                    var ano = start.format('YYYY');
                    if (mes <= 9) {
                        mes = "0" + mes;
                    }
                    var date = ano + "-" + mes + "-" + dia;

                    var quarto = document.getElementById("quarto").value;
                    var eventos = [];

                    $.ajax({
                        type: 'POST',
                        url: 'listaQuartosMapaMensal.htm',
                        async: false,
                        data: {
                            dataMes: date,
                            quarto: quarto
                        },
                        success: function (data) {
                            var corpo = JSON.parse(data);

                            eventos = retornaEventos(corpo);
                        }
                    });

                    callback(eventos);
                }

                function quarto() {
                    $('#calendar').fullCalendar({
                        events: function (start, end, timezone, callback) {
                            eventos(start, end, timezone, callback);
                        }
                    });
                }