FullCalendar Add Evenement Ajax

Version imprimable

25/09/2023, 09h59
guigui69

FullCalendar Add Evenement Ajax

Bonjour à tous,

j'ai créé sur page chez champs (titre/description/dateheure debut/dateheure de fin) + affiche Calendar (fullcalendar)

Depuis mes champs input en Ajax j'arrive à enregistrer dans ma base de données un evenement pour Calendar.

par contre je ne sais comment faire pour afficher en directe dans le calendar

Pourriez-vous m'aiguiller pour la démarche ?

Merci par avance pour vos explication

guigui69
25/09/2023, 12h28
Toufik83

Bonjour,

Montrez nous le code JS que vous avez utilisé lors de l'affichage et aussi l'enregistrement dans la base de donnée...

2 pièce(s) jointe(s)

Bonjour,

voici mon code calendar:

Code:

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
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
			themeSystem: 'bootstrap5',
			events:  $.ajax({
    url :"ajax/list_evenement_calendrier.php",
        success: function(response) { 
            return response.data; }
			}),
			buttonText: {
    today:    'Aujourd\'hui',
    month:    'Mois',
    week:     'Semaine',
    day:      'Jour',
    list:     'Liste'
},
			locale: 'fr',
			firstDay:1,
			businessHours: true,
			businessHours: {
  // days of week. an array of zero-based day of week integers (0=Sunday)
  daysOfWeek: [ 1, 2, 3, 4 ,5], // Monday - Thursday
 
  startTime: '8:00', // a start time (10am in this example)
  endTime: '18:00', // an end time (6pm in this example)
},
allDayDefault: false,
minTime:'7:00',
          initialView: 'timeGridWeek',
		    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    }
 
        });
        calendar.render();
      });

la page php pour enregistrer en BDD:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php session_start();
 
	if(isset($_POST["ajouter"]) && isset($_POST["start_datetime"]) && isset($_POST["end_datetime"]) )
	{
		echo "22222222";
include ("../php/fonction.bdd.php"); 
$mysqli=	connexion_mysql();
 
if ($nb == null){
 
$queryinsert = mysqli_query($mysqli,"INSERT INTO `calendrier_data` (title ,description,start_datetime,end_datetime) values ('".$_POST['ajouter']."','".$_POST['ajouter']."','".$_POST['start_datetime']."','".$_POST['end_datetime']."')");
 
} else {
 
 
}
 
}
 
 
 
?>

Les données dans la base de données:
Pièce jointe 644420

J'ai aussi le probleme pour afficher dans le calendrier quand j'arrive dessus ceci:

Code:

1
2
3
4
5
		events:  $.ajax({
    url :"ajax/list_evenement_calendrier.php",
        success: function(response) { 
            return response.data; }
			}),

pour aller chercher les données du calendrier avec "list_evenement_calendrier.php" donc voici le code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 <?php
include ("../php/fonction.bdd.php"); 
$mysqli=	connexion_mysql();
$query = mysqli_query($mysqli,"SELECT `id_cd`,`title` as title,`description`,`start_datetime`,`end_datetime` FROM `calendrier_data`");
$rows = mysqli_fetch_all($query, MYSQLI_ASSOC);
foreach ($rows as $row) {
 
	     $data[] = array(
  'id'   => $row["id_cd"],
  'title'   => $row["title"],
  'start'   => $row["start_datetime"],
  'end'   => $row["end_datetime"]);
}
 
 
 
echo json_encode($data);
?>

voici les données que retourne:
Pièce jointe 644422

pourtant rien ne s'affiche, il doit me manquer un élément mais je bloque

Bonjour,

Après l'initialisation du plugin, vous devriez appeler la méthode render(); pour afficher les événements :
Code:

1 2 var calendar = new FullCalendar.Calendar(calendarEl, {/* les options.....*/}); calendar.render();//obligatoire, sinon rien ne s'affiche.
Citation:
Envoyé par guigui69
J'ai aussi le probleme pour afficher dans le calendrier quand j'arrive dessus ceci:
Code:

1 2 3 4 5 events: $.ajax({ url :"ajax/list_evenement_calendrier.php", success: function(response) { return response.data; } }),
Si tu veux récupérer les événements avec ajax, il faudrait l'appeler via une fonction de rappelle (callback) comme ça :
Code:

