I am using ion2-calendar in ionic 3, currently, it's allowing to select day starts from today and not previous. I want to select previous days also Please help in this.
I am using the following code,
optionsRange: CalendarComponentOptions = {
pickMode: 'range',
disableWeeks: [0, 6],
};
Thanks in advance
You can see previous dates by adding canBackwardsSelected: true to the const options: CalendarModalOptions then the code will be as follows using Ionic ModalController.
openCalendar() {
const options: CalendarModalOptions = {
title: 'BASIC',
canBackwardsSelected: true, //By making this true you can access the disabled dates
};
let myCalendar = this.modalCtrl.create(CalendarModal, {
options: options
});
myCalendar.present();
myCalendar.onDidDismiss((date: CalendarResult, type: string) => {
console.log(date);
})
}
Then you just have to call openCalendar() from a button click at the HTML end to see enabled past dates.
edit your ts file this will select date between from and to only not after or before
test: DayConfig[]=[];
public optionsRange: CalendarComponentOptions = {
//from: new Date(2019, 0, 1),
from: new Date(2019, 11, 1),
to: new Date(2020, 2, 15),
pickMode: 'range',
daysConfig: this.test
};
Related
I'm working with datepicker from materializecss and I need to disabled all days unless the Monday, at other plugins I used 'daysOfWeekDisabled'
parameter but in this case I must to use disableDayFn: function(){} and when I insert a parameter all calendar is disabled. Here is an example
$('#initCourse').datepicker({
firstDay: 1,
minDate: new Date(),
format: "dd.mm.yyyy",
disableDayFn: function(){
return disabled = '0, 2, 3, 4, 5, 6'
}
});
Any idea? Thanks in advance
It worked fine, but I use another way in case you need to disable one or more dates
disableDayFn:function (date) {
let disableListDate = [new Date('2018,12,5').toDateString(),new Date('2018,12,6').toDateString()];
if(disableListDate.includes(date.toDateString())) {
return true
}else{
return false
}
}
Here's a working example.
disableDayFn has a parameter date which you can use to find every occurrency of a specific date.
disableDayFn: function(date) {
if(date.getDay() == 1) // getDay() returns a value from 0 to 6, 1 represents Monday
return false;
else
return true;
}
I have a datatable created from database data that gets aggregated by google.visualization.data.group, then fed into a columnChart.
By default, the resulting chart's bars are all the same color but i would like to make the bars different colors (by iterating through the datatable and assigning a different color to each row in the datable).For now, i'll just try to assign the colour 'gold' to each bar, for simplicity.
This is the documentation for a columnChart and is the documentation for style roles.
I don't think my code can be far wrong:
var groupedCategoryData = new google.visualization.data.group(
stacked01Data, // arg 1 is the array of input data
[{ // arg 2 is the key (An array of numbers/objects being columns to group by)
column: 0, type: 'string'
}],
[{ 'column': 1, 'aggregation': google.visualization.data.avg, 'type': 'number' }]
);//group. col 1 = score
//*****************
groupedCategoryData.addColumn({ type: 'string', role: 'style' });
for (var i = 0; i < groupedCategoryData.length; i++) {
groupedCategoryData[i][2] = 'color: gold';
}//for
//*****************
var stacked01_options = {
width: 500,
height: 300
};//options
var stacked01 = new google.visualization.ColumnChart(document.getElementById('stackedChart01_div'));
stacked01.draw(groupedCategoryData, stacked01_options);
The result is a chart whose bars are all default blue. I admit this is my first foray into javascript. any help would be appreciated.
Yep, that did it. thanks WhiteHat. working code:
//include the bar color data
var colorsGreen = [
[0, 1, '#6AB293'],
[1, 2, '#449371'],
[2, 3, '#277553'],
[3, 4, '#115639'],
[4, 5, '#043822']
];
groupedCategoryData.addColumn('string', 'barColor');
var groupedCategoryDataView = new google.visualization.DataView(groupedCategoryData);
groupedCategoryDataView.setColumns([0, 1, {
calc: function (dt, row) {
var rowValue = dt.getValue(row, 1);
var color;
colorsGreen.forEach(function (range, index) {
if ((rowValue >= range[0]) && ((rowValue < range[1]) || (range[1] === null))) {
color = range[2];
}
});
return color;
},
role: 'style',
type: 'string'
}]);
var stacked01_options = {
width: 500,
height: 300
};//options
var stacked01 = new google.visualization.ColumnChart(document.getElementById('stackedChart01_div'));
stacked01.draw(groupedCategoryDataView, stacked01_options);
}
so browsers throw
warning about using momentJS incorrectly.
Deprecation warning: value provided is not in a recognized ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.
Arguments:
[0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: 12.30, _f: false, _strict: undefined, _locale: [object Object]
Error
So i looked at my code
data: {
labels: ['01.01', '02.01', '03.01', '04.01', '05.01', '06.01', '07.01', '08.01', '09.01', '10.01', '11.01', '12.01'],
datasets: createChatterData(data, this)
},
And read that I should provide a format when dealing with non iso strings.
labels: [moment('01.01', 'MM.DD'), moment('02.01', 'MM.DD'), ...];
Ok that removed first deprecation.
But my datasets data also contains of date
dataset.data.pushObject({
x: moment(datum).format('MM.DD'),
y: parseInt(moment(datum).format('YYYY'))
});
So I tried different variations to that (premodified ambigious datetime)
x: moment(date, 'YYYY.MM.DD').format('MM.DD')
and
x: moment(date, 'MM.DD')
But my graph doesnt map correctly anymore.
Example of codepen chart working in chrome: http://codepen.io/kristjanrein/pen/wJrQLE
Does not display in firefox/opera
I see a couple of issues here.
1) Since you want your X axis to be a time scale, then you should leave your X data value as a moment object. Your current implementation is creating a moment object from a date string and then formatting it back to a string. When you do this, chart.js then takes the string and tries to create a moment object internally when it builds the chart.
Therefore, It is best to keep the data as either a Date or Moment object and use the time scale configuration properties to determine how the data is displayed on the chart. This prevents chart.js from having to construct the moment object and guess at the string format.
2) You are using the pre-2.0 way to create a chart when you use Chart.Scatter. Instead you should use the new style (new Chart()) and pass in a type property.
Here is a modified version of you code that results in no browser warnings and works in Chrome and Firefox (I did not test in Opera).
var getData = function() {
var dummyDataset = [
'2007-11-09T00:00:00.000Z',
'2006-08-04T00:00:00.000Z',
'2006-08-06T00:00:00.000Z',
'2008-01-10T00:00:00.000Z'
];
return dummyDataset.map(function(datum) {
var myMoment = moment(datum);
return {
x: myMoment,
y: parseInt(myMoment.format('YYYY')),
};
});
};
var ctx = document.getElementById("chart1").getContext("2d");
var myScatter = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: "My First dataset",
borderColor: 'rgb(255, 99, 132)',
fill: false,
pointRadius: 4,
pointHoverRadius: 8,
showLine: false,
data: getData()
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Random Data'
},
legend: {
display: true,
labels: {
fontSize: 10,
boxWidth: 20
}
},
elements: {
point: {
pointStyle: 'rect'
}
},
hover: {
mode: 'nearest'
},
scales: {
xAxes: [{
type: 'time',
position: 'bottom',
scaleLabel: {
display: true,
labelString: 'Months'
},
time: {
unit: 'month',
displayFormats: {
month: 'MM'
},
}
}],
yAxes: [ {
type: 'linear',
ticks: {
min: 2005,
max: 2015,
stepSize: 1
},
scaleLabel: {
display: true,
labelString: 'Year'
}
}]
}
}
});
You can see it in action at this forked codepen.
One other thing to keep in mind is that because your data spans multiple years, you will see duplicate months on the X axis. Remember, a time scale is used to plot dates so even if you only display the months, a data point with the same month but with different years will not be plotted at the same location.
If you are actually only wanting to show month string/number values in the X axis, then you should not use the time scale at all and use the linear scale instead. Then when you build your data values, you would extract the month from the data (the same way you are already doing for your Y value).
var getData = function() {
var dummyDataset = [
'2007-11-09T00:00:00.000Z',
'2006-08-04T00:00:00.000Z',
'2006-08-06T00:00:00.000Z',
'2008-01-10T00:00:00.000Z'
];
return dummyDataset.map(function(datum) {
var myMoment = moment(datum);
return {
x: parseInt(myMoment.format('MM')),
y: parseInt(myMoment.format('YYYY')),
};
});
};
So in addition to jordan's answer
I changed my labels and x axis from
['01.01', '02.01', ...] to [1,2,...]
and
from type: 'time' to type: 'linear'
And to make it map not only by month but also by day. I had to make date objects to correct floats. 05.20 to 5.66
const date = datum.key;
const day = parseInt(moment(date).format('DD')) / 30 * 100;
const fullDate = parseFloat(moment(date).format('MM') + '.' + Math.round(day))
// 05.10 would be 5.3 (10 of 30 is 33%)
{
x: fullDate,
y: parseInt(moment(date).format('YYYY'))
date: date, // for tooltip
count: count // for tooltip
}
And i also had to make corrections to my tooltips
callbacks: {
title: function([tooltipItem], data) {
const tooltipInfo = getTooltip(tooltipItem, data.datasets);
return tooltipInfo.date;
},
label: function(tooltipItem, data) {
const tooltipInfo = getTooltip(tooltipItem, data.datasets);
return i18n.t('chart.count') + ': ' + tooltipInfo.count;
},
}
corresponding tooltip dataset
function getTooltip(tooltipItem, datasets) {
return datasets[tooltipItem.datasetIndex].data.find(datum => {
return datum.x === tooltipItem.xLabel && datum.y === tooltipItem.yLabel;
});
}
Using this scheduler http://alloyui.com/tutorials/scheduler/ how would I change it to use 24h instead of AM/PM?
It appears you'll need to set the isoTime attribute on each supported view.
var dayView = new Y.SchedulerDayView({
isoTime: true
});
new Y.Scheduler(
{
boundingBox: '#myScheduler',
date: new Date(2013, 3, 25),
items: events,
render: true,
views: [dayView]
}
);
Fiddle
Im using highcharts for plotting a column type chart.
Data on x-axis is not a timestamp based one. It is normal categories only.
Like the one in the below mentioned fiddle.
JSFIDDLE : http://jsfiddle.net/BalajiR/d1LL2tvk/4/
I have enabled panning, so that the user can pan across the chart to view the complete chart.
It is working fine in browser as like in the fiddle.
But, the same is not working for touch devices, which is expecting a zoomed chart for panning .
I don't want any zoom functionality.
Just same behaviour as like browser in device (Panning).
Please share any way to implement the same.
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
backgroundColor: '#F0F0F0',
panning:true
},
title: {
text: null
},
xAxis: {
categories: ['PLAN_1','PLAN_2','PLAN_3','PLAN_4','PLAN_5','PLAN_6','PLAN_7','PLAN_8','PLAN_9','PLAN_10'],
min:0,
max: 3
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y;
}
},
plotOptions: {
column: {
grouping: false,
pointWidth: 30
}
},
series: [{
name: 'Total',
data: [8, 10, 5, 9, 6, 8, 10, 5, 9, 6],
color: '#97BF0D'
}, {
name: 'Actionable',
data: [4, 5, 2, 4, 3, 4, 5, 2, 4, 3],
color: '#FFFFFF'
}]
});
});
Regards,
Balaji R
I haven't implemented it myself yet and there may be a cleaner way of doing this but here's a potential solution:
Your browser lets you pan because it is the default action of the event onDrag; this event occurs when the user clicks and drags across the screen. Your mobile platform is using onZoom instead because there isn't a dragging functionality on it.
What I would do is manually set the event to pan like you want it to on the onZoom event. If you found the default behavior of onDrag, you could do
onZoom(e){// same behavior as onDrag};
All of this is defined in the events key.