We Keep Coding

How to display months in the correct sequence?

How to get months like in the picture? Now I see - feb20
const chartOptions = {
options: {
chart: {
id: "basic-bar"
},
xaxis: {
labels: {
formatter: function(value, timestamp, index) {
return moment(new Date()).format("MMM YYYY")
}
}
}
},
series: [
{
name: "Доход",
data: [onSumArr() !== undefined ? onSumArr() : 0]
}
]
};
Now I do like this, and it does not work.

Change your xaxis.labels.formatter function to
formatter: function(val, timestamp) {
return moment(new Date(timestamp)).format("MMM YYYY")
}

Your problem arises here
return moment(new Date()).format("MMM YYYY")
Date() initializes as the current date month, now February. You need to set the month of the date with date.setMonth([0-11]). timestamp or index in the anonymous function parameters could provide that.
I'm not an expert in apexCharts, but you could replace your formatter with this:
formatter: function(value, timestamp, index) {
var startDate = moment(new Date('2019-12-01T00:00:00'));
startDate.add(index, 'months');
return moment(startDate).format("MMM YYYY")
}

How can I render text on specific days in Fullcalendar v4?

I'm new in using Fullcalendar io. For example, I want to render the "Hello World" on January 1, 15, and 30 2020. How do I do that in Fullcalendar v4?
dayRender: function(dayRenderInfo) { dayRenderInfo.el.innerHTML = "<p>Hello World</p>"; }
Want to achieve something like this. Just a plain text:

You can achieve that with dayRender function.
$('#my_calendar').fullCalendar({
defaultView: 'month',
events: [{
title: 'some-event',
start: '2020-01-01 10:00',
end: '2020-01-01 19:00',
}],
dayRender: function(date, cell) {
cell.append('<div class="custom-class">Hello World</div>');
},
});
EDIT:
On version 4 it changed to an object (from their docs):
So you should compare the column date to you dates, for example:
dayRender: function(info) {
let colDate = new Date(info.date);
let myDates = [
new Date('2020-01-01'),
new Date('2020-01-15'),
new Date('2020-01-30'),
];
myDates.forEach((date) => {
if (colDate.getYear() === date.getYear() &&
colDate.getMonth() === date.getMonth() &&
colDate.getDate() === date.getDate()) {
info.el.innerText = 'hello'
}
});
}

Fullcalendar - Vertical resources, horizontal days [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 3 years ago.
Improve this question
I would like to know, if there is any way to create a calendar with Fullcalendar in such format:
Resource A Resource B Resource C
Apr. 26
Apr. 27
Apr. 28
Apr. 29
The timeline view is similar to that, but not exactly what I need. It's very important to have a calendar that could manage events like this.
Thank you in advance!

Yes. This is a workaround. Try to declare a custom view like this:
$(function() {
// You should change dynamically the min/maxtime
// settings of your custom view when switching
// between months.
// https://fullcalendar.io/docs/dynamic-options
var getDaysInMonth = function() {
var d = new Date();
var year = d.getYear();
var month = d.getMonth() + 1;
return new Date(year, month, 0).getDate();
};
var getMonthDay = function() {
var d = new Date();
return d.getDate();
};
var getMinTime = function() {
var days = getMonthDay() - 1;
var time = "-" + days + ".00:00:00";
return time;
};
var getMaxTime = function() {
var days = getDaysInMonth() - getMonthDay() + 1;
var time = days + ".00:00:00";
return time;
};
$('#calendar').fullCalendar({
defaultView: 'agendaMonth',
groupByResource: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaMonth,listThreeDay,agendaWeek,month'
},
views: {
listThreeDay: {
type: 'list',
duration: {
days: 31
}
},
agendaMonth: {
type: 'agendaDay',
minTime: getMinTime(),
maxTime: getMaxTime(),
slotDuration: '24:00:00',
slotLabelFormat: [
'MMMM YYYY', // top level of text
'D' // lower level of text
],
buttonText: 'custom agenda'
},
},
resources: [
{ id: 'a', title: 'Room A' },
{ id: 'b', title: 'Room B' }
],
events: 'https://fullcalendar.io/demo-events.json?with-resources=2'
});
});
Working demo: https://codepen.io/anon/pen/jKQvLx

How to convert string into date while setting custom filters in jquery grid?

