Discussion :

[legrandse]

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 :


Mais en réalité j'aimerais bien qu'ils soient en paramètre "background" selon la doc FullCalendar :


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

[Pytet]

Bonjour,

Si je comprends bien, tu dois modifier ton tableau $start afin d'ajouter une propriété display sur chaque élément event avant de le retourner à ta vue.
Tu devrais pouvoir faire ca dans ton contrôleur avec une boucle ou via array_map :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
// avec une boucle : 
foreach($start as $key => $event) {
    $event->display = 'background';
    $start[$key] = $event;
}
 
// ou avec array_map : 
array_map(function($event) {
    $event->display = 'background';
}, $start);
 
dd($start);

[legrandse]

Merci c'est bien comme cela

[legrandse]

Je prolonge un peu ma réflexion sur l'affichage des événements dans FullCalendar.

Serait-il possible d'afficher plusieurs Events pour par exemple un calendrier de locations qui se définiraient comme ceci:
- une requête du controlleur affiche les réservations (start/end) en gris. (Données extraites d'une table "bookings")
- une seconde requête affiche les périodes de basse saison (start/end) avec un fond vert. (Données extraites d'une table "seasons")
- une troisième requête affiche les périodes de moyenne saison (start/end) avec un fond orange.
- une quatrième requête affiche les périodes de haute saison (start/end) avec un fond rouge.

Code :

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
 
 
 $start = Booking::where('arrival','>=',date('Y-m-d'))
            				 ->where('departure','>=',date('Y-m-d'))
            				 ->where('house_id',$house_id->id)
            				->get(['arrival as start','departure as end']);
 
 
			foreach($start as $key => $event) {
			    $event->display = 'background';
			    $event->color = '#999';
			    $start[$key] = $event;
			}
 
                       /*example pour une basse saison*/
			$seasonLow= Season::select('low_start as start', 'low_end as end')->get();	
     		         foreach($seasonLow as $key => $event) {
			    $event->display = 'background';
			    $event->color = '#9ff991';
			    $seasonLow[$key] = $event;
			}

Dans le controlleur je ne sais pas si c'est réalisable de fusionner le résultat des requêtes pour ne former qu'une seule qui pourra être lue par le calendrier.
Le calendrier à besoin de minimum ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
          start:
          end:
          display:
          color :

J'ai essayé comme ceci sans succès vu le foreach :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$fusion = $start + $seasonLow ;

Si vous avez une solution pour moi se serait cool

[Pytet]

Essaye d'utiliser la fonction array_merge() au lieu de l'opérateur + pour fusionner tes tableaux (conflit sur les clés numériques avec l'opérateur +).

[legrandse]

J'ai fais ceci :

Code :

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
 
 $start = Booking::where('arrival','>=',date('Y-m-d'))
            				 ->where('departure','>=',date('Y-m-d'))
            				 ->where('house_id',$house_id->id)
            				->get(['arrival as start','departure as end']);
 
 
			foreach($start as $key => $event) {
			    $event->display = 'background';
			    $event->color = '#999';
			    $start[$key] = $event;
			}
 
			$seasonLow= Season::select('low_start as start', 'low_end as end')->get();	
     		foreach($seasonLow as $key => $event) {
			    $event->display = 'background';
			    $event->color = '#9ff991';
			    $seasonLow[$key] = $event;
			}
 
			$fusion = array_merge($start, $seasonLow);
 
	  return view('/sign-up',compact('fusion'));

Mais il me retourne une erreur : array_merge(): Argument #1 must be of type array