Data returned from PHP does not appear in the Fullcallendar calendar

Question

I am trying to list in a calendar (in the form of events), implemented with Fullcallendar, data resulting from a database query. The calendar appears, only the events that should be listed on it, don’t. I don’t know where I might be going wrong. I’ll leave the codes used for you to see:

JS Code:

//BIBLIOTECA FULLCALLENDAR
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    height: 600,
    locale: 'pt-br', //Adicionando o idioma pt-br	
    plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
    editable: true,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },

    navLinks: true,
    eventLimit: true,
    events: {
      url: '../banco/banco-get/pagina-dashboard/classes-dashboard-calendario.php', //Página PHP que realiza a consulta
      failure: function() {
        document.getElementById('script-warning').style.display = 'block'
      }
    },
    //Para eliminar o cache
    extraParams: function() {
      return {
        cachebuster: new Date().valueOf()
      };
    },
    eventClick: function(info) {

      info.jsEvent.preventDefault();

      //Passando valores para os elementos HTML			
      $('#visualizar #mostrar-titulo').text(info.event.title);
      $('#visualizar #mostrar-inicio').text(info.event.start.toLocaleString());
      $('#visualizar #mostrar-fim').text(info.event.end.toLocaleString());
      $('#visualizar #mostrar-fim').text(info.event.tipo);

      //Exibe o modal com (que pode ter as informações do evento do calendario)
      $('#visualizar').modal('show');

    },
    loading: function(bool) {
      document.getElementById('loading').style.display = bool ? 'block' : 'none';

    }
  });

  calendar.render();
});
/* FIM DO FULLCALENDAR */

PHP code:

<?php

session_start();	

require_once("../../conect/conexao.php");
		
date_default_timezone_set('Etc/GMT+3');
setlocale(LC_ALL, "", "pt_BR.utf-8");
header("Content-Type: application/json; charset=utf-8");

//Pegando o usuário logado
$usuario_logado = $_SESSION['nome'];		
		
    
class Agendador
{				
  private $usuario;

  public function __get($atributo)
  {			
    return $this->$atributo;
  }

  public function __set($atributo, $valor)
  {			
    $this->$atributo = $valor;
  }		

  public function listarAgendamentos()
  {	
    try
    {			
      //Conexão com o Banco de Dados 
      $c = new Conexao();
      $conexao = $c->conectar();

      $query = "SELECT CONCAT(tipo_atividade , ' (', COUNT(tipo_atividade) , ')') AS title , DATE_FORMAT(dt_vencimento , '%d-%m-%Y %H:%i:%s') AS start, DATE_FORMAT(dt_vencimento , '%d-%m-%Y %H:%i:%s') AS end, EXTRA_URGENTE_COMUM AS tipo, STATUS ";
      $query .= "FROM tbl_atividades WHERE (STATUS <> 'CONCLUIDO' AND STATUS <> 'CONCLUIDO_VENCIDO') AND responsavel = :usuario ";
      $query .= "GROUP BY tipo_atividade, dt_vencimento";

      $stmt = $conexao->prepare($query);
      $stmt->bindValue(':usuario',$this->__get('usuario'));
      $stmt->execute();

      $result = $stmt->fetchAll(PDO::FETCH_ASSOC);

      $i = 0;
      foreach($result as $key => $value)
      {	
        foreach($value as $key => $valor)
        {												
          if($key == "STATUS")
          {
            if($valor === "PENDENTE")
            {
              $cor = "#00BFFF";
            }
            else if($valor === "VENCIDO")
            {
              $cor = "#FF0000";
            }
            else if($valor === "INICIADO")
            {
              $cor = "#3CB371";
            }
            else if($valor === "INICIADO_VENCIDO")
            {
              $cor = "#FF8C00";
            }
            else if($valor === "STAND_BY_CLIENTE")
            {
              $cor = "#808080";
            }
            else if($valor === "STAND_BY_INTERNO")
            {
              $cor = "#808080";
            }							
          }					
        }					
        $result[$i]['color'] = $cor;
        $i++;
      }			

      echo json_encode($result);			

    }
    catch(PDOException $e)
    {
      //Verificando o erro ocorrido
      echo "Erro: ".$e->getCode()." Mensagem: ".$e->getMessage();				
    }
  }				
}
	
//Classe Agendador
$agendador = new Agendador();
$agendador->__set('usuario',$usuario_logado);
$agendador->listarAgendamentos();
  
?>

PRINT_R of the Query result in Mysql: (It’s coming out perfect)

OBS 1: I didn’t post the HTML code so the question doesn’t get too big and also because I think it doesn’t have much need. Fullcallendar files are being called correctly, and the DIV id is "Calendar".

OBS 2: The return JSON is coming out of PHP correctly (we have already eliminated the chance of the query being wrong). I have already run the test. But when I give it a console.log in Javascript and nothing comes out.

Answer 1

I managed to solve:

The error is in the section below:

<?php
 
  $query = "SELECT CONCAT(tipo_atividade , ' (', COUNT(tipo_atividade) , ')') AS title , DATE_FORMAT(dt_vencimento , '%d-%m-%Y %H:%i:%s') AS start, DATE_FORMAT(dt_vencimento , '%d-%m-%Y %H:%i:%s') AS end, EXTRA_URGENTE_COMUM AS tipo, STATUS ";
  $query .= "FROM tbl_atividades WHERE (STATUS <> 'CONCLUIDO' AND STATUS <> 'CONCLUIDO_VENCIDO') AND responsavel = :usuario ";
  $query .= "GROUP BY tipo_atividade, dt_vencimento";
      
?>

• Fullcallendar does not accept PHP return that has date in our format (d-m-Y). Then, the correct is to leave in the format of the gringolandia (Y-m-d) as below.

• After returning the data in PHP, there on the return of Fullcallendar, in Javascript, we can convert this date with the locale:'' and the toLocaleString().

<?php
  
  $query = "SELECT CONCAT(tipo_atividade , ' (', COUNT(tipo_atividade) , ')') AS title , DATE_FORMAT(dt_vencimento , '%Y-%m-%d %H:%i:%s') AS start, DATE_FORMAT(dt_vencimento , '%Y-%m-%d %H:%i:%s') AS end, EXTRA_URGENTE_COMUM AS tipo, STATUS ";

?>