Affichage d'un événement de calendrier

**eiffel-mtl** · 13/02/2025, 00h33

Bonjour à tous,

J'ai un script AJAX qui me permet d'afficher un calendrier (les données provienne d'une bd géré par un autre fichier.. J'aimerais, lorsque l'utilisateur clique sur un événement, que le détail de l'événement s'affiche dans un popup style lightbox. Actuellement, lorsque l'utilisateur clique sur l'événement, celui-ci s'efface. Je suis nouveau avec AJAX, donc je ne sais pas trops comment faire.

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
  $(document).ready(function() {
 
  var date = new Date();
 
  var d = date.getDate();
 
  var m = date.getMonth();
 
  var y = date.getFullYear();
 
 
 
  var calendar = $('#calendar').fullCalendar({
 
   editable: false,
 
   header: {
 
    left: 'prev,next today',
 
    center: 'title',
 
    right: 'month,agendaWeek,agendaDay'
 
   },
 
 
 
   events: "events.php",
 
 
 
   eventRender: function(event, element, view) {
 
    if (event.allDay === 'true') {
 
     event.allDay = true;
 
    } else {
 
     event.allDay = false;
 
    }
 
   },
 
 
 
 
 
   editable: true,
 
 
   eventClick: function(event) {
 
 
	$.ajax({
 
		type: "POST",
 
		url: "event.php",
 
		data: "&id=" + event.id,
 
		 success: function(json) {
 
			 $('#calendar').fullCalendar('removeEvents', event.id);
 
			  alert("Updated Successfully");}
 
	});
 
 
  	}
 
 
 
  });
 
 
 
 });

Merci de votre aide

**eiffel-mtl** · 13/02/2025, 01h20

À noter, ça pourrait être uniquement un <a href> À partir de là c'est facile d'afficher un lightbox

**Toufik83** · 13/02/2025, 15h12

Bonjour,

L'événement s'efface parce que vous le supprimez avec cette ligne $('#calendar').fullCalendar('removeEvents', event.id);
Modifiez le rappel success et rajoutez aussi le rappel error pour gérer les erreurs comme suite :

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
24
25
26
27
28
29
30
31
32
33
34
35
success: function(response) {  // Renommé en 'response' pour plus de clarté
    // Créer ou afficher la lightbox
    let lightbox = $('#lightbox'); // Assurez-vous d'avoir un élément avec l'id "lightbox" dans votre HTML
 
    if (lightbox.length === 0) { // Si la lightbox n'existe pas, on la crée
            lightbox = $('<div id="lightbox"></div>');
            $('body').append(lightbox);
    }
 
    // Remplir le contenu de la lightbox avec les détails de l'événement
    lightbox.html(response); // 'response' contient le HTML ou les informations de l'événement
 
    // Afficher la lightbox (utilisez CSS pour la styliser)
    lightbox.show();
 
    // Gestionnaire pour fermer la lightbox (croix, clic en dehors, etc.)
    let closeButton = $('<span class="close-lightbox">&times;</span>'); // Stylez cette classe en CSS
    lightbox.prepend(closeButton); // Ajoute la croix de fermeture
 
    closeButton.click(function() {
       lightbox.hide();
       lightbox.empty(); // Optionnel : vider le contenu de la lightbox
    });
 
    lightbox.click(function(event) {
       if (event.target === lightbox[0]) { // Fermer si on clique sur le fond (pas le contenu)
              lightbox.hide();
              lightbox.empty(); // Optionnel
       }
    });
},
error: function(xhr, status, error) {
     console.error("Erreur AJAX:", status, error);
     alert("Une erreur s'est produite lors de la récupération des détails de l'événement.");
}

Puis le CSS de lightbox :

Code css :

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
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
  display: none; /* Masquée par défaut */
  z-index: 1000; /* Pour être au-dessus du calendrier */
  overflow-y: auto; /* Pour le contenu long */
}
 
#lightbox > * { /* Style pour le contenu de la lightbox */
  background-color: white;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Ajustez la largeur */
  max-width: 600px; /* Largeur maximale */
  box-sizing: border-box;
}
 
.close-lightbox {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
  color: #333;
}

**eiffel-mtl** · 13/02/2025, 15h45

Merci, ça marche. Dernier point, j'ai un champ dans ma bd avec le code iframe de location Google Map. Par défaut ça affiche le texte, comment affiché la map au lieu du champ textarea?

Merci encore

**Toufik83** · 13/02/2025, 16h47

Bonjour,

Supposons que vous avez une variable contenant le code iframe de la base de données

Code :

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

var iframeCode = '<iframe src="https://www.google.com/maps/embed?..." width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>';

Sélectionnez le div #map-container et insérez le code iframe à l'intérieur

Code :

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

$("#map-container").html(iframeCode);

**eiffel-mtl** · 13/02/2025, 17h05

Le div #map-container? L'affichage du contenu s'affiche via un formulaire

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?php
include 'templates/header.php';
include 'templates/navbar.php';
include 'includes/functions.php';
?>
<div class="container mt-5">
    <h1>Event Calendar</h1>
    <div id="calendar"></div>
