Bonjour à tous mes amis, j espère que tout va bien pour vous je suis nouveau sur ce forum et je suis un vrai débutant en php. Je dois réaliser un calendrier mensuel, un planning qui doit etre relié a une base de données. Je sais qu il existe beaucoup de calendrier deja fait qui pourrait m'aider mais je n'ai pas trouvé. Est ce que quelqu un pourrait me donner un tuto ou un lien pour savoir comment bien commencer ? je sais que ca fais flemmard de demander sans avoir fourni du code deja fait de main mais j'ai pas trop envie de me lancer dans un truc que je mettrai surement 1 semaine meme plus à faire alors qu il existe déja.

Merci beaucoup de votre aide

Salut,

Tu as celui que perso j'utilise je le trouve vraiment nickel avec de la doc et tout et tout

https://fullcalendar.io/

oui j'avais déja vu ce beau calendrier mais est ce que tu peux me dire si il est possible de changer les champs start et end et mettre mes propres champs de ma propre base ? je trouve pas vraiment le ficher ou se trouve ces champs

Cad ? 

Changer les champs start et end ? ce sont des dates que tu récupère depuis ta bdd ? 

Si c'est le cas :

https://fullcalendar.io/docs/event_data/events_function/

En gros tu récupèe tes datas de ta bdd tu les converti en json et ensuite tu envoi tout ça au calendrier

oui je pense que le full calendar attend les champs start end et ID il me semble ? et j'aimerai bien mettre les noms de mes champs car oui je pourrai modifier mes champs de ma base mais ca prendrai beaucoup trop de temps vu que j'ai quand deja du code avec ces champs

JE suis désolé je ne comprend pas ce que tu veux faire...

Est-ce que tu peux décrire un peu plus stp ?

$('#calendar').fullCalendar({
    events: function(start, end, timezone, callback) {
        $.ajax({
            url: 'myxmlfeed.php',
            dataType: 'xml',
            data: {
                // our hypothetical feed requires UNIX timestamps
                start: start.unix(),
                end: end.unix()
            },
            success: function(doc) {
                var events = [];
                $(doc).find('event').each(function() {
                    events.push({
                        title: $(this).attr('Titre'),
                        start: $(this).attr('DateActivite') // will be parsed
                    });
                });
                callback(events);
            }
        });
    }
});

regarde j'ai essayé ca tu vois et rien ne s'affiche, j'ai juste changé ces deux lignes

title: $(this).attr('Titre'),
start: $(this).attr('DateActivite') // will be parsed

c'est ceux là qu'il faut changer ?

Alors la comme ça oui mais ce qui serait bien c'est que tu fasses un console.log(doc) pour voir ce qu'il contient on y verra sans doute plus clair

console.log(doc)? je n'ai jamais utilisé cette commande on doit mettre ça ou ?

Si je reprend ton code :

$('#calendar').fullCalendar({
    events: function(start, end, timezone, callback) {
        $.ajax({
            url: 'myxmlfeed.php',
            dataType: 'xml',
            data: {
                // our hypothetical feed requires UNIX timestamps
                start: start.unix(),
                end: end.unix()
            },
            success: function(doc) {
console.log(doc);
                var events = [];
                $(doc).find('event').each(function() {
                    events.push({
                        title: $(this).attr('Titre'),
                        start: $(this).attr('DateActivite') // will be parsed
                    });
                });
                callback(events);
            }
        });
    }
});

Juste dans ton success et ensuite tu ouvres ta console js dans ton navigateur pour voir ce qu'il y a dedans quand tu lances ta page

cela n'affiche absolument rien dans la console ><

Est-ce que tu peux nous montrer ton fichier myxmlfeed.php ?

<?php
// liste des événements
 $json = array();
 // requête qui récupère les événements
 $requete = "SELECT * FROM activites ORDER BY IDActivite";
 
 // connexion à la base de données
 try {
 $bdd = new PDO('mysql:host=localhost;dbname=gestionplanning', 'root', 'root');
 } catch(Exception $e) {
 exit('Impossible de se connecter à la base de données.');
 }
 // exécution de la requête
 $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
 
 // envoi du résultat au success
 echo json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));
 
