Fullcalendar : Wrong end time displayed for events - javascript

I have an array of events which is here :
And this is my fullcalendar :
As you can see the end time is never the same as the array, but the start time is good, why?
What I have tried :
timezone : local
ignoreTimeZone : true
I didn't have effects on the rendering.
Note : the data is fetched in my database, the date are standard DATETIME format and it is json encoded in my php file.
I think it may be because I need to parse somehow my fields but I don't know how to do it.
this is my code :
$html .= '<div id="calendar"></div>';
// PROCEDURE SQL
$sql2 = "SELECT DISTINCT id, event_titre as 'titre', event_start as 'start', event_stop as 'stop' FROM tmp;";
//CALL WITH SESSION VARS
if(!$mysqli->query("CALL diff('". $_SESSION['upcNameId']." ', '". $_SESSION['statDateFrom'] ." 00:00:00','". $_SESSION['statDateTo'] ." 00:00:00');"))
die($mysqli->error);
//EXEC SQL2
$result = $mysqli->query($sql2)
or die($mysqli->error);
$i=0;
$events = array();
while ($row = $result->fetch_assoc()) {
$events[] = $row;
}
$buildingevents = json_encode($events);
//echo json_encode($events);
$html .= "<script src='/wp-content/plugins/biobelt/moment.min.js'></script>
<script src='/wp-content/plugins/biobelt/fullcalendar.min.js'></script>
<link rel= 'stylesheet' href='/wp-content/plugins/biobelt/fullcalendar.css' type='text/css'>
<script src='/wp-content/plugins/biobelt/fr.js'></script>
<script>
jQuery(document).ready(function() {
var bevents = ".$buildingevents."
console.log(bevents)
jQuery('#calendar').fullCalendar(
{
header: {
right: 'today, month, agendaDay, agendaWeek, prev, next'
},
defaultDate: '" . $_SESSION['statDateFrom'] ."',
events: bevents,
timezone: 'local',
});
});
</script>";

Your events do not match the expected fields of an Event object: see documentation here
Replace the aliases in your query:
titre by title
and
stop by end
and it should be good.

Related

Insert MySQLi in JavaScript

I need help with FullCalendar and Javascript and PHP.
I need to include this foreach PHP code into this Javascript.
<script type="text/javascript">
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
events: [
<?php
$sql = "SELECT * FROM eventi";
$eventi = $mysqli->query($sql);
foreach ($users as $row) {
echo '{';
echo 'title: "'.$eventi['nome'] . '"';
echo 'start: "'.$eventi['data'] . '"';
echo '},';
}
?>
]
});
});
</script>
By changing your query so ite returns the data with the desired column names, and then using json_encode to format the results, you can
simplify the code quite a bit.
<script type="text/javascript">
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
events: [
<?php
$sql = "SELECT `nome` as `title`, `data` as `start` FROM eventi";
$eventi = $mysqli->query($sql);
$allrows = $eventi->fetch_all(MYSQLI_ASSOC);
$rslt = json_encode($allrows);
echo $rslt;
?>
]
});
});
</script>

count duplicate data in mysql

Is there a way to count the duplicate data from mysql and
display it to a bar chart, Im trying to make a attendance report
using morris bar chart.
here my sample code:
<html >
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
here is my php code:
<?php
$connect = mysqli_connect("localhost", "root", "", "sa");
$query = "SELECT year, count(*) as course FROM test group by year,course order by year ASC ";
$result = mysqli_query($connect, $query);
$chart_data = '';
while($row = mysqli_fetch_array($result))
{
$chart_data .= "{ year:'".$row["year"]."', course:".$row["course"]."}, ";
}
$chart_data = substr($chart_data, 0, -2);
?>
and this is my javascript:
<script>
Morris.Bar({
element : 'chart',
data:[<?php echo $chart_data; ?>],
xkey:'year',
ykeys:['course','course','course','course','course'],
labels:['BSIT','BSHRM','BSCS','BSTM','ABCOMM'],
hideHover:'auto',
xLabelAngle: '60',
verticalGrid: true,
resize:true,
barColors: ['red','blue','green','yellow','black'],
gridTextSize: 12
});
</script>
this is my database:
UPDATED: and this is my output so far:
as you can see in my output all courses have same value for example
the two 2018-07-12 the output should be based on my database is for BSIT = 3
the rest is zero value same with the other 2018-07-12 the output should be BSHRM =1 and the rest is zero value, is there a way to achieve that?, Hope you can help me.
You have two problems with your query:
First, the alias COUNT(*) AS course reuses the column name as the alias. You need to give it a different name.
Second, you left course out of the grouping, so you're combining the counts of all courses in your results.
It should be:
$query = "SELECT year , course , count(*) as count FROM test group by year, course order by year ASC ";
Each course will then be in a different row of the results, you'll need to regroup when you process the results.
You also shouldn't create JSON by concatenating strings. Put the results in an array and use json_encode().
$results = array();
while ($row = mysqli_fetch_assoc($result)) {
$results[$row['year']]['year'] = $row['year'];
$results[$row['year']][$row['course']] = $row['count'];
}
$chart_data = json_encode(array_values($results));
This method uses the course names as the keys in the JSON, not course1, course2, etc. So you need to change
ykeys:['course','course','course','course','course'],
to:
ykeys:['BSIT','BSHRM','BSCS','BSTM','ABCOMM'],
The JSON in $chart_data already includes the square brackets around the array, so you don't need to add it around the echo. Use:
data: <?php echo $chart_data; ?>,

