我想在事件之前显示时间格式。月视图中类似于“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仍然不工作。
1条答案
按热度按时间7d7tgy0s1#
您可以使用displayEventEnd设置告诉fullCalendar显示事件结束时间,该设置可以设置为
true
或false
。根据文档,dayGridMonth和dayGridWeek视图的默认值为false
,timeGridWeek、timeGridDay和dayGridDay视图的默认值为true
。这样你就能提供
在代码中作为日历选项,以便为所有视图启用它。
工作演示:https://codepen.io/ADyson82/pen/MWPxJym