Calendar doesn't show up

Question

For some reason the calendar in our symfony project doesn't show up. We're using Bootstrap script and we don't see what are we doing wrong.

We have been trying to follow up the steps from this page but it didn't work: https://ourcodeworld.co/articulos/leer/224/crear-un-calendario-de-eventos-planificador-con-dhtmlxscheduler-en-symfony-3

If someone is able to help us we'll be very thankfull. We'll also leave a list of the files of our project.

This is the template that I want that appear the calendar:

{% block stylesheets %}
    <!-- Incluir el estilo plano del planificador -->
    <link rel='stylesheet' type='text/css' href='{{ asset("libraries/dhtmlx/codebase/dhtmlxscheduler_flat.css") }}' charset="utf-8"/>
    <!-- Si no usa el modo de pantalla completa, ignore el siguiente estilo -->
    <style type="text/css" media="screen">
        html, body{
            margin:0px;
            padding:0px;
            height:100%;
            overflow:hidden;
        }   
    </style>
{% endblock %}
{% block body %}
<div id="scheduler_element" class="dhx_cal_container" style='width:100%; height:100%;'>
    <div class="dhx_cal_navline">
        <div class="dhx_cal_prev_button">&nbsp;</div>
        <div class="dhx_cal_next_button">&nbsp;</div>
        <div class="dhx_cal_today_button"></div>
        <div class="dhx_cal_date"></div>
        <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
    </div>
    <div class="dhx_cal_header"></div>
    <div class="dhx_cal_data"></div>       
</div>

{% endblock %}

{% block javascripts %}
    
    <script src='{{ asset("libraries/dhtmlx/codebase/dhtmlxscheduler.js") }}' type='text/javascript' charset="utf-8"></script>
    
    <!-- Incluya jQuery para manejar solicitudes AJAX-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- Incluye Momentjs para jugar con las fechas -->
    <script src="{{ asset("libraries/momentjs/moment.js") }}"></script>

    <script>
        // Exponer las citas globalmente imprimiendo la cadena JSON con twig y el filtro sin procesar
        // para que puedan ser accesibles por el programador Scripts.js el controlador
        window.GLOBAL_APPOINTMENTS = {{ citas|raw }};

        // Como los scripts del planificador estarán en otros archivos, las rutas generadas por twig
        // también debe estar expuesto en la ventana
        window.GLOBAL_SCHEDULER_ROUTES = {
            create: '{{ path("crear") }}',
            update: '{{ path("update") }}',
            delete: '{{ path("delete") }}'
        };
    </script>

    <script src='{{ asset("libraries/schedulerScripts.js") }}' type='text/javascript' charset="utf-8"></script>
    <script type="text/javascript" src="https://raw.githubusercontent.com/flouthoc/minAjax.js/master/index.js"></script>
{% endblock %}
----------------------------------------

This is the controller that we are using:


<?php

namespace App\Controller;

use App\Entity\Cita;
use App\Repository\CitaRepository;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;
use Doctrine\Persistence\ManagerRegistry;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;

class CitaController extends AbstractController
{
    #[Route('/prueba', name:'prueba')]
    public function indexAction(ManagerRegistry $doctrine)
    {
        $citasRepository = new CitaRepository($doctrine);
        $citas = $citasRepository->findAll();
        $formatedCitas = $this->formatCitaToJson($citas);

        return $this->render("prueba/prueba.html.twig", [
            'citas' => $formatedCitas
        ]);
    }

    #[Route('/prueba/create', name:'crear')]
    public function createAction(ManagerRegistry $doctrine,Request $request){
        
        $citasRepository = new CitaRepository($doctrine);

        // Use el mismo formato que usa Moment.js en la vista
        $format = "d-m-Y H:i:s";

        $cita = new Cita();
        $cita->setTitulo($request->request->get("title"));
        $cita->setDescripcion($request->request->get("description"));
        $cita->setFechaDeInicio(
            \DateTime::createFromFormat($format, $request->request->get("start_date"))
        );
        $cita->setFechaDeFin(
            \DateTime::createFromFormat($format, $request->request->get("end_date"))
        );

        $em = $doctrine->getManager();
        $em->persist($cita);
        $em->flush();

        return new JsonResponse(array(
            "status" => "success"
        ));
    }
    
    #[Route('/prueba/update/{id}', name:'update')]
    public function updateAction(ManagerRegistry $doctrine,Request $request,$id){
        
        $citasRepository = new CitaRepository($doctrine);
        $cita = $citasRepository->findOneBy(['id'=>$id]);

        if(!$cita){
            return new JsonResponse(array(
                "status" => "error",
                "message" => "The appointment to update $id doesn't exist."
            ));
        }

        // Use el mismo formato que usa Moment.js en la vista
        $format = "d-m-Y H:i:s";

        // Actualizar campos de la cita
        $cita->setTitulo($request->request->get("title"));
        $cita->setDescripcion($request->request->get("description"));
        $cita->setFechaDeInicio(
            \DateTime::createFromFormat($format, $request->request->get("start_date"))
        );
        $cita->setFechaDeFin(
            \DateTime::createFromFormat($format, $request->request->get("end_date"))
        );

        // Actualizar cita
        $em = $doctrine->getManager();
        $em->persist($cita);
        $em->flush();

        return new JsonResponse(array(
            "status" => "success"
        ));
    }

