FullCalendar not displaying time from JSON events when allday is false - php

I am using FullCalendar and populate the calendar from an ajax call.
But I can not get the times to display if the allday is set to false
I was looking at FullCalendar not displaying time from JSON events but did not seem to help.
This is the JSON I am sending back:
][{"id":"18","title":"r2222","start":"2012-10-02
08:00:00","end":"2012-10-02
11:00:00","textColor":"#000000","allday":false,"color":"#ffffff"},
{"id":"1","title":"Test
123","start":"2012-10-16","end":null,"textColor":"#000000","allday":false,"color":"#ffffff"},
{"id":"16","title":"happy
gallown","start":"2012-10-31","end":"2012-10-31","textColor":"#fffcfc","allday":true,"color":"#d92727"},
{"id":"17","title":"recur","start":"2012-10-03
19:00:00","end":"2012-10-03
21:00:00","textColor":"#000000","allday":false,"color":"#ff56ff"}]

allDay is case sensitive; change it from allday to allDay - I just spent 25 minutes myself hunting this one down.

You can follow this allday to allDay and Time should be start: 2010-01-09T12:30:00 need to add T between date and time .
events: [
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09T12:30:00',
allDay : false // will make the time show
}
]

Related

How to set xData as date (Y-M) for Highcharts synchronized charts?

I want to plot the synchronized charts like this https://www.highcharts.com/demo/synchronized-charts.
The JSON data will come from SQL database and the xData (x-axis) looks like below which are in year-month format:
xData: [
"2004-04","2004-04","2004-04","2004-04","2004-04","2004-04","2004-04",
"2004-04","2004-04","2004-04","2004-04","2012-08","2004-04","2004-04","2004-04",
"2004-04","2004-04","2004-04","2004-04","2004-04","2004-04","2004-04","2004-04",
"2004-04","2004-04","2004-04","2004-04","2004-04","2013-12","2004-04","2004-04",
"2007-11","2007-11","2012-08","2005-05","2004-04","2004-04","2004-04","2004-04",
"2004-04","2004-04","2004-04","2016-04","2004-04","2012-08","2004-04","2004-04",
"2004-04","2004-04","2004-04","2004-04","2004-04","2005-05","2004-04","2004-04",
"2012-08","2016-04","2004-04","2004-04","2004-04","2004-04","2012-08","2004-04",
"2004-04","2004-04","2004-04","2012-08","2004-04","2004-04","2004-04","2004-04",
"2004-04","2006-02","2007-11","2004-04","2004-04","2004-04","2005-05","2004-04",
"2004-04","2005-05","2004-04","2004-04","2012-08","2012-08","2006-02","2005-05",
"2004-04","2016-04","2004-04","2004-04","2004-04","2006-02","2004-04","2004-04",
"2004-04","2004-04","2004-04","2005-05","2007-11"
]
So, how to plot those data as x-axis for synchronized charts?
you could simply use that one array as the labels for the xAxis:
xAxis: {
labels: {
format: '{value}'
}
},
but in order to plot on a timeline axis, you may need to convert these strings into integer values, which can be done with PHP: strtotime($date.'-01 00:00:00') ...hint: you need to multiply the result (in seconds) with 1000 for JavaScript timestamps (in milliseconds).
I added categories: "activity.xData" to to the chart
and set the labels format to "this.value"
xAxis: {
crosshair: true,
categories: activity.xData,
events: {
setExtremes: syncExtremes
},
labels: {
format: this.value
}
},

How can I sort my DataTables row by date?

I want to sort my column by date:
var table = $('#table').DataTable({
"order": [[0, "desc"]],
});
But here is my result:
29.06.17
27.06.17
26.06.17
22.08.17
18.10.17
15.09.17
What I would expect is this:
18.10.17
15.09.17
22.08.17
29.06.17
27.06.17
26.06.17
June, then August, then September and then October....
I tested also:
"columnDefs": [
{ "type": "date-dd.mm.yy", targets: 0 }
],
But this didn't change anything.
dataTables date type uses Data.parse() which only supports a limited set of date formats. European style dd.mm.yy is not parseable thus the dates is alpha sorted.
You can deal with data attributes, i.e adding a data-sort="10/18/17" to each column, but I think it is easier to create a small plugin that return valid dates :
$.extend( $.fn.dataTableExt.oSort, {
"jarla-date-pre": function(a) {
a = a.split('.');
return new Date(a[1]+'/'+a[0]+'/'+a[2])
}
});
Use it like this :
columnDefs: [
{ type: 'jarla-date', targets: 0 }
]
demo -> http://jsfiddle.net/vad94dcs/
You need to use the render function which allows you to both format the date for display and use the raw date value for sorting.
The following code uses the moment.js javascript library to format the date.
{
data: 'DateField',
render: function (data, type, row) {
// If display or filter data is requested, format the date
if (type === 'display' || type === 'filter') {
return (moment(data).format("ddd DD/MM/YYYY (HH:mm)"));
}
// Otherwise the data type requested (`type`) is type detection or
// sorting data, for which we want to use the raw date value, so just return
// that, unaltered
return data;
}
},
Link to source at the datatables forum, here.

Issue with Background Events FullCalendar from php script JSON string

I'm trying to include a list of holidays as Background Events from a separate event source. "holidays.php" is one of my event sources. In month view, when I reach one of the holidays dates, there is no background event and my other events from different sources disappear! When I comment out "holidays.php" as an event source, there is no issues with other events. I'm guessing there's an issue with my json string?
holidays.php
<?php
$record[0]["title"]="Halloween Holiday";
$record[1]["title"]="Birthday";
$record[2]["title"]="December Day!";
$record[0]["date"]="2016-10-31T09:00:00";
$record[1]["date"]="2016-11-23T09:00:00";
$record[2]["date"]="2016-12-01T09:00:00";
for ($i=0; $i<3; $i++) {
$event_array[] = array(
'title' => $record[$i]['title'],
'start' => $record[$i]['date'],
'rendering' => 'background',
'allDay' => false
);
}
echo json_encode($event_array);
exit;
?>
JSON string from holidays.php
[{
"title": "Halloween Holiday",
"start": "2016-10-31T09:00:00",
"rendering": "background",
"allDay": false
}, {
"title": "Birthday",
"start": "2016-11-23T09:00:00",
"rendering": "background",
"allDay": false
}, {
"title": "December Day!",
"start": "2016-12-01T09:00:00",
"rendering": "background",
"allDay": false
}]
You can only have an event with no end date if "allDay" is true.
If you want an event to run all day, then either
a) remove the time element from the start date and set allDay: true, OR
b) If the event genuinely starts at 09:00, as you've put in the data, then you'll need to add a corresponding end date before it will work. Note though that "background" events where allDay : false is set will not show up in the "Month" view, only in the week and day views.
Also, if you're still using the eventRender functionality from your previous question, any events with no end date will probably cause it to crash, because it checks every event and tries to use the "end" property in the calculation.

highstocks x-axis time incorrect

I have stock market data plotted over highcharts:
My JS Code:
$(function() {
$.getJSON('data.php', function(data) {
console.log(data);
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector:{
enabled:false
},
navigator: {
enabled: true
},
useUTC: false,
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%H:%M', this.value);
},
}
},
title : {
text : 'NSE Stock Price'
},
credits: {
enabled : false
},
series : [{
name : 'NSE Stock Prices',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
My JSON output (partial):
[["09:01:00",27966.96],["09:03:00",27934.64],["09:03:00",27934.64],["09:07:00",27952.66],["09:07:00",27952.66],["09:07:00",27952.66]]
I expect time from 9:00am to 4:00pm on x-axis but I am just not getting it.
I tried changing time to unix time changing date format useUTC to true but noting worked out.
Update:
Tried this format too,
[["2014-11-14 09:01:00",27966.96],["2014-11-14 09:03:00",27934.64],["2014-11-14 09:03:00",27934.64]]
Update 2
My PHP code,
$array_item[] = array(date('H:i:s',strtotime($price_date)), (float)$last_traded_price);
Update 3: (some of the latest values)
[["2014-11-17 09:00:00",28065.72],["2014-11-17 09:02:00",28048.8],["2014-11-17 09:04:00",28041.93],["2014-11-17 09:06:00",28029.58],["2014-11-17 09:08:00",28018.68],["2014-11-17 09:10:00",28018.68],["2014-11-17 09:12:00",28018.68],["2014-11-17 09:14:00",28018.68],["2014-11-17 09:16:00",27988.73],["2014-11-17 09:18:00",28001.06],["2014-11-17 09:20:00",28003.06],["2014-11-17 09:22:00",27988.44],["2014-11-17 09:24:00",28011.67],["2014-11-17 09:26:00",27988.56],["2014-11-17 09:28:00",27991.17],["2014-11-17 09:30:00",27983.98],["2014-11-17 09:32:00",27972.01],["2014-11-17 09:34:00",27980.87],["2014-11-17 09:36:00",27994.42],["2014-11-17 09:38:00",28007.38],["2014-11-17 09:40:00",28005.57],["2014-11-17 09:42:00",27986.39],["2014-11-17 09:44:00",28010.79],["2014-11-17 09:46:00",27998.44],["2014-11-17 09:48:00",28012.66]]
This is as per: $array_item[] = array(strtotime($price_date), (float)$last_traded_price);
[[1416195000,28065.72],[1416195120,28048.8],[1416195240,28041.93],[1416195360,28029.58],[1416195480,28018.68],[1416195600,28018.68],[1416195720,28018.68],[1416195840,28018.68],[1416195960,27988.73],[1416196080,28001.06],[1416196200,28003.06],[1416196320,27988.44],[1416196440,28011.67],[1416196560,27988.56],[1416196680,27991.17],[1416196800,27983.98],[1416196920,27972.01],[1416197040,27980.87],[1416197160,27994.42],[1416197280,28007.38],[1416197400,28005.57],[1416197520,27986.39],[1416197640,28010.79],[1416197760,27998.44],[1416197880,28012.66],[1416198000,28018.49],[1416198120,28010.15],[1416198240,28028.18],[1416198360,28035.61],[1416198480,28024.87],[1416198600,28018.95],[1416198720,28007.81],[1416198840,28001.57],[1416198960,28006.85],[1416199080,27997.68],[1416199200,27993.06]]
The output: Still not giving perfect timings although not giving 00:00 as before.
The graph is breaking in middle.
Update 3:
PHP Code,
while ($stocks_bse_price->fetch())
{
$array_item[] = array(strtotime($price_date)*1000, (float)$last_traded_price);
}
JSFidle link: http://jsfiddle.net/Ywr3L/38/
Update 4:
Just realized its going wrong if figures for entire day is given as an input to array.
I have stored entire days data http://pastebin.com/NVAD5EyG
Update 5:
This is what I did in MySql query:
DATE_FORMAT(price_date,'%d-%c-%Y %r') as price_date
And then in PHP
$price_date = $price_date.' UTC';
$array_item[] = array(strtotime($price_date)*1000, (float)$last_traded_price);
Which is giving me this:
http://jsfiddle.net/rof96xuo/1/
[[1416301200000,28177.51],[1416301320000,28180.46],[1416301440000,28181.03],[1416301560000,28198.98],[1416301680000,28209.03],[1416301800000,28209.03]]
new Date(1416301200000)
Tue Nov 18 2014 14:30:00 GMT+0530 (India Standard Time)
As #RaeenHashemi is saying in the comments, highcharts expects datetime data to be in JavaScript epoch times (number of milliseconds since 1970/01/01). You are giving it a string representation of your datetime.
It looks like you are generating JSON from PHP. If so, modify the PHP to convert the time to epoch. If you have a DateTime object in your PHP use getTimeStamp:
$date->getTimestamp() * 1000; // unix timestamp to javascript millisecond timestamp
If you have date time strings in your PHP, convert it to a DateTime first.

Wrong Unix time stamp while updating events drag & drop in full calendar

The events fetched from the database displaying correctly in the full calendar.
When I try to drag and drop the events to another date, it gives wrong Unix timestamp.
For example)
The events is currently in November 16 2012, when I drag and drop it to 20 November 2012, it gives the Unix time stamp as 1353340800000 and the date after converting using strtotime() PHP function, the result is 1983-07-03.
Issue Fixed :
Check the updated code below.
$('#calendar').fullCalendar({
editable: true,
eventDrop: function(calEvent,dayDelta,minuteDelta,allDay,revetFunc) {
var stDate = $.fullCalendar.formatDate(calEvent.start, 'dd-MM-yyyyy');
$.post('event_update.php',{'allday':allDay, 'event':calEvent.id, 'start':stDate}, function(response){
if(response.length > 0){
alert(response);
revertFunc();
}
});
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
You have to cut the last 3 zeros.

Categories