Highlight Specific Dates in Bootstrap3 Datepicker - twitter-bootstrap-3

I'm trying to highlight specific dates in an array in Bootstrap's Datepicker and am unable to make it work. I would like to have something like the code below and can't find any examples. Does anyone know how to make this work?
var dateValues = ['1/01/2015', '1/14/2015', '1/19/2015']
$('#events-calendar').datepicker({
highlightDates = dateValues
)}

I ended up having to add the feature myself, couldn't figure out any other way to do it.
The array looks something like this:
[
{ "Class": "fault", "Date": "1995-06-23" },
{ "Class": "fault", "Date": "2014-05-01" },
{ "Class": "fault", "Date": "2015-06-17" },
{ "Class": "fault", "Date": "2015-06-14" }
]
Added the following to my options.
var options = {
highlights: allBindings.datetimepicker.attr.highlights || []
};
Inserted the following code inside bootstrap-datetimepicker.js in the while loop of the 'fillDate' function:
var cssClass = "";
try {
for (var j = 0; j < options.highlights.length; j++) {
var current = options.highlights[j];
if (current.Date == prevMonth._d.yyyymmdd()) {
cssClass = "faulted";
break;
} else {
cssClass = "";
}
}
} catch (e) {
console.log('Date pick date highlighter" ' + e);
}
And then I changed the following line:
row.append('<td class="day' + clsName + '">' + prevMonth.date() + '</td>');
to:
row.append('<td class="day' + clsName + ' ' + cssClass + '">' + prevMonth.date() + '</td>');
You can modify your 'faulted' class to any color you want. But mine looks like this:
.faulted {
background-color: red !important;
}
Out put looks like this:

Related

Update the data in amcharts in angular5

I am using xy chart in amcharts as per my requirement.
In that amcharts, whenever on click of a bubble, I need to highlight the bubbles. So I have added listeners to my options as follows:
"listeners": [
{
"event": "clickGraphItem",
"method": function(event) {
var bubbleId = event.item.dataContext.id;
var toolTip = "";
dataProvider.forEach((data) => {
if (bubbleId != "" && bubbleId == data.id) {
if (data.bubbleSize == 10) {
data.bubbleSize = 20;
data.shape = "diamond";
} else {
data.bubbleSize = 10;
data.shape = "round";
}
} else {
data.bubbleSize = 10;
data.shape = "round";
}
});
this.AmCharts.updateChart(this.chart, () => {
// Change whatever properties you want
this.chart.dataProvider = dataProvider;
});
}
}],
But I am getting an error as "Cannot read property 'Amcharts' of undefined". I am not able to resolve the issue. Can anyone help me on this?
Referal Code for Amcharts angular as follows:
https://github.com/amcharts/amcharts3-angular2

Dojo dgrid: Filter data from store with diffrent fields when I click on filter button

