Je voudrais intégrer jQuery fullcalendar dans mon site Web PHP, mais je ne sais pas comment gérer l'événement et comment utiliser les données JSON de MySQL.Intégration de jQuery fullcalendar dans le site Web PHP
Tout conseil serait apprécié.
Assurez-vous que votre PHP peut sortir le f ollowing HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$('#example').calendar();
});
</script>
</head>
<body>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script src="http://dev.jquery.com/view/trunk/plugins/calendar/jquery-calendar.js"></script>
<input type="text" id="example" value="Click inside me to see a calendar" style="width:300px;"/>
</body>
</html>
Voici a sample comment vous pouvez le faire, en utilisant json_encode:
$(document).ready(function() {
$('#calendar').fullCalendar({
draggable: true,
events: "json_events.php",
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});
Et voici le code PHP:
<?php
$year = date('Y');
$month = date('m');
echo json_encode(array(
array(
'id' => 1,
'title' => "Event1",
'start' => "$year-$month-10",
'url' => "http://yahoo.com/"
),
array(
'id' => 2,
'title' => "Event2",
'start' => "$year-$month-20",
'end' => "$year-$month-22",
'url' => "http://yahoo.com/"
)
));
?>
Merci beaucoup pour votre commentaire. Mais je pense que vous avez un malentendu ou je ne l'ai pas décrit très clairement. Je veux ajouter le plugin jquery weekcalendar et il y a un échantillon pour cela. Tout est en session là-bas.Mais je veux le faire fonctionner avec la base de données mysql. Merci beaucoup !!!!!!! –
selon le serveur assurez-vous que vous avez 'date_default_timezone_set ('America/YOUR_TZ');' avant l'appel 'date (XXX)' – roberthuttinger
Je ne connais pas jquery. Mais je pense le problème est que vous ne prenez pas en compte la nature asynchrone d'Ajax. À moins que fullCalendar() ne fasse quelque chose de très étrange (déclenche une requête Ajax et attend la réponse), vous ne pourrez pas utiliser une source externe dans la fonction de cette façon, car fullCalendar aura fini de s'exécuter le moment où une réponse revient du serveur. Il ne semble pas y avoir un exemple clair de ce que vous essayez de faire sur la page Web du calendrier de la semaine, mais je suis sûr que ce dont vous avez besoin est de créer le calendrier sans les événements, mais avec un rappel défini pour ajouter événements; puis d'une manière ou d'une autre, éteindre l'appel externe.
Merci pour votre message. Vous avez en quelque sorte indiqué mon problème. En fait, je ne peux pas ajouter/éditer/supprimer les événements et ne peux pas récupérer les données de mysql à la manière de json. Je vais essayer d'arranger et de le résoudre. Et merci. –
Je pense que vous avez le même problème que j'ai. J'ai cherché sur le web pour savoir comment configurer le DateTime afin que le javascript fullCalendar l'interprète correctement. (Cette page avait quelques bons indices à cela: http://blog.stevenlevithan.com/archives/date-time-format).
Je l'ai posté sur la page fullCalendar en espérant que le créateur ou quelqu'un d'autre ferait la lumière sur le sujet.
==================== NUMÉRO DESCRIPTION ====================
Quelles étapes vont reproduire le problème?
[{"id":2, "title":"title of 2","start":"2009-11-17T10:00:00" ,"end":"2009-11-17T11:01:00","url":"?eventID=2"}]
Quel est le résultat attendu? Que voyez-vous à la place?
Quelle version du produit utilisez-vous? Sur quel système d'exploitation?
S'il vous plaît fournir toute information supplémentaire ci-dessous. J'utilise une page ASPX pour aller chercher les événements du calendrier. Je pense que il y a quelque chose de mal avec le format du JavaScript DateTime objet que je suis de retour dans le JSON et que cela est à l'origine du fullcalendar à interpréter les événements comme fullDayEvents. Le format que j'expédie à JSON est: 2009-11-17T11:01:00.
J'ai eu le même problème et j'ai juste découvert comment le faire fonctionner. Voici le code que vous devez utiliser dans votre fichier php:
$query = "select * from events where accountNo = '$accountNo'";
$res = mysql_query($query) or die(mysql_error());
$events = array();
while ($row = mysql_fetch_assoc($res)) {
$start = "2010-01-08T08:30"";//Here you have to format data from DB like this.
$end = "2010-01-08T08:30";//This format works fine
$title = $row['firstName']." ".$row['lastName'];
$eventsArray['id'] = $row['id'];
$eventsArray['title'] = $title;
$eventsArray['start'] = $start;
$eventsArray['end'] = $end;
$eventsArray['allDay'] = "";
$events[] = $eventsArray;
}
echo json_encode($events);
J'espère que cela aide :).
"2010-02-11 11:00:00" le format fonctionne bien pour spécifier l'heure pour moi (sans "T" à l'intérieur), la clé de la solution est de définir l'attribut "allDay" d'un événement à chaîne vide.
Ooh Merci, mec, sauvez-moi – chhameed
Hé, je n'ai pas utilisé votre code ci-dessus, mais en json_events.php la valeur par défaut d'un, il y a « [ » dans le début de la production de php et « ] » à la fin.
Cet exemple fonctionne:
$sql= "SELECT id, title, start, DATE_FORMAT(start, '%Y-%m-%dT%H:%i') AS startDate
FROM kalender
ORDER BY startDate DESC";
$res = mysql_db_query($db, $sql, $conn) or die(mysql_error());
$events = array();
//important ! $start = "2010-05-10T08:30"; iso8601 format !!
while ($row = mysql_fetch_assoc($res)) {
$eventArray['id'] = $row['id'];
$eventArray['title'] = $row['title'];
$eventArray['start'] = $row['startDate'];
$events[] = $eventArray;
}
echo json_encode($events);
la sortie de l'écho d'un événement doit être dans ce format:
$('#calendar').fullCalendar({
events: [{
title: 'Awesome Event Title',
start: new Date($start_year, $start_month, $start_day), or end: new Date(y, m, d),
end: new Date($end_year, $end_month, $end_day) or end: new Date(y, m, d)
}]
});
mettre en œuvre cette façon et il fonctionne très bien
$result = mysql_query("SELECT * FROM eventoform",$conexion);
$array = array();
$i = 0;
while ($row = mysql_fetch_array($result)) {
$array[$i]=array("id"=>$row["id_evento"],"title"=>$row["NombreEvento"],"start"=>$row["FechaInicio"]." ".$row["HoraInicio"],"allDay"=>false,"description"=>$row["description"],"editable"=>true);
$i++;
}
echo json_encode($array);
En PHP - JSON:
$eventsArray['allDay'] = "false"; //doesn't work
$eventsArray['allDay'] = false; //did the trick to have a NON FULL DAY correctly rendered!!
juste au cas où il y a quelqu'un en utilisant des rails avec JBuilder pour générer le flux JSON ... vous devez ajouter l'attribut ALLDAY ...
json.array!(@resubmissions) do |object|
json.id object.id
json.title "WVL - #{object.to_s}"
json.start object.resubmission_at.to_i
json.allDay false
end
Cependant, grâce à la solution PHP!
S'agit-il de ce calendrier auquel vous faites référence? http://www.redredred.com.au/projects/jquery-week-calendar/ – elzapp
Si c'est vraiment urgent, vous devriez essayer la chaîne IRC http://blog.jquery.com/2007/02/17/the- jquery-irc-channel/... – chakrit
Pourquoi s'en soucier si la tâche est urgente? Pour moi, c'est généralement une raison * pas * de répondre à la question. Si vous avez besoin de quelque chose rapidement, trouvez-vous du soutien rémunéré. – Duroth