?>

Tu envoi du json a ton caldendrier mais dasn ton script tu précises que tu reçois du xml...

Essaye de changer ça : 

dataType: 'xml',

par ça 

dataType: 'json',

ou si ça donne rien enlève la ligne carrément 

Tu es bien sur que $resultat te renvoi bien qqch ? 

oui le resultat me renvoie toute mes données de la base et meme en enlevant la ligne il ne m'affiche rien mais page blanche rien du tout a mon avis y a truc que j'ai fais de la merde mais quoi

Et tu n'as aucune erreur dans ta console ? 

Et si tu regarde dans network l'appel à myxmlfeed.php ça te dis quoi ? 

bah que se soit dans network ou console il n'y a rien

Sa ta page qui renvoi les données de ta bdd ne te renvoi rien c'est que $resultat est probablement vide.

Essaye dans ton ficher xmlfeed de faire juste un echo "test"; et de regarder dans network si tu le vois en actualisant la page 

il y a rien dans le network, pourtant la commande

echo json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));

m'affiche bien le resultat de la requete

hmmm....

Tu ouvres bien le network avant d'actualiser ta page ? 

maintentant il est marqué "une navigation s'est produite" c'est tout

euh alors la.... Tu es sous chrome ?

tiens : 

HTML1300

"Une navigation s’est produite"

Une nouvelle page a été atteinte ou la page active a été actualisée.

Il s’agit d’un message d’information et non d’une erreur. Pour filtrer ce message, cliquez avec le bouton droit sur le volet de la console, cliquez sur Filtre, puis désactivez la case à cocher Info.

-
Edité par Condkoï 24 mars 2017 à 16:01:21

non je suis sur edge

oulah un navigateur microsoft nnnnnnnnoooooooonnnnnnn !!

Bon trève de plaisanterie je le connais pas celui la mais je suppose que tu as les memes outils que sous chrome ? 

oui c'est exactement le meme ah mon avis le problème vient de cette page :

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script>

	$('#calendar').fullCalendar({
    events: function(start, end, timezone, callback) {
        $.ajax({
            url: 'event.php',
            dataType: 'php',
            data: {
                // our hypothetical feed requires UNIX timestamps
                start: start.unix(),
                end: end.unix()
            },
            success: function(doc) {
                var events = [];
                $(doc).find('event').each(function() {
                    events.push({
                        title: $(this).attr('title'),
                        start: $(this).attr('start') // will be parsed
                    });
                });
                callback(events);
            }
        });
    }
});

</script>
<style>

	body {
		margin: 40px 10px;
		padding: 0;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		font-size: 14px;
	}

	#calendar {
		max-width: 900px;
		margin: 0 auto;
	}

</style>
</head>
<body>

	<div id='calendar'></div>

</body>
</html>

parce que ça ne m'affiche vraiement rien page blanche

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />

<script src='../lib/jquery.min.js'></script>

<script src='../lib/moment.min.js'></script>

<script src='../fullcalendar.min.js'></script>

<style>
 
    body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }
 
    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }
 
</style>
</head>
<body>
 
    <div id='calendar'></div>
 <script>
 
    $('#calendar').fullCalendar({
    events: function(start, end, timezone, callback) {
        $.ajax({
            url: 'event.php',
            dataType: 'php',
            data: {
                // our hypothetical feed requires UNIX timestamps
                start: start.unix(),
                end: end.unix()
            },
            success: function(doc) {
                var events = [];
                $(doc).find('event').each(function() {
                    events.push({
                        title: $(this).attr('title'),
                        start: $(this).attr('start') // will be parsed
                    });
                });
                callback(events);
            }
        });
    }
});
 
</script>
</body>
</html>

Et comme ça ?

EDIT : En fait essaye de charger jquery avant moment.js !

-
Edité par Condkoï 24 mars 2017 à 16:10:46

ah on avance maintenant le calendrier s'affiche mais sans rien dedans

edit: deja ya ca je sais pas pourquoi j'avais mis 'php'

