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.