jQuery Autocomplete PHP Mysql posting different field

I am making use of jQuery's Autocomplete where I am populating my autocomplete dropdown with a php file called site.php. Site.php gets the values from a mysql table called site and which has 3 columns: id, code and site. I want my autocomplete to show only code and site and then store the corresponding id in my other table.
Everything works fine except that autocomplete is posting the code and the site selected but not the id. What do I need to change in order to send the id to my php POST and not code and site? Scripts as follows:
PHP file: site.php
<?php
$server = 'sql203.com';
$user = 'xxxxxxxxxxxx';
$password = 'xxxxxxx';
$database = 'b17';
$mysqli = new MySQLi($server,$user,$password,$database);
/* Connect to database and set charset to UTF-8 */
if($mysqli->connect_error) {
echo 'Database connection failed...' . 'Error: ' . $mysqli->connect_errno . ' ' . $mysqli->connect_error;
exit;
} else {
$mysqli->set_charset('utf8');
}
/* retrieve the search term that autocomplete sends */
$term = trim(strip_tags($_GET['term']));
$a_json = array();
$a_json_row = array();
if ($data = $mysqli->query("SELECT * FROM `b17_16413362_upupa`.`site` WHERE code LIKE '%$term%' OR site LIKE '%$term%' ORDER BY code , site")) {
while($row = mysqli_fetch_array($data)) {
$id = htmlentities(stripslashes($row['id']));
$code = htmlentities(stripslashes($row['code']));
$site = htmlentities(stripslashes($row['site']));
$a_json_row["id"] = $id;
$a_json_row["value"] = $code.' '.$site;
$a_json_row["label"] = $code.' '.$site;
array_push($a_json, $a_json_row);
}
}
// jQuery wants JSON data
echo json_encode($a_json);
flush();
$mysqli->close();
?>
Javascript:
<script type="text/javascript">
$(function() {
$("#sitex").autocomplete({
source: 'site.php',
minLength: 0
}).focus(function(){
$(this).autocomplete("search");
});
});
</script>
In your PHP, change
$a_json_row["value"] = $code.' '.$site;
to
$a_json_row["value"] = $id;
The 'value' property is the data that will be submitted by the form. The 'label' property is what will be displayed to the user.

PHP populated FullCalendar, looks right, but data wont show

I am using mySQL to store information about check-out dates, and then depending on the object I would like to display the times that are already taken with FullCalendar.js
I am using PHP to pull in rows and then loop through them populating the where events are created, the code looks right when I check it on the page, but data is not loaded.
Here is the code generating the page:
function getAllTimes(){
if(!empty($_GET['id']))
{
$query = "
SELECT userID, startDate, endDate
FROM checkout
Where equID =" .$_GET['id'];
global $db;
$stmt = $db->prepare($query);
$stmt->execute();
$rows = $stmt->fetchAll();
echo "<script type=\"text/javascript\">
$(document).ready(function() {
$('#calendar').fullCalendar({
events: [";
$counter = 0;
foreach($rows as $row):
if($counter == 0)
{
echo "
{
title : '".$row['userID']."',
start : '".$row['startDate']."',
end : '".$row['endDate']."'
}";
$counter = $counter+1;
}
else
{
echo ",
{
title : '".$row['userID'].",'
start : '".$row['startDate'].",'
end : '".$row['endDate']."'
}";
$counter = $counter+1;
}
endforeach;
echo "
]
});
}}";
echo "
</script>";
}
else
echo "ID must be specified";
}
getAllTimes();
And this is the outcome when loaded, yet events are not added to the calendar.
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
events: [
{
title : 'ArtemBeer',
start : '2014-01-16 00:00:00',
end : '2014-01-16 00:00:00'
},
{
title : 'ArtemBeer,'
start : '2014-01-15 00:00:00,'
end : '2014-01-16 00:00:00'
},
{
title : 'ArtemBeer,'
start : '2014-01-09 02:02:00,'
end : '2014-01-10 03:03:00'
}
]
});
}}
</script>
Your data (JS) has a bad comma:
start : '2014-01-15 00:00:00,'
should be:
start : '2014-01-15 00:00:00',
Also use your Chrome Inspector to see JS errors via the console, otherwise you will be guessing all day long.

jQuery Calender - More than one event per day

I have a calendar on my site that uses javascript/jquery to place events in the calendar. All the events are stored in a MySQL database with the title and Unix timestamp.
My problem is that this method (shown in the code below) only allows one event per day, and creating two rows with the same date, only uses the latter of the two. There are several instances where I need two or more events in one day.
My code:
var CalendarEvent = function (time, title) {
this.time = time;
this.title = title;
}
var allEvents = {
<?php require_once 'ndx/mysql.php';
$events = mysqli_query($con, "SELECT * FROM events");
while($lse = mysqli_fetch_array($events)):
$date = date('Y-m-d', $lse['timestamp']);
$notime = $lse['notime'];
if($notime != 'true'){
$time = date('g:i a', $lse['timestamp']);
}else{
$time = '';
}
$event = addslashes($lse['title']);
?>
'<?php echo $date; ?>': [
new CalendarEvent('<?php echo $time; ?>', '<?php echo $event; ?>')
],
<?php endwhile; ?>

Categories

Resources