fullcalendar error that does not appear calendar when executing code

Question

hello! I created full Calendar with Jscript, but when I am running the code, it appears an error that says full Callendar is not Function. as you can see in the code below

var events = [];
    var tarefasAtribuidas = <?php echo $dbTarefas->getTarefaAtribuidaUserIdAbertaJSON($this->session->userdata('userId'));?>;

    var tarefas = <?php echo $dbTarefas->getTarefaFromUserIdJSON($this->session->userdata('userId'));?>;

    function organizaTarefasAtribuidas( x ){
        x.forEach(function(item){
            events.push({title:item.Assunto,start:item.Data_atribuicao,end:item.Data_prevista,color:'green'})
        });
    }

    function organizaTarefas( x ){
        x.forEach(function(item){
            events.push({title:item.Assunto,start:item.Data_atribuicao,end:item.Data_prevista,color:'blue'})
        });
    }

    organizaTarefasAtribuidas(tarefasAtribuidas);
    organizaTarefas(tarefas);

    function addEvent(){
    events.push({title: 'testeAdd', start: '2018-11-15',color:'purple'});
    //atualizar dados
    $("#calendar").fullCalendar('removeEvents');
    $("#calendar").fullCalendar('addEventSource', events);
    $("#calendar").fullCalendar('rerenderEvents');
}

$(Function() {

    // page is now ready, initialize the calendar...
    $('#calendar').fullCalendar({
        eventColor: 'green',
        events:events,
        eventClick: function(calEvent, jsEvent, view) {
            alert( calEvent.title  );
        },
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Sep','Out','Nov','Dez'],
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sabado'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'],
        buttonText: { today: 'hoje', month: 'mês', week: 'semana', day: 'dia', list: 'lista' }
    });

});

'>

<script src='<?php echo base_url('assets/js/fullcalendar/moment.min.js')?>'></script>
<script src='<?php echo base_url('assets/js/fullcalendar/jquery.min.js')?>'></script>
<script src="<?php echo base_url('assets/js/fullcalendar/jquery-ui.custom.min.js')?>"></script>
    <script src='<?php echo base_url('assets/js/fullcalendar/fullcalendar.min.js')?>'></script>

Answer 1

Correct way to use Fullcalendar

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar'); // o id da div que vai ser o calendário.

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ dayGrid ]
  });

  calendar.render();
});

More questions follow the doc: https://fullcalendar.io/docs/initialize-globals