Bonjour à tous,

J'ai un soucis pour afficher correctement les événements pris hors de Mysql dans un calendrier FullCalendar.
Actuellement ils s'affichent comme ceci :
Nom : Capture.PNG
Affichages : 441
Taille : 20,7 Ko

Mais en réalité j'aimerais bien qu'ils soient en paramètre "background" selon la doc FullCalendar :
Nom : Capture2.PNG
Affichages : 413
Taille : 21,3 Ko

Voici le script d'intégration du calendrier dans lequel je converti le résultat de la requête en JSON @json($start)
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script>
 
      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('fullCalendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth',
          height : 500,
          initialDate: '2022-08-10',
                  
                  events : @json($start),
                
         /*
                  events: [
        
        {
          start:'2022-08-26',
          end: '2022-08-28',
          overlap: false,
          display: 'background'
        },
        {
          start: '2022-09-05',
          end: '2022-09-09',
          overlap: false,
          display: 'background'
        },
               
      ]*/
          
        });
        calendar.render();
      });
 
    </script>

et un extrait de mon controlleur :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
$start = Booking::where('arrival','>=',date('Y-m-d'))
            				 ->where('departure','>=',date('Y-m-d'))
            				->get(['arrival as start','departure as end']);
 
	//dd($start);
 
	  return view('/sign-up',compact('start'));
Le problème se situe au niveau de l'intégration de display: 'background' car la conversion de la variable $start en JSON donne bien ceci:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
events : [{"start":"2022-08-26","end":"2022-08-28"},{"start":"2022-09-05","end":"2022-09-09"}],
Pourriez-vous svp m'aider à ce sujet ?

Merci d'avance