I am using 'dgrid/Grid' and dstore/RequestMemory for creating grid and storing data. Now I want to filter data according to values in the fields(see img). I am not sure how to filter data when using simple Dgrid and dstore.
var structure = [{
label : "Value Date",
field : "valueDate"
}, {
id: "currencyCol",
label : "Currency",
field : "currency"
}, {
label : "Nostro",
field : "nostroAgent"
}];
var store= new RequestMemory({
target: 'getReportData',
idProperty: "cashflowId",
headers: structure
});
// Create an instance of OnDemandGrid referencing the store
var grid = new(declare([Grid, Pagination, Selection]))({
collection: store,
columns: structure,
loadingMessage: 'Loading data...',
noDataMessage: 'No results found.',
minRowsPerPage: 50,
}, 'grid');
grid.startup();
on(document.getElementById("filter"), "click", function(event) {
event.preventDefault();
grid.set('collection', store.filter({
**currencyCol: "AED"**
.
.
.
}));
Any help would be appreciated or suggest if I use some diffrent store or grid.
I got the solution for my question. On filter button click I have written all my filtering logic and the final store will set to dgrid:
on(document.getElementById("filter"), "click", function(event) {
var store= new RequestMemory({
target: 'getReportData',
idProperty: "cashflowId",
headers: structure
});
var from=dijit.byId('from').value;
var to=dijit.byId('to').value;
var curr=dijit.byId('currency').value;
var nos=dijit.byId('nostro').value;
var authStatus=dijit.byId('authStatus').value;
var filterStore;
var finalStore=store;
var filter= new store.Filter();
var dateToFindFrom;
var dateToFindTo;
if (from != "" && from !== null) {
var yyyy = from.getFullYear().toString();
var mm = ((from.getMonth()) + 1).toString(); // getMonth() is zero-based
var dd = from.getDate().toString();
if(mm <= 9){
mm= "0" + mm;
}
if(dd <= 9){
dd= "0" + dd;
}
dateToFindFrom =yyyy + mm + dd;
filterStore= filter.gte('valueDate', dateToFindFrom);
finalStore=finalStore.filter(filterStore);
}
if (to != "" && to !== null) {
var yyyy = to.getFullYear().toString();
var mm = ((to.getMonth()) + 1).toString(); // getMonth() is zero-based
var dd = to.getDate().toString();
if(mm <= 9){
mm= "0" + mm;
}
if(dd <= 9){
dd= "0" + dd;
}
dateToFindTo =yyyy + mm + dd;
filterStore= filter.lte('valueDate', dateToFindTo); //.lte('valueDate', dateToFindTo);
finalStore=finalStore.filter(filterStore);
}
if(curr != "" && curr !== null) {
filterStore= filter.eq('currency', curr);
finalStore=finalStore.filter(filterStore);
}
if(nos != "" && nos !== null) {
filterStore= filter.eq('nostroAgent',nos);
finalStore=finalStore.filter(filterStore);
}
if(authStatus != "" && authStatus !== null) {
if (authStatus=='ALL') {
var both= [true, false];
filterStore= filter.in('approved', both);
finalStore=finalStore.filter(filterStore);
} else if (authStatus=='Authorised Only') {
filterStore= filter.eq('approved', true);
finalStore=finalStore.filter(filterStore);
} else if (authStatus=='Unauthorised Only') {
filterStore= filter.eq('approved', false);
finalStore=finalStore.filter(filterStore);
};
};
grid.set('collection', finalStore);
});

Vertical legend in pieChart in one column in nvd3

I need vertical legend in PieChart.
Now library provide only 2 options: top/right.
If use right - legend is in several columns. I need legend in one column.
I found one hack - correct transform value and put legend in one column.
var positionX = 30;
var positionY = 30;
var verticalOffset = 25;
d3.selectAll('.nv-legend .nv-series')[0].forEach(function(d) {
positionY += verticalOffset;
d3.select(d).attr('transform', 'translate(' + positionX + ',' + positionY + ')');
});
It works, but If I click to legend to update it - legend return to start position (several columns).
JSFiddle example
A workaround for this is to update the legend for every click and double click of .nv-legend.
(function() {
var h = 600;
var r = h / 2;
var arc = d3.svg.arc().outerRadius(r);
var data = [{
"label": "Test 1",
"value": 74
}, {
"label": "Test 2",
"value": 7
}, {
"label": "Test 3",
"value": 7
}, {
"label": "Test 4",
"value": 12
}];
var colors = [
'rgb(178, 55, 56)',
'rgb(213, 69, 70)',
'rgb(230, 125, 126)',
'rgb(239, 183, 182)'
]
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) {
return d.label
})
.y(function(d) {
return d.value
})
.color(colors)
.showLabels(true)
.labelType("percent");
d3.select("#chart svg")
.datum(data)
.transition().duration(1200)
.call(chart);
var svg = d3.select("#chart svg");
function updateLegendPosition() {
svg.selectAll(".nv-series")[0].forEach(function(d, i) {
d3.select(d).attr("transform", "translate(0," + i * 15 + ")");
})
}
svg.select('.nv-legend').on("click", function() {
updateLegendPosition();
});
svg.select('.nv-legend').on("dblclick", function() {
updateLegendPosition();
});
updateLegendPosition();
return chart;
});
}())
#import url(http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono);
#chart svg {
height: 600px;
}
.nv-label text{
font-family: Droid Sans;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<div id="chart">
<svg></svg>
</div>
A Quick Hack.
Modify the nv.d3.js
Line 11149 (May differ on other versions )
// Legend
if (showLegend) {
if (legendPosition === "top") {
Add another option vertical
} else if (legendPosition === "vertical") {
var legendWidth = nv.models.legend().width();
var positionY = 10;
var positionX = availableWidth - 200;
var verticalOffset = 20;
if ( margin.top != legend.height()) {
margin.top = legend.height();
availableHeight = nv.utils.availableHeight(height, container, margin);
}
legend.width(200);
// legend.height(availableHeight).key(pie.x());
positionY += verticalOffset;
wrap.select('.nv-legendWrap')
.datum(data)
.call(legend)
.attr('transform', 'translate(' + positionX + ',' + positionY + ')');
}
Also can play with variables.
Works very nice with Legends. For a very long list of legends. More logic want to apply.
I know this is an old question, but I had the same one and ended up here. None of the answers worked for me, but I was able to modfiy Ranijth's answer and get it working (and looking nice).
else if (legendPosition === "vertical") {
var pad=50;
var legendWidth=150; //might need to change this
legend.height(availableHeight).key(pie.x());
legend.width(legendWidth);
wrap.select('.nv-legendWrap')
.datum(data)
.call(legend)
.attr('transform', 'translate('+ ((availableWidth / 2)+legendWidth+pad)+','+pad+')');
}
Pie Chart with Vertical Legend

MVC 4, in JQuery grid one column has to be repalaced with picture and be link which opens JQdialog

I'm a beginner in MVC. I have a column which must be shown as a picture (now it is a text) and also when user click to picture it shows the dialog with new view. As i googled, i can use formatter only one time, what should i use then to implement it?
{ name: 'SimType', label: 'SimType', template: columntemplates.textTemplate, width: 50, editable: true, editrules: { edithidden: false }, formatter: linkFormat2, unformat: linkUnFormat2, editoptions: { disabled: 'disabled' } },
function linkFormat2(cellvalue, options, rowObject)
{
var linkUrl = '#Url.Action("GetMobilePhoneModels", "MobilePhoneModel", new { phonenumber = "Id" })'.replace('Id', rowObject['PhoneNumber']);
return '<span class="MobilePhoneModel">' + cellvalue + '</span>';
}
OR
function linkFormat2(cellvalue, options, rowObject)
{
var cellValueInt = parseInt(cellvalue);
if (cellValueInt = "mobile")
return "<img src='../../Content/Images/Devices/mobile.png' width='11px' height='20.75px' alt='" + cellvalue + "' title='" + cellvalue + "' />";
}
it works separatly, but not possible together.
Any help is appreciated. Thanks.
i solved it by combining, if somebody need:
function linkFormat2(cellvalue, options, rowObject) {
var cellValueInt = parseInt(cellvalue);
if (cellValueInt = "mobile")
{
var linkUrl = '#Url.Action("GetMobilePhoneModels", "MobilePhoneModel", new { phonenumber = "Id" })'.replace('Id', rowObject['PhoneNumber']);
return '<span class="MobilePhoneModel"><img src="../../Content/Images/Devices/mobile.png" width="11px" height="20.75px" alt="' + cellvalue + '" title="' + cellvalue + '" /></span>';
}
}

dojo.connect / dojo.hitch scope problem?

I have a programmer class that populates a ul with project names and checkboxes - when a checkbox is clicked a popup dialog is supposed to show with the programmers id and the project name. dojo.connect is supposed to setup onclick for each li but the project (i) defaults to the last value (windows). Any ideas why this is happening?
...
projects: {"redial", "cms", "android", "windows"},
name: "Chris",
id: "2",
constructor: function(programmer) {
this.name = programmer.name;
this.id = programmer.id;
this.projects = programmer.projects;
},
update: function(theid, project) {
alert(theid + ", " + project);
},
postCreate: function() {
this.render();
// add in the name of the programmer
this.programmerName.innerHTML = this.name;
for(var i in this.projects) {
node = document.createElement("li");
this.programmerProjects.appendChild(node);
innerNode = document.createElement("label");
innerNode.setAttribute("for", this.id + "_" + i);
innerNode.innerHTML = i;
node.appendChild(innerNode);
tickNode = document.createElement("input");
tickNode.setAttribute("type", "checkbox");
tickNode.setAttribute("id", this.id + "_" + i);
if(this.projects[i] == 1) {
tickNode.setAttribute("checked", "checked");
}
dojo.connect(tickNode, 'onclick', dojo.hitch(this, function() {
this.update(this.id, i)
}));
node.appendChild(tickNode);
}
},
Just found out that extra parameters can be attached to the hitch:
dojo.connect(tickNode, 'onclick', dojo.hitch(this, function() {
this.update(this.id, i)
}));
should be:
dojo.connect(tickNode, 'onclick', dojo.hitch(this, "update", this.id, i));
Why are you calling this.render()? Is that your function or the widget base (i.e. already in the lifecycle)? For good measure make sure to call this.inherited(arguments); in postCreate.
My guess would be that tickNode is not in the DOM yet for the connect to work. Try appending the checkbox before you setup the connect. The last one is being fired because it is being held on by reference. You can try something like this instead:
for(var i = 0; i < this.projects.length; i++) {
var p = this.projects[i];
node = document.createElement("li");
this.programmerProjects.appendChild(node);
innerNode = document.createElement("label");
innerNode.setAttribute("for", this.id + "_" + p);
innerNode.innerHTML = p;
node.appendChild(innerNode);
tickNode = document.createElement("input");
tickNode.setAttribute("type", "checkbox");
tickNode.setAttribute("id", this.id + "_" + p);
if(i == 0) { //first item checked?
tickNode.setAttribute("checked", "checked");
}
node.appendChild(tickNode);
dojo.connect(tickNode, 'onclick', function(e) {
dojo.stopEvent(e);
this.update(this.id, p);
});
}
I would consider looking into dojo.create as well instead of createElement as well. Good luck!
Alternatively, and I think it's cleaner, you can pass the context into dojo.connect as the third parameter:
dojo.connect(tickNode, 'onclick', this, function() {
this.update(this.id, i);
});