Full Calendar - SCHUDELLER with C #

0

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?

    
asked by anonymous 25.10.2018 / 22:45

0 answers