Discussion :

[guigui69]

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

[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...

[guigui69]

Bonjour,

voici mon code calendar:

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
    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 php :

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
<?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:


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

Code :

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

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 php :

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
 <?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:


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

[Toufik83]

Bonjour,

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

Code :

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

1
2
 var calendar = new FullCalendar.Calendar(calendarEl, {/* les options.....*/});
calendar.render();//obligatoire, sinon rien ne s'affiche.

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

Code :

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

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 :

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

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. 
      }
  });
}

[guigui69]

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 :

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
     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?

[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.

[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 .

[guigui69]

Bonjour,

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

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 :

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
   <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 :

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

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

[Toufik83]

...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).

[guigui69]

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 :

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

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:

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

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

[Toufik83]

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 :

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

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.