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

juzqafwq  于 2022-12-02  发布在  PHP
关注(0)|答案(1)|浏览(136)

我试图在symfony5.4中集成fullCalendarJS，为此我正在看一个video，它就在HTTP服务器的那一部分，它响应完美，然而，做一些类似的事情告诉我，在这行代码xhr.send(JSON.stringify(data));出来，它告诉我，数据是不完整的，并给我一个HTTP 404错误，该页面无法找到.
从我所看到的，它可以用Fetch来完成，事实上它更正式，更舒适，但我不知道如何在代码中实现它。所以我把我的代码留给你，以防有人能帮助我，提前感谢。
实体名称

<?php

namespace App\Entity;

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

#[ORM\Entity(repositoryClass: CalendarRepository::class)]
class Calendar
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

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

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

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

    #[ORM\Column(type: Types::TEXT)]
    private ?string $description = null;

    #[ORM\Column]
    private ?bool $all_day = null;

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

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

    #[ORM\Column(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);
    }

Api控制器

<?php

namespace App\Controller;

use App\Entity\Calendar;
use DateTime;
use Doctrine\Persistence\ManagerRegistry;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

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 %}

如果他们告诉我一种改进或优化它的方法，我会接受建议，如果错误得到解决，那就更好了。
目标是即使日期发生变化并进行更新，也会保存每个事件

php

1条答案

按热度按时间
5sxhfpxr

5sxhfpxr1#

如果要使用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);

如果需要，还可以将此代码 Package 在异步函数中

赞(0）分享  回复(0）举报  2022-12-02
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com