    #[Route('/prueba/delete/{id}', name:'delete')]
    public function deleteAction(ManagerRegistry $doctrine,Request $request,$id){
        $em = $doctrine->getManager();
        $citasRepository = new CitaRepository($doctrine);
        $cita = $citasRepository->findOneBy(['id'=>$id]);

        if(!$cita){
            return new JsonResponse(array(
                "status" => "error",
                "message" => "The given appointment $id doesn't exist."
            ));
        }

        // ¡Eliminar cita de la base de datos!
        $em->remove($cita);
        $em->flush();       

        return new JsonResponse(array(
            "status" => "success"
        ));
    }

    private function formatCitaToJson($citas){
        $formatedCitas = [];
        
        foreach($citas as $cita){
            array_push($formatedCitas, array(
                "id" => $cita->getId(),
                "description" => $cita->getDescripcion(),
                // Es importante mantener start_date, end_date y text con la misma clave
                // para el área de JavaScript
                // aunque el getter podría ser diferente, por ejemplo:
                // "start_date" => $appointment->getBeginDate();
                "text" => $cita->getTitulo(),
                "start_date" => $cita->getFechaDeInicio()->format("Y-m-d H:i"),
                "end_date" => $cita-> getFechaDeFin()->format("Y-m-d H:i")
            ));
        }

        return json_encode($formatedCitas);
    }
}

-----------------------------------

This is the Entity we are using:


<?php

namespace App\Entity;

use App\Repository\CitaRepository;
use Doctrine\DBAL\Types\Types;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(repositoryClass: CitaRepository::class)]
class Cita
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column(type: 'integer')]
    private $id;

    #[ORM\Column(type: 'date')]
    private $fecha;

    #[ORM\Column(type: 'time')]
    private $hora;

    #[ORM\OneToOne(mappedBy: 'cita', targetEntity: Reserva::class)]
    private $reserva;

    #[ORM\ManyToOne(inversedBy: 'citas')]
    private ?Servicios $Servicio = null;

    #[ORM\Column(length: 255)]
    private ?string $Titulo = null;

    #[ORM\Column(length: 255, nullable: true)]
    private ?string $Descripcion = null;

    #[ORM\Column(type: Types::DATETIME_MUTABLE)]
    private ?\DateTimeInterface $fecha_de_inicio = null;

    #[ORM\Column(type: Types::DATETIME_MUTABLE)]
    private ?\DateTimeInterface $fecha_de_fin = null;
    
    public function getId(): ?int
    {
        return $this->id;
    }

    public function getFecha(): ?\DateTimeInterface
    {
        return $this->fecha;
    }

    public function setFecha(\DateTimeInterface $fecha): self
    {
        $this->fecha = $fecha;

        return $this;
    }

    public function getHora(): ?\DateTimeInterface
    {
        return $this->hora;
    }

    public function setHora(\DateTimeInterface $hora): self
    {
        $this->hora = $hora;

        return $this;
    }

    public function getReserva(): ?Reserva
    {
        return $this->reserva;
    }

    public function setReserva(?Reserva $reserva): self
    {
        $this->reserva = $reserva;

        return $this;
    }

    public function getServicio(): ?Servicios
    {
        return $this->Servicio;
    }

    public function setServicio(?Servicios $Servicio): self
    {
        $this->Servicio = $Servicio;

        return $this;
    }

    public function getTitulo(): ?string
    {
        return $this->Titulo;
    }

    public function setTitulo(string $Titulo): self
    {
        $this->Titulo = $Titulo;

        return $this;
    }

    public function getDescripcion(): ?string
    {
        return $this->Descripcion;
    }

    public function setDescripcion(?string $Descripcion): self
    {
        $this->Descripcion = $Descripcion;

        return $this;
    }

    public function getFechaDeInicio(): ?\DateTimeInterface
    {
        return $this->fecha_de_inicio;
    }

    public function setFechaDeInicio(?\DateTimeInterface $fecha_de_inicio): self
    {
        $this->fecha_de_inicio = $fecha_de_inicio;

        return $this;
    }

    public function getFechaDeFin(): ?\DateTimeInterface
    {
        return $this->fecha_de_fin;
    }

    public function setFechaDeFin(?\DateTimeInterface $fecha_de_fin): self
    {
        $this->fecha_de_fin = $fecha_de_fin;

        return $this;
    }

}