我正试图在symfony 5中集成一个名为fullcalendar的日历

Question

我正试图将fullCalendarJS集成在symfony5.4中，为此我正在观看一个视频，该视频在该部分的HTTP服务器上响应完美，但是做类似的事情告诉我，在这行中出现的代码xhr.send(JSON.stringify(data));它告诉我数据不完整，并给我一个HTTP 404错误，无法找到页面。

从我所看到的，它可以用Fetch完成，实际上它更正式，更舒适，但我不知道如何在代码中实现它。所以我把我的代码留给你，以防有人可以帮助我，提前感谢。

实体

<?php
namespace AppEntity;
use AppRepositoryCalendarRepository;
use DoctrineDBALTypesTypes;
use DoctrineORMMapping as ORM;
#[ORMEntity(repositoryClass: CalendarRepository::class)]
class Calendar
{
#[ORMId]
#[ORMGeneratedValue]
#[ORMColumn]
private ?int $id = null;
#[ORMColumn(length: 100)]
private ?string $title = null;
#[ORMColumn(type: Types::DATETIME_MUTABLE)]
private ?DateTimeInterface $start = null;
#[ORMColumn(type: Types::DATETIME_MUTABLE)]
private ?DateTimeInterface $end = null;
#[ORMColumn(type: Types::TEXT)]
private ?string $description = null;
#[ORMColumn]
private ?bool $all_day = null;
#[ORMColumn(length: 12)]
private ?string $background_color = null;
#[ORMColumn(length: 12)]
private ?string $border_color = null;
#[ORMColumn(length: 12)]
private ?string $text_color = null;
public function getId(): ?int
{
return $this->id;
}
public function getTitle(): ?string
{
return $this->title;
}
public function setTitle(string $title): self
{
$this->title = $title;
return $this;
}
public function getStart(): ?DateTimeInterface
{
return $this->start;
}
public function setStart(DateTimeInterface $start): self
{
$this->start = $start;
return $this;
}
public function getEnd(): ?DateTimeInterface
{
return $this->end;
}
public function setEnd(DateTimeInterface $end): self
{
$this->end = $end;
return $this;
}
public function getDescription(): ?string
{
return $this->description;
}
public function setDescription(string $description): self
{
$this->description = $description;
return $this;
}
public function isAllDay(): ?bool
{
return $this->all_day;
}
public function setAllDay(bool $all_day): self
{
$this->all_day = $all_day;
return $this;
}
public function getBackgroundColor(): ?string
{
return $this->background_color;
}
public function setBackgroundColor(string $background_color): self
{
$this->background_color = $background_color;
return $this;
}
public function getBorderColor(): ?string
{
return $this->border_color;
}
public function setBorderColor(string $border_color): self
{
$this->border_color = $border_color;
return $this;
}
public function getTextColor(): ?string
{
return $this->text_color;
}
public function setTextColor(string $text_color): self
{
$this->text_color = $text_color;
return $this;
}
}

我希望日历显示的函数

#[Route('/', name: 'main')]
public function index(CalendarRepository $calendar): Response
{
$events = $calendar->findAll();
$rdvs = [];
foreach($events as $event){
$rdvs[] = [
'id' => $event->getId(),
'start' => $event->getStart()->format('Y-m-d H:i:s'),
'end' => $event->getEnd()->format('Y-m-d H:i:s'),
'title' => $event->getTitle(),
'description' => $event->getDescription(),
'backgroundColor' => $event->getBackgroundColor(),
'borderColor' => $event->getBorderColor(),
'textColor' => $event->getTextColor(),
'allDay' => $event->isAllDay(),
];
}
$data = $this->json($rdvs);
return $this->render('main/index.html.twig',['data' => $data->getContent()]);
// return new Response('',404);
}

ApiController

