I'm trying to popular resurces
, to create my calendar, but it is not working, there is no error and I did not display the information, I do not know how to proceed, the data is coming to the screen, follow my code .js
!function ($) {
"use strict";
var CalendarApp = function () {
this.$body = $("body")
this.$schedule = $('#calendar'),
this.$event = ('#calendar-events div.calendar-events'),
this.$categoryForm = $('#add-new-event form'),
this.$extEvents = $('#calendar-events'),
this.$modalAdd = $('#add-nova-agenda'),
this.$saveEvent = $('.salva-agenda'),
this.$scheduleObj = null
};
/* on drop */
CalendarApp.prototype.onDrop = function (eventObj, date) {
var $this = this;
// recupera o objeto de evento armazenado do elemento eliminado
var originalEventObject = eventObj.data('eventObject');
var $categoryClass = eventObj.attr('data-class');
// precisamos copiá-lo, para que vários eventos não tenham uma referência ao mesmo objeto
var copiedEventObject = $.extend({}, originalEventObject);
// atribui a data que foi relatada
copiedEventObject.start = date;
if ($categoryClass)
copiedEventObject['className'] = [$categoryClass];
// renderiza o evento no calendário
$this.$schedule.fullCalendar('renderEvent', copiedEventObject, true);
},
/* on click */
CalendarApp.prototype.onEventClick = function (calEvent, jsEvent, view) {
var $this = this;
var form = $("<form></form>");
form.append("<label>Change event name</label>");
form.append("<div class='input-group'><input class='form-control' type=text value='" + calEvent.title + "' /><span class='input-group-btn'><button type='submit' class='btn btn-success waves-effect waves-light'><i class='fa fa-check'></i> Save</button></span></div>");
$this.$modalAdd.modal({
backdrop: 'static'
});
$this.$modalAdd.find('.delete-event').show().end().find('.save-event').hide().end().find('.modal-body').empty().prepend(form).end().find('.delete-event').unbind('click').click(function () {
$this.$scheduleObj.fullCalendar('removeEvents', function (ev) {
return (ev._id == calEvent._id);
});
$this.$modalAdd.modal('hide');
});
$this.$modalAdd.find('form').on('submit', function () {
calEvent.title = form.find("input[type=text]").val();
$this.$scheduleObj.fullCalendar('updateEvent', calEvent);
$this.$modalAdd.modal('hide');
return false;
});
},
/* on select */
CalendarApp.prototype.onSelect = function (start, end, allDay) {
var $this = this;
$this.$modalAdd.modal({
backdrop: 'static'
});
var form = $("<form></form>");
form.append("<div class='row'></div>");
form.find(".row")
.append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Horário Inicial:</label><input id='inicio' class='form-control' placeholder='Horário Inicial' type='time' name='inicio'/></div></div>")
.append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Horário Final:</label><input id='fim' class='form-control' placeholder='Horário Final' type='time' name='inicio'/></div></div>")
.append("</div></div>");
$('#inicio').val(start.format('HH:mm'));
$('#fim').val(end.format('HH:mm'));
$this.$modalAdd.find('.delete-event').hide().end().find('.save-event').show().end().find('.modal-body').empty().prepend(form).end().find('.save-event').unbind('click').click(function () {
form.submit();
});
$this.$modalAdd.find('form').on('submit', function () {
var title = form.find("input[name='title']").val();
var beginning = form.find("input[name='beginning']").val();
var ending = form.find("input[name='ending']").val();
var categoryClass = form.find("select[name='category'] option:checked").val();
if (title !== null && title.length != 0) {
$this.$scheduleObj.fullCalendar('renderEvent', {
title: title,
start: start,
end: end,
allDay: false,
className: categoryClass
}, true);
$this.$modalAdd.modal('hide');
} else {
alert('Você tem que dar um título ao seu evento');
}
return false;
});
$this.$scheduleObj.fullCalendar('unselect');
},
CalendarApp.prototype.enableDrag = function () {
//eventos de inicialização
$(this.$event).each(function () {
// criar um objeto de evento (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// não precisa ter início nem fim
var eventObject = {
title: $.trim($(this).text()) // use o texto do elemento como o título do evento
};
// armazenar o objeto de evento no elemento DOM para que possamos chegar a ele mais tarde
$(this).data('eventObject', eventObject);
// Tornar o evento draggable usando jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // fará com que o evento volte a sua posição original após o arrasto
revertDuration: 0
});
});
}
/* Inicializando */
CalendarApp.prototype.init = function (funcionarios) {
this.enableDrag();
var $this = this;
var funcionarios = [];
GetAllEmployeeJsonAsync();
function GetAllEmployeeJsonAsync() {
funcionarios = [];
$.ajax({
type: "POST",
url: "/Schedule/GetAllEmployeeJsonAsync",
success: function (data) {
$.each(data, function (i, v) {
funcionarios.push({
id: v.id,
nome: v.nome
});
})
},
error: function (error) {
alert('Não foi possível carregar os funcionários');
}
})
};
$this.$scheduleObj = $this.$schedule.fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
slotDuration: '00:15:00', /* Se quisermos dividir o tempo do dia a cada 15 minutos */
defaultView: 'agendaDay',
aspectRatio: 1.5,
scrollTime: '00:00',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaTwoDay,agendaWeek,month'
},
views: {
agendaTwoDay: {
type: 'agenda',
duration: { days: 2 },
// views that are more than a day will NOT do this behavior by default
// so, we need to explicitly enable it
groupByResource: true
//// uncomment this line to group by day FIRST with resources underneath
//groupByDateAndResource: true
}
},
//// uncomment this line to hide the all-day slot
//allDaySlot: false,
resources: funcionarios,
events: [
{ id: '1', resourceId: 'a', start: '2018-04-06', end: '2018-04-08', title: 'event 1' },
{ id: '2', resourceId: 'a', start: '2018-04-07T09:00:00', end: '2018-04-07T14:00:00', title: 'event 2' },
{ id: '3', resourceId: 'b', start: '2018-04-07T12:00:00', end: '2018-04-08T06:00:00', title: 'event 3' },
{ id: '4', resourceId: 'c', start: '2018-04-07T07:30:00', end: '2018-04-07T09:30:00', title: 'event 4' },
{ id: '5', resourceId: 'd', start: '2018-04-07T10:00:00', end: '2018-04-07T15:00:00', title: 'event 5' }
],
editable: true,
droppable: true, // isso permite que as coisas caiam no calendário !!!
eventLimit: true, // permitir "mais" link quando muitos eventos
selectable: true,
drop: function (date) { $this.onDrop($(this), date); },
select: function (start, end, allDay) { $this.onSelect(start, end, allDay); },
eventClick: function (calEvent, jsEvent, view) { $this.onEventClick(calEvent, jsEvent, view); }
});
//on new event
this.$saveEvent.on('click', function () {
var categoryName = $this.$categoryForm.find("input[name='category-name']").val();
var categoryColor = $this.$categoryForm.find("select[name='category-color']").val();
if (categoryName !== null && categoryName.length != 0) {
$this.$extEvents.append('<div class="calendar-events" data-class="bg-' + categoryColor + '" style="position: relative;"><i class="fa fa-circle text-' + categoryColor + '"></i>' + categoryName + '</div>')
$this.enableDrag();
}
});
},
//init CalendarApp
$.CalendarApp = new CalendarApp, $.CalendarApp.Constructor = CalendarApp
}(window.jQuery),
//inicializando o calendário
function ($) {
"use strict";
$.CalendarApp.init()
} (window.jQuery);
Can you help me, find where I'm going wrong?