How to render events in Fullcalendar by specific views?

Question

Imagine the following situation: I have 2 arrays and 2 views in my fullCalendar.

In the "list" view I need to render the first array of events, that reflects the select in a view in the database. These events come blank, and when filled in a modal are registered and stop at another table, that in turn I make a select and store the result in another array, which will be rendered in the "Month view"

my code looks like this

//array de teste que vem de uma função do php
            <?php
        $dadosDaTabela = \App\Models\AgendasMedicas::GetAllofThisDataAgenda($doctorVal);
        foreach ($dadosDaTabela as $value) {
            ?> {
//o conteudo aqui nao interessa, o importante pra mim é ver se alguma coisa é retornada
                            id: '<?php echo $value['DT_CONSULTA_AGENDADA']; ?>',
                            title: '<?php echo $value['DT_CONSULTA_AGENDADA']; ?>',
                            color: 'red',
                            start: '<?php echo $value['DT_CONSULTA_AGENDADA']; ?>',

                        },
        <?php }
        ?>
                ];

//no meu full calendar, tento isto: 
 $('#calendar').fullCalendar({
                    viewRender: function (view, element) {
                        if (view.name == 'list') {
//aqui meu array é renderizado, o problema é que ele se renderiza nas outras views também...
                            events: events_array
                        }
                        if (view.name == 'month') {
                            alert('month')
                        }
                        if (view.name == 'agendaWeek') {
                            alert('agendaWeek')
                        }
                    },
                    timezone: 'America/Sao_Paulo',
                    header: {
                        left: ' prev title next ',
                        right: 'list,agendaWeek,month'
                    },
                    buttonText: {
                        list: 'Hoje',
                        listWeek: 'Semana'
                    }
                });

Answer 1

After knocking my head and reading the documentation a lot, I finally got it. I’m using version 3 of fullCalendar, the final code was this way:

//meus arrays (virtual e scheduled)
                    var virtual_array = [

        <?php
        $virtualArrays = \App\Models\AgendasMedicas::GetAllofThisDataAgenda($doctorVal);
        foreach ($virtualArrays as $virtualArray) {
            ?> {
                            id: '<?php echo $virtualArray['DT_CONSULTA_AGENDADA']; ?>',
                            title: '<?php echo $virtualArray['DT_CONSULTA_AGENDADA']; ?>',
                            color: 'red',
                            start: '<?php echo $virtualArray['DT_CONSULTA_AGENDADA']; ?>',

                   },
        <?php }
        ?>
                ];

                var scheduled_array = [

        <?php
        $scheduledArrays = \App\Models\AgendasMedicas::GetAllofThisDataAgendada();
        foreach ($scheduledArrays as $scheduledArray) {
            ?> {
                            id: '<?php echo $scheduledArray['DT_CONSULTA_AGENDADA']; ?>',
                            title: '<?php echo $scheduledArray['DT_CONSULTA_AGENDADA']; ?>',
                            color: 'red',
                            start: '<?php echo $scheduledArray['DT_CONSULTA_AGENDADA']; ?>',

                        },
        <?php }
        ?>
                ];

// e o meu fullCalendar ficou da seguinte forma:

          $('#calendar').fullCalendar({
                    viewRender: function(view, element){

                        if(view.name == 'list'){
                          $('#calendar').fullCalendar('removeEvents');
                          $('#calendar').fullCalendar('addEventSource', virtual_array);
                          $('#calendar').fullCalendar('rerenderEvents');
                        }
                        if(view.name == 'month'){
                             $('#calendar').fullCalendar('removeEvents');
                             $('#calendar').fullCalendar('addEventSource', scheduled_array);
                             $('#calendar').fullCalendar('rerenderEvents');
                        }
                        if(view.name == 'agendaWeek'){
                            $('#calendar').fullCalendar('removeEvents');
                            $('#calendar').fullCalendar('addEventSource', scheduled_array);
                            $('#calendar').fullCalendar('rerenderEvents');
                        }
                    },
//restante do calendario........

Answer 2

To change the events you must remove the existing ones then insert the new ones

I use $('#calendar').fullCalendar('removeEvents'); to remove events and update them.

I set an example with your code

viewRender: function (view, element) {
                    if (view.name == 'list') {
                        $('#calendar').fullCalendar('removeEvents');
                        events: events_array
                    }
                    if (view.name == 'month') {
                        $('#calendar').fullCalendar('removeEvents');
                        events: novo_events_array
                    }
                    if (view.name == 'agendaWeek') {
                        $('#calendar').fullCalendar('removeEvents');
                        events: outro_events_array
                    }
                },

So each time the view is changed, the new data will be loaded.