<?php
namespace AppController;
use AppEntityCalendar;
use DateTime;
use DoctrinePersistenceManagerRegistry;
use SymfonyBundleFrameworkBundleControllerAbstractController;
use SymfonyComponentHttpFoundationRequest;
use SymfonyComponentHttpFoundationResponse;
use SymfonyComponentRoutingAnnotationRoute;
class ApiController extends AbstractController
{
// #[Route('/api', name: 'app_api')]
// public function index(): Response
// {
//     return $this->render('api/index.html.twig', [
//         'controller_name' => 'ApiController',
//     ]);
// }
#[Route('/api/{id}/edit', name: 'api_event_edit', methods:'PUT')]
public function majEvent(?Calendar $calendar,Request $request,ManagerRegistry $doctrine): Response
{
$data = $this->json($request->getContent());
if (isset($data->title) && !empty($data->title) &&
isset($data->start) && !empty($data->start) &&
isset($data->description) && !empty($data->description) &&
isset($data->backgroundColor) && !empty($data->backgroundColor) &&
isset($data->borderColor) && !empty($data->borderColor) &&
isset($data->textColor) && !empty($data->textColor))
{
$code = 200;
if (!$calendar) {
$calendar = new Calendar();
$code = 201;
}
$calendar->setTitle($data->title);
$calendar->setStart(new DateTime($data->start));
$calendar->setDescription($data->description);
if ($data->allDay) {
$calendar->setEnd(new DateTime($data->start));
}else{
$calendar->setEnd(new DateTime($data->end));
}
$calendar->setAllDay($data->allDay);
$calendar->setBackgroundColor($data->backgroundColor);
$calendar->setBorderColor($data->borderColor);
$calendar->setTextColor($data->textColor);
$em = $doctrine->getManager();
$em->persist($calendar);
$em->flush();
return new Response('Ok',$code);
}else{
return new Response('Datos incompletos',404);
}
return $this->render('api/index.html.twig', [
'controller_name' => 'ApiController',
]);
}
}

这是我的小树枝，有一个脚本

{% extends 'base.html.twig' %}
{% block title %}Hello MainController!{% endblock %}
{% block body %}
<div id="calendrier">
</div>
{# <div id="mainbodyBlock">
<div id="cardmain1" class="card" style="width: 18rem;">
<a href="{{path('familia')}}">
<img src="/img/reloj.jpg" class="card-img-top" alt="...">
</a>
<div class="card-body">
<p class="card-text">Familia</p>
</div>
</div>
<div id="cardmain2" class="card" style="width: 18rem;">
<a href="{{path('plantilla')}}">
<img src="/img/calendario.jpg" class="card-img-top" alt="...">
</a>
<div class="card-body">
<p class="card-text">Plantilla</p>
</div>
</div>
</div> #}
{% endblock %}

{% block javascripts %}
<script>
window.onload = () => {
let calendarElt = document.querySelector("#calendrier")
let calendar = new FullCalendar.Calendar(calendarElt, {
initialView: 'dayGridMonth',
locale: 'es',
timeZone: 'Europe/Madrid',
headerToolbar: {
start: 'prev,next today',
center: 'title',
end: 'dayGridMonth,timeGridWeek'
},
events: {{data|raw}},
editable: true,
eventResizableFromStart: true,
})
calendar.on('eventChange', (e) => {
console.log(e);
let url = `/api/${e.event.id}/edit`;
let data = {
"title": e.event.title,
"description": e.event.extendedProps.description,
"start": e.event.start,
"end": e.event.end,
"backgroundColor": e.event.backgroundColor,
"borderColor": e.event.backgroundColor,
"textColor": e.event.textColor,
"allDay": e.event.allDay
}
let xhr = new XMLHttpRequest()
xhr.open("PUT",url)
xhr.send(JSON.stringify(data));
})
calendar.render()
}
</script>
{% endblock %}

如果他们告诉我一个改进或优化的方法，我会接受建议，如果错误被解决了，那就更好了。

目标是保存每个事件，即使日期改变了，它也被更新了

Answer 1

如果你想使用fetch:

const headers = new Headers();
headers.append("Content-Type", "application/json");
const requestOptions = {
method: 'PUT',
headers: headers,
body: JSON.stringify(data)
};

const req = fetch(url, requestOptions);

如果需要，还可以将此代码包装在async函数中