1 2 3 4 5 6 7 8 9 events: function(info, successCallback, failureCallback) { $.ajax({ "url":..., "dataType":"json", success:function(response){ successCallback(response); // utilisez le paramètre callback défini plus haut. } }); }

Bonjour,

j'ai modifier mon code (ligne 5) comme ceci: au niveau de events pour afficher les événements quand je charge ma page calendrier.
Code:

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 document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { themeSystem: 'bootstrap5', events: "ajax/list_evenement_calendrier.php" , buttonText: { today: 'Aujourd\'hui', month: 'Mois', week: 'Semaine', day: 'Jour', list: 'Liste' }, locale: 'fr', firstDay:1, businessHours: true, businessHours: { // days of week. an array of zero-based day of week integers (0=Sunday) daysOfWeek: [ 1, 2, 3, 4 ,5], // Monday - Thursday startTime: '8:00', // a start time (10am in this example) endTime: '18:00', // an end time (6pm in this example) }, allDayDefault: false, minTime:'7:00', initialView: 'timeGridWeek', headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay' } }); calendar.render(); });
Par contre je bloque pour pour afficher événement tout de suite créé. Sur ma page ou j'ai mon calendrier, j'ai un petit pavé pour ajouter un événement (dans une BDD) et donc dans le calendrier. La partie (fait en ajax) enregistrement BDD c'est OK (car si je fait F5 cela affiche bien ) par contre je ne sais pas faire pour lui dire de l'afficher de suite dans la calendrier sans faire de F5.

Est-ce possible? Vers quelle function, code je dois regarder?

01/10/2023, 21h57
mathieu

vous utilisez une bibliothèque que vous n'avez pas développée vous même pour gérer le calendrier.
vous devrez donc chercher dans la documentation de cette bibliothèque pour savoir si cet ajout d'un évènement est possible sans rafraichissement.
02/10/2023, 12h00
Toufik83

calendar.refetchEvents(), Lis la Doc ...

Si tu ajoutes l'événement avec ajax, tu n'a qu'à faire appel à cette méthode à l'intérieur de l'option success .

Bonjour,

justement j'avais trouvé l'option "calendar.refetchEvents()" mais par contre j'ai cette erreur comme ci il ne voit pas calendar:

Citation:

Uncaught TypeError: calendar.refetchEvents is not a function
success action2.js:51
jQuery 6
add_evenement action2.js:45
onclick calendrier.php:1

Alors que dans mon code:

Code:

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
   <script>
//var calendar;
      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
			themeSystem: 'bootstrap5',
			events: "ajax/list_evenement_calendrier.php" ,
			buttonText: {
    today:    'Aujourd\'hui',
    month:    'Mois',
    week:     'Semaine',
    day:      'Jour',
    list:     'Liste'
},
			locale: 'fr',
			firstDay:1,
			businessHours: true,
			businessHours: {
  // days of week. an array of zero-based day of week integers (0=Sunday)
  daysOfWeek: [ 1, 2, 3, 4 ,5], // Monday - Thursday
 
  startTime: '8:00', // a start time (10am in this example)
  endTime: '18:00', // an end time (6pm in this example)
},
allDayDefault: false,
minTime:'7:00',
          initialView: 'timeGridWeek',
		    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    }
 
        });
        calendar.render();
      });
 
    </script>
<script type="text/javascript" src="j/action2.js"> </script>

J'ai bien le code Calandar avec mon fichier action2.js

contenue de action2.js:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  function add_evenement()
 
  {
	//////// alert("ok"+$('input[type=radio][name=estceunvo]:checked').val());
   $.ajax({
   type: "POST",
   url: "./ajax/add_evenement_calendrier.php",
   data: "ajouter="+$("#ajouter").val()+"&start_datetime="+$("#start_datetime").val()+"&end_datetime="+$("#end_datetime").val(),
   success: function(html){
    $("#add_evenement").html(html);
	calendar.refetchEvents();
  }
});
  }

Il manque un élement dans mon code javascript pour pouvoir rappeler mon Calendar?

merci d'avance pour vos explications

guigui69

03/10/2023, 14h17
Toufik83

Citation:

Envoyé par guigui69

...mais par contre j'ai cette erreur comme ci il ne voit pas calendar:

Apparemment le 2éme script est exécuté avant le premier, car il n'est pas dans un contexte DOMContentLoaded comme le premier script.

Il existe aussi une autre manière pour faire appel aux méthodes de fullCalendar comme par exemple $('#calendar').fullCalendar('refetchEvents');.

Vous utilisez quelle version de fullCalendar ? j'ai fait mes testes avec la V6 (la nouvelle version).

Bonjour,

c'est cette version que j'utilise: <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js'></script>

J'ai ma modification dans mon fichier action2.js
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function add_evenement() { //////// alert("ok"+$('input[type=radio][name=estceunvo]:checked').val()); $.ajax({ type: "POST", url: "./ajax/add_evenement_calendrier.php", data: "ajouter="+$("#ajouter").val()+"&start_datetime="+$("#start_datetime").val()+"&end_datetime="+$("#end_datetime").val(), success: function(html){ $("#add_evenement").html(html); //calendar.refetchEvents(); $('#calendar').fullCalendar('refetchEvents'); } }); }
mais j'ai toujours:

Citation:

Uncaught TypeError: $(...).fullCalendar is not a function

C'est DOMContentLoaded qui pose problème ? Le placement de ma ligne action2.js est mal placé?

Bonjour,

Le problème est au niveau de la déclaration de var calendar (Portée de variable) à l'intérieur de DOMContentLoaded, il faudrait la déclarer avant, puis après l'initialiser à l'intérieur comme ça :
Code:

1 2 3 4 5 var calendar;//ici d'abord document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); //et l'initialisation sans le mot var : calendar = new FullCalendar.Calendar(calendarEl, {.......});
Comme ça la variable sera reconnue par tous les scripts de la même page et aussi ceux à l'extérieur.

Pour mieux t'expliquer ce qui se passe, l'événement DOMContentLoaded n'est pris en considération qu'après que le document soit chargé (html + css et JS sauf les scripts n'existant pas dans DOMContentLoaded), et donc puisque le 2éme script est chargé directement, pour lui la variable calendar n'a pas encore été définie, et à ce moment là JS croit qu'il doit chercher un élément HTML ayant l'id calendar, ce qui vaut à l'élément HTML id='calendar', et c'est pour ça que l'erreur est déclenchée lorsque tu essaies d'appliquer la méthode refreshEvent() sur un élément HTML.