url: 'php/event.php',
     dataType: 'json',

mais ca n'affiche toujours rien

-
Edité par LoloMsn 24 mars 2017 à 16:14:48

Bon c'est deja un debut

Ok ton fichier qui fais l'appel a ta base de données c'est event.php maintenant ? 

 EDIT : Et sinon essaye d'enlever le datatype carrement 

-
Edité par Condkoï 24 mars 2017 à 16:15:48

oui j'ai changé de nom au fichier je viens d'enlever le datatype mais ca ne change rien

par contre quand je met console.log(doc), il me marque ceci :

[{"Titre":"cinema8","DateActivite":"2017-03-22"},{"Titre":null,"DateActivite":null},{"Titre":null,"DateActivite":null},{"Titre":"Match","DateActivite":null},{"Titre":"","DateActivite":null},{"Titre":"","DateActivite":null},{"Titre":"","DateActivite":null},{"Titre":"cinema","DateActivite":null},{"Titre":"Test","DateActivite":null}]  default.html:45:17

Error: Syntax error, unrecognized expression: [{"Titre":"cinema8","DateActivite":"2017-03-22"},{"Titre":null,"DateActivite":null},{"Titre":null,"DateActivite":null},{"Titre":"Match","DateActivite":null},{"Titre":"","DateActivite":null},{"Titre":"","DateActivite":null},{"Titre":"","DateActivite":null},{"Titre":"cinema","DateActivite":null},{"Titre":"Test","DateActivite":null}]

Ok bon tu as tes données déja :) 

Par contre tu fais un $(doc).find('event').each(function()

Mais dans ton retour json il n'y a pas de partie nommée event 

Il faut que ton retour soit composé de cette maniere 

events: [ { title: 'Event1', start: '2011-04-04' }, { title: 'Event2', start: '2011-05-05' } // etc... ],

Donc avant de renvoyer tes données faut que tu construise un tableau de cette maniere avant de le retourner en json

 Tiens voila un code que j'ai fais pour que tu vois 

$('#calendar').fullCalendar({
			header: {
				left: 'prev',
				center: 'title',
				right: 'next'
			},
			eventBackgroundColor: "gainsboro",
			textColor: 'black',
			monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet',
 			'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
			lang: 'fr',
			eventSources: ["gestion/ajax_event_calendrier.php?action=get_fo"],
			eventRender: function(event, element) {
				var start_fr = moment(event.start).format('YYYY-MM-DD');
            	var day = moment(event.start).format('dddd');

            	var text = element.find('.fc-title').text();
            	console.log(text);
           		if (day == "mercredi" && text == "Mercredi découverte") {
	            	element.find('.fc-title').append("<br/><a href='#' title='' class='infos_mer' id='"+start_fr+"'><b>Plus d'infos</b></a><br />");
            	}else{
            		var form_billet = "";
					form_billet +="<form action=\"<?php echo str_replace("-s1-","-s2-", $url_en_cours[0]); ?>\" method=\"POST\" name=\"choix_date_form\" id=\"choix_date_form\">";
					form_billet +="<input type=\"submit\" name=\"submit_choix\" id=\"submit_choix\" value=\"Commander\" style=\"  height: 13px;\"/>";
					form_billet +="<input type=\"hidden\" name=\"step\" value=\"2\" />";
					form_billet +="<input type=\"hidden\" name=\"choix_date\" value='"+start_fr+"' />";
					form_billet +="</form>";
	            	element.find('.fc-title').append("<br/><a href='#' title='' class='infos' id='"+start_fr+"'><b>Plus d'infos</b></a><br />"+form_billet+"<");
            	}
        	},
		});

Et mes datas de la bdd je les ai mise comme ça

$requete = "SELECT id,title, start, end FROM horaire ORDER BY id";
			$resultat = mysql_query($requete);while($tab_resultat = mysql_fetch_assoc($resultat)){
				$json[] = $tab_resultat;
			}
			// on renvoi le resultat
			echo json_encode($json);

-
Edité par Condkoï 24 mars 2017 à 16:32:26