</div>
 
<!-- Modal for adding/editing events -->
<div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="eventModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="eventForm">
                    <input type="hidden" id="eventId">
                    <div class="form-group">
                        <label for="eventTitle">Event Title</label>
                        <input type="text" class="form-control" id="eventTitle" required>
                    </div>
                    <div class="form-group">
                        <label for="startTime">Start Time</label>
                        <input type="text" class="form-control" id="startTime" required>
                    </div>
                    <div class="form-group">
                        <label for="endTime">End Time</label>
                        <input type="text" class="form-control" id="endTime" required>
                    </div>
                    <div class="form-group">
                        <label for="description">Description</label>
						<textarea class="form-control" id="description" required></textarea>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
 
<?php include 'templates/footer.php'; ?>

**Toufik83** · 13/02/2025, 17h25

Vous voulez afficher la carte google map à l'intérieur de cette fenêtre modale <div class="modal fade" id="eventModal"....></div> ?

Montrez nous d'abord comment vous récupérez les lignes de la bdd...

**eiffel-mtl** · 13/02/2025, 17h56

Voici les fichiers que j'ai, la récupération n'est pas directement en php. L'ajout, la suppression, la modification ne seront pas pris en compte. Il y aura seulement l'affichage (le crud se fera différemment).

**Toufik83** · 13/02/2025, 18h03

Les fichiers PHP ne sont pas téléchargeables, quand je clique dessus un message s'affiche "File not found", sauf le JS qui se télécharge.

Essayez de compresser le projet dans un RAR ou ZIP (y compris la bdd) et mettez le dans la discussion.

**eiffel-mtl** · 13/02/2025, 18h17

C'est fait

**Toufik83** · 13/02/2025, 18h25

Ok, les fichiers sont là, mais pas la bdd.

Il va falloir m'aider un peu pour que je puisse utiliser la même bdd que la votre et résoudre le souci.

Pour ceci, allez dans phpMyAdmin, appuyiez sur la bdd puis cliquez sur Exporter, un fichier SQL se télécharge, mettez le dans le file de la discussion.

**eiffel-mtl** · 13/02/2025, 18h27

Voilà

**Toufik83** · 13/02/2025, 19h02

La valeur de la colonne Place est coupée (truncated), ceci dit que le lien de l'iframe n'est pas complet et donc invalide même si vous essayez de le récupérer depuis la bdd.

Regardez à quoi ressemble la valeur <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11167.10256160412!2d-73.5117312!3d45.59505479999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cc91dbaab9f8af3%3A0xf565c5305005af2d!2sMetro%20Plus!5e0!3m2!1sfr!2sca!4v17394546800

Ils manquent la fermeture " de l'attribut src et aussi le > et celle de </iframe>

Pourquoi ne pas stocker seulement le lien dans la bdd, et lorsque vous le récupérez rajoutez manuellement un iframe dans le html de map-container ?

Code :

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

$("#map-container").html("<iframe src='"+event.place+"'></iframe>");

D'abord il faut rajouter la valeur de la colonne Place dans fetch_events.php

Code php :

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

1
2
3
4
5
6
7
8
9
10
foreach ($events as $event) {
    $data[] = [
        'id' => $event['id'], // Event ID
        'title' => $event['title'], // Event title
        'start' => $event['start_datetime'], // Event start date and time
        'end' => $event['end_datetime'], // Event end date and time
        'description' => $event['description'], //Virgule ICI,  Event description
	'place'=>$event['Place'] //ICI , Event place iframe...
    ];
}

Puis rajoutez le div <div id="map-container"></div> dans la fenêtre modale ligne 39

Code html :

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

1
2
3
<div class="form-group">
<div id="map-container"></div>
</div>

Dernière étape, dans assets/js/fichier.js après la ligne 47

Code :

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

1
2
3
4
5
6
7
8
9
10
11
eventClick: function(event) {
            // Populate the form inputs with the event data
            $('#eventId').val(event.id);
            $('#eventTitle').val(event.title);
            $('#description').val(event.description);
            $('#startTime').val(moment(event.start).format("YYYY-MM-DD HH:mm:ss"));
            $('#endTime').val(moment(event.end).format("YYYY-MM-DD HH:mm:ss"));
	    $("#map-container").html(event.place);// ICI
            // Show the modal for editing the event
            $('#eventModal').modal('show');
        }

Maintenant le code est OK, mais le problème de la longueur est toujours là, essayez de mettre une valeur moins longue dans la colonne Place...

**eiffel-mtl** · 13/02/2025, 19h32

Merci, ça marche. La première chose que j'ai fais c'est changé la taille du champ "place" dans la BD (je l'ai mis à "mediumText"), ensuite j'ai fait comme indiqué. Ça marche #1. Il me reste uniquement à jouer avec le CSS. Merci encore.

Affichage d'un événement de calendrier

AJAX

Discussions similaires

Partager

Partager