javascript 完整的日历dayGridMonth不显示点和时间格式

lvmkulzt  于 2023-05-27  发布在  Java
关注(0)|答案(1)|浏览(197)

我想在事件之前显示时间格式。月视图中类似于“8 p-事件”的内容。

我正在使用fullcalendar 4和symfony 6!这我到目前为止

提前感谢!
这是我的日历代码与日历捆绑https://github.com/tattali/CalendarBundle

`<?php

public function __construct(EventRepository $eventRepository, UrlGeneratorInterface $router, ConfigDataService $configDataService) {
    $this->eventRepository = $eventRepository;
    $this->router = $router;
    $this->configDataService = $configDataService;
}

public static function getSubscribedEvents()
{
    return [
        CalendarEvents::SET_DATA => 'onCalendarSetData',
    ];
}

public function onCalendarSetData(CalendarEvent $calendar)
{
    $start = $calendar->getStart();
    $end = $calendar->getEnd();
    $filters = $calendar->getFilters();

    $service = $this->eventRepository->getCountEventsByService('active');

    $eventsRepository = $this->eventRepository->findEventsNotCancelled('cancelled');
    //dd($eventsRepository);
    foreach ($eventsRepository as $eventRepository) {
        if(!empty($eventRepository->getClient()->getFirstName()) || !empty($eventRepository->getClient()->getLastName())) {
            $name = $eventRepository->getClient()->getFirstName() . ' ' . $eventRepository->getClient()->getLastName();
        } else {
            $name = $eventRepository->getClient()->getEmail();
        }
        if($this->configDataService->get('eventByTime') == 'YES' && $eventRepository->getEventTime() != null) {
            $startTime = $eventRepository->getEventTime();
            $endTime = $eventRepository->getEventTimeEnd();
            if($startTime != null) {
                $eventStartDate = new \DateTime($eventRepository->getEventDate()->format('Y-m-d') . ' ' .$startTime->format('H:i:s'));
                //$eventStartDate = $eventRepository->getEventDate()->modify($startTime->format('H:i:s'));
                //$eventStartDate = $startTime->
            } else {
                $eventStartDate = null;
            }
            if($endTime != null) {
                $eventEndDate = new \DateTime($eventRepository->getEventDate()->format('Y-m-d') . ' ' .$endTime->format('H:i:s'));
            } else {
                $eventEndDate = null;
            }

            $calendarEvent = new Event(
                $name . ' Status: ' . ucfirst($eventRepository->getStatus()),
                $eventStartDate,
                $eventEndDate,
            );
        } else {
            //dd($eventRepository->getEventDate());
            $eventStartDate = $eventRepository->getEventDate();
            $eventEndDate = null;
             $calendarEvent = new Event(
                $name . ' <br> Status: ' . ucfirst($eventRepository->getStatus()),
                $eventStartDate,
                $eventEndDate,
            );
        }
        
        if(!empty($eventRepository->getService()->getColor())) {
            $color = $eventRepository->getService()->getColor();
            //var_dump($color);
            $calendarEvent->setOptions([
                'backgroundColor' => $color,
                'borderColor' => $color,
                'eventTextColor' => $color,
                'eventDisplay' => 'block',
            ]);
        } else {
            $calendarEvent->setOptions([
                'backgroundColor' => '#A4303F',
                'borderColor' => '#A4303F',
            ]);
        }

        if($this->configDataService->get('eventByTime') == 'YES') {
            $calendarEvent->setAllDay(false);
        }
        
        $calendarEvent->addOption(
            'url',
            $this->router->generate('app_event_show', [
                'id' => $eventRepository->getId(),
            ])
        );

        $calendar->addEvent($calendarEvent);
    }
}

}`
在我的webpack文件(app.js)中,我有

import { Calendar } ;
import dayGridPlugin ;
import timeGridPlugin ;
import listPlugin from ;
import allLocales from ;
document.addEventListener("DOMContentLoaded", () => {
  let calendarEl = document.getElementById("calendar-holder");

  let { eventsUrl } = calendarEl.dataset;

  let calendar = new Calendar(calendarEl, {
    editable: true,
    firstDay: 1,
    height: "auto",
    locales: allLocales,
    locale: 'en',
    eventSources: [
      {
        url: eventsUrl,
        method: "POST",
        extraParams: {
          filters: JSON.stringify({}) // pass your parameters to the subscriber
        },
        failure: () => {
          // alert("There was an error while fetching FullCalendar!");
        },
      },
    ],
    
    headerToolbar: {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek, listMonth"
    },
    initialView: "dayGridMonth",
    eventDisplay: "block",
    //displayEventTime: true,
    navLinks: true, // can click day/week names to navigate views
    plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
    timeZone: "UTC",
    eventContent: function(arg) {
      return {
        html: arg.event.title.replace(/\n/g, '<br>')
      }
    },
  });
  let lang = calendarEl.dataset.lang;
  calendar.render();
  calendar.setOption('locale', lang);
});

所以如果我取消注解displayEventTime仍然不工作。

7d7tgy0s

7d7tgy0s1#

您可以使用displayEventEnd设置告诉fullCalendar显示事件结束时间,该设置可以设置为truefalse。根据文档,dayGridMonth和dayGridWeek视图的默认值为false,timeGridWeek、timeGridDay和dayGridDay视图的默认值为true
这样你就能提供

displayEventEnd: true

在代码中作为日历选项,以便为所有视图启用它。
工作演示:https://codepen.io/ADyson82/pen/MWPxJym

相关问题