I use https://github.com/tattali/CalendarBundle#1-download-calendarbundle-using-composer I work with symfony4.2.9
I took almost the same code(just putted dates in the events) and I can't see the events in the calendar. No error, no troubleshooting with Ajax, but nothing append. The calendar is displayed but empty
namespace App\EventListener;
use CalendarBundle\Entity\Event;
use CalendarBundle\Event\CalendarEvent;
class CalendarListener
{
public function load(CalendarEvent $calendar)
{
$start = $calendar->getStart();
$end = $calendar->getEnd();
$filters = $calendar->getFilters();
// You may want to make a custom query to fill the calendar
$calendar->addEvent(new Event(
'Event 1',
new \DateTime( '2019-06-05'),
new \DateTime( '2019-06-05')
));
// If the end date is null or not defined, it creates a all day event
$calendar->addEvent(new Event(
'All day event',
new \DateTime( '2019-06-06')
));
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome!</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/app.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.1.0/main.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.1.0/main.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.1.0/main.min.css">
<script src="/js/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-">
<a class="navbar-brand" href="/">Share</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/account/dashboard"><i class="fas fa-chart-line fa-2x"></i> Tableau de bord</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/dashboard/showMines"><i class="fas fa-hands-helping fa-2x"></i> offres d'atelier <span class="badge-pill badge-danger dash">3</span> </a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/dashbord/books"><i class="fas fa-graduation-cap fa-2x "></i> cours pris<span class="badge-pill badge-danger dash">2</span></a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/dashboard/courses"><i class="fas fa-chalkboard-teacher fa-2x"></i> cours donnés</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/dashboard/calendar"><i class="fas fa-calendar-alt fa-2x"></i> mon agenda</a>
</li>
</ul>
<ul class="navbar-nav ml-auto align-items-center">
<li class="nev-item">
<a href="/" class="nav-link" ><i class="fas fa-home fa-2x"></i></i> Retour à l'accueil</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" id="accountDropdownlink" data-toggle="dropdown">
<img src="https://randomuser.me/api/portraits/women/56.jpg" alt="Avatar de Cécile" class="avatar avatar-small" class="mr-2"><span class="ml-2 mt-5">Cécile</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="accountDropdownlink">
<a class="dropdown-item" href="/activity/new">Créer une activité</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/account">Mon compte</a>
<a class="dropdown-item" href="/account/edit">Modifier mon profil</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/logout">Déconnexion</a>
</div>
</li>
</ul>
</div>
</nav></div>
<div class="container mt-5">
<div id="calendar-holder"></div>
</div>
<footer class="bg-warning text-center py-3 mt-3">
</footer>
<script src="/js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
var calendarEl = document.getElementById('calendar-holder');
var calendar = new FullCalendar.Calendar(calendarEl, {
//locale: 'fr',
defaultView: 'dayGridMonth',
editable: true,
eventSources: [
{
url: "/fc-load-events",
method: "POST",
extraParams: {
// filters: JSON.stringify({})
},
failure: () => {
alert("There was an error while fetching FullCalendar!");
},
},
],
header: {
locale:'fr',
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay',
},
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ], // https://fullcalendar.io/docs/plugin-index
timeZone: 'Europe/Paris',
});
calendar.setOption('locale', 'fr');
calendar.render();
});
</script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.1.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@4.1.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.1.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.1.0/main.min.js"></script>
I expect to see my events :), if someone has an idea about what's wrong