This is one of the columns in my grid-
{ name: 'DueDate',
index: 'DueDate',
sortable: true,
sorttype: 'date',
editable: false,
width: 125,
formatter: 'date',
searchoptions: {
dataInit: function(element) {
$(element).datepicker({
dateFormat: 'mm/dd/yy'
});
}
}
}
I am trying to setup a custom filter like this-
var now = moment();
var formattedDate = now.format('MM/DD/YYYY');
var date = Date.parse(formattedDate);
var f = { groupOp: "OR", rules: [] };
f.rules.push({ field: 'DueDate', op: 'lt', data: date});
$grid[0].p.search = true;
$.extend($grid[0].p.postData, { filters: JSON.stringify(f) });
$grid.trigger('reloadGrid');
'DueDate' returned is a date string. so i need to parse it before i can compare. How do i do this? Is there even a way to do it?
UPDATE:
DueDate is a Datetime object and the value from the controller is
/Date(-62135568000000)/(json object) This is formatted into 'mm/dd/yy' format and
this converts to a date string and looks like normal date. I have a
drop down menu item with all the filter criteria. I click on one of
the menu-items, which is to select all the rows that have DueDate <
Today's date for which i need to parse 'DueDate' field's value.
For Testing, when i use this-
var now = moment();
var formattedDate = now.format('MM/DD/YYYY');
var rowdata = $grid.jqGrid('getRowData');
var dueDate = rowdata[0].DueDate; //just picking first row's due date
alert("DueDate: " + dueDate);//alerts "1/1/2015"
var d = Date.parse(formattedDate);
//var ts = dueDate.getTime(); --I get an error here- getTime() not supported for this object.
//this works fine- & I need something like this for filters
if (Date.parse(dueDate) < d) {
alert("It is due");
}
var f = { groupOp: "AND", rules: [] };
f.rules.push({ field: 'DueDate', op: 'lt', data: d });
f.rules.push({ field: 'HasMapping', op: 'eq', data: true });
$grid[0].p.search = true;
$.extend($grid[0].p.postData, { filters: JSON.stringify(f) });
$grid.trigger('reloadGrid');

Flot chart displaying data from data that aren't even in JSON

I have the following
<div id="chart"></div>
<script src="js/flot/jquery.flot.js"></script>
<script src="js/flot/jquery.flot.tooltip.min.js"></script>
<script src="js/flot/jquery.flot.resize.js"></script>
var sessions = [
[1418706000000, 14813],
[1418792400000, 39580],
[1418878800000, 51193],
[1418965200000, 66700],
[1419051600000, 108737],
[1419138000000, 101081],
[1419224400000, 94449],
[1419310800000, 109039],
[1419397200000, 92329],
[1419483600000, 68942],
[1419570000000, 75391],
[1419656400000, 120016],
[1419742800000, 132495],
[1419829200000, 103469],
[1419915600000, 88940],
[1420002000000, 59938],
[1420088400000, 72359],
[1420174800000, 74663]
];
var users = [
[1418706000000, 2632],
[1418792400000, 9588],
[1418878800000, 9273],
[1418965200000, 10839],
[1419051600000, 14948],
[1419138000000, 11226],
[1419224400000, 13394],
[1419310800000, 10493],
[1419397200000, 8482],
[1419483600000, 2375],
[1419570000000, 5783],
[1419656400000, 10068],
[1419742800000, 8288],
[1419829200000, 5423],
[1419915600000, 4866],
[1420002000000, 1862],
[1420088400000, 5560],
[1420174800000, 1257]
];
function doPlot(position) {
$.plot($("#chart"), [{
data: sessions,
label: "Sessions"
}, {
data: revenue,
label: "Revenue",
yaxis: 2
}], {
xaxes: [{
mode: 'time'
}],
yaxes: [{
min: 0
}, {
alignTicksWithAxis: position == "right" ? 1 : null,
position: position
}],
legend: {
position: 'sw'
},
grid: {
hoverable: true
},
tooltip: true,
tooltipOpts: {
content: "%s for %x was %y",
xDateFormat: "%y-%0m-%0d",
onHover: function (flotItem, $tooltipEl) {
}
}
});
}
doPlot("right");
Thhis displays figures for both sessions and users on dates that there isn't even data for. The last date that there is data for is Dec 27th. Yet, this line graph shows data for up until Jan 2nd.
Here is a working example here
Any ideas?

According to your last data entry in each array element time = 1420174800000, so:
var date = new Date(1420174800000);
// output "Fri, 02 Jan 2015 05:00:00 GMT"
console.log(date.toGMTString());

I converted your data to dates:
date = new Date(sessions[i][0])
It contains dates between Dec 16 2014 and Jan 02 2015. You can see it in this fiddle.
When you fill your arrays, you should convert your dates to numbers simply with:
sessions[i] = [Number(date), value];
I'm not sure how you meant Date('D, M j'), I assume it's a string like "Date(month,day,year)". An example of converting this kinf of json to plottable data: in this other fiddle.
Actually, I reversed the day and month, but you get the idea. :)