I am using the FullCalendar JQuery plugin and fetching the events data via a simple array of events. That works fine, however, I can't seem to set custom colors for those events. I've followed the official documentation. What am I doing wrong? I am trying to set the 'color' and 'textColor' options to be yellow and black like so:
$('#calendar').fullCalendar(
{
events: [
{
title: 'Event1',
start: '2015-05-04'
},
{
title: 'Event2',
start: '2015-05-05'
}
],
color: 'yellow', // an option!
textColor: 'black' // an option!
}
)
But, when you visit the demo link here, you can see that it does not take effect. Can someone point me in the right direction? The official documentation about doing this method is here.
I tried locally, its working fine...
$('#calendar').fullCalendar(
{
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventSources: [
{
events: [ // put the array in the `events` property
{
title : 'event1',
start : '2015-05-01'
},
{
title : 'event2',
start : '2015-05-05',
end : '2015-05-07'
},
{
title : 'event3',
start : '2015-05-09T12:30:00',
}
],
color: 'yellow', // an option!
textColor: 'black' // an option!
}
// any other event sources...
],
});
http://fullcalendar.io/docs/usage/ states:
The above code should be in a tag in the head of your page
Have you tried moving the <script /> code to the head of your page? Currently you have it below your calendar.
Related
I am using chart.js, Laravel 5.4 and blade templates.
I have to show doughnut chart and when user click on particular area then it should show the name of selected label and value belongs to it in the modal but firstly I am not able to get label name when user click on doughnut chart.
<br>var bookings = {!! json_encode($bookings) !!} ;
<br>var map={"confirmed":{"label":"Confirmed","color":"#4BC0C0"},"cancelled":{"label":"Cancelled","color":"#FFCD56"},"on_request":{"label":"On Request","color":"#FF6384"}}
<br>#if($hasChart)
<br>var labels=[],colors=[],numbers=[],hasChart=false;
<br>for (var property in map) {
<br>if(bookings[property].length>=0){
<br>hasChart=true;
<br>labels.push(map[property]["label"]);
<br>colors.push(map[property]["color"]);
<br>numbers.push(bookings[property].length);
}
}
var ctx = document.getElementById('doughnut-chart').getContext('2d');
<br>var chart = new Chart(ctx, {
<br>type: 'doughnut',
<br>data: {
<br>labels: labels,
<br>datasets: [
<br>{
backgroundColor: colors,
data: numbers
}
]
<br>},
<br>options: {
onClick: (e) => {
<br>//to do get value of selected label
<br>$('#bookingInfoModal').modal('show');
},
<br>maintainAspectRatio: false,
<br>elements: {
<br>arc: {
borderWidth: 0
}
}, <br>
<br>plugins: {
<br>legend: {
display: true,
position: "right",
align: "end",
padding: 50,
labels: {
boxWidth: 10,
color: '#000000',
},
<br>},
<br>},
<br>},
<br>});
I got it. it's working now.
options: {
onClick: (e,legend) => {
console.log(legend[0].index);
alert(chart.data.labels[legend[0].index]);
},
}
I am needing to override the color of the sort icon in a MUIDataTable. I am currently able to override basically everything else except this.
Through the debugger view I have tried quite a bit and cannot seem to touch on this icon.
This is what I am currently trying to call to get to it
MuiTableSortLabel: {
icon: {
color: "#eee",
},
iconDirectionAsc: {
color: "#eee",
},
iconDirectionDesc: {
color: "#eee",
},
},
I have this called as well within the overrides -
MuiSvgIcon: {
root: {
color: "#eee",
},
},
The sort icon is currently the default color (black) as this code does nothing to style the icon.
enter image description here
Update work around: This does not satisfy the overrides but is called in styles-
'#global': {
'div > span > svg > path': {
fill: '#eee'
},
},
Based on #anthony-z answer this worked, just "& path" instead of "& svg":
const StyledTableSortLabel = withStyles(theme => ({
icon: {
backgroundColor: grey[500],
'& path': {
fill: '#eee'
},
}
}))(TableSortLabel)
This'll probably do it for you.
MUIDataTableHeadCell: {
sortAction: {
'& svg': {
color: "#eee" // or whatever you need
}
}
}
To override the sort icon color, try
overrides: {
MuiTableSortLabel: {
active: {
color: 'green' // your color here
}
}
}
If you need help with custom style overrides in general, you can check out the example here: https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js.
try this it has worked for me
MuiTableSortLabel: {
root: {
'&$active': {
color: **<your color>**
'&& $icon': {
color: <your color>
},
},
},
},
Bottom of highcharts rendered chart in pdf
I am attempting to render a highcharts chart inside a blade template and then pass the resulting view/html to DocRaptor in order to turn it into a pdf. The view is rendered with Laravel's View::make and then the render() function. Everything is working as expected except the rendered bars do not match up to the tick marks on the yAxis (horizontal).
I've included an image of what I'm referring to. In the image 2 of the bars (Saturn and Lexus) should be past the 1M tick and I would expect Acura to be further right towards the 1M tick mark. The image only contains the last 3 bars in the graph, but the same holds true for the series as whole.
Less relevent is that I've essentially split up the series data into small enough chunks such that the chart would fit on a page (hence the jQuery $.each()).
The code that produces the chart is below. The code inside the load and render functions are both executed as the document.write debug statements. Any help/ideas would be appreciated.
$("div[id^='Chart_chunk_count_']").each(function() {
var myChart = Highcharts.chart($(this).attr("id"), {
chart: {
borderWidth: 0,
events: {
load: function(event) {
document.write('In load event');
},
render: function(event) {
document.write('In render event');
}
},
height: j_audience_chart_chunks['metadata']['page'][$(this).data("chart-page")]['height'],
type: 'bar',
width: 650
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
bar: {
borderRadius: 3,
borderWidth: 0,
color: j_audience_chart_chunks['metadata']['count_chart']['color'],
pointWidth: 30,
turboThreshold: 0
},
series: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
/* allowOverlap: true, */
/* backgroundColor: '#FA9005', */
color: '#606060',
crop: false,
defer: false,
enabled: true,
format: '{point.y:,.0f}',
inside: true,
/* overflow: 'none', */
style: {
fontSize: "11px",
fontWeight: "normal",
textOutline: 'none'
}
}
}
},
title: {
text: (type == "index") ? "Index Against Profiled Audience" : "Audience Count"
},
tooltip: {
enabled: false
},
xAxis: {
categories: j_audience_chart_chunks['audience_data'][$(this).data("chart-page")]['categories'],
minorTickInterval: null,
title: {
text: null
}
},
yAxis: {
min: (type == 'count') ? 0 : -100,
max: j_audience_chart_chunks['metadata']['count_chart']['max'],
title: {
text: null
},
labels: {
/* format: '{point.y:,.0f}', */
overflow: 'justify'
/*
style: {
color: '#fa9005'
}
*/
}
},
series: j_audience_chart_chunks['audience_data'][$(this).data("chart-page")]['series']
});
});
What's happening is that the JavaScript finishes and DocRaptor/Prince begins building the PDF, but the default Highcharts animations haven't finished running. Disabling animations chart wide fixes this.
You need set chart.animation to false like:
chart: {
animation: false
}
I want to have everything like this example
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-allowpointselect-pie/
but ion the application it works slightly different. When I am clicking on the segment it changes the color after animation. So it works like this example, if I will change the rows
from
`series: {allowPointSelect: true}`
to
series: {
allowPointSelect: true,
states: {
select : {
color: '#00FF00'
}
}
}
`
What is the problem, could someone help me to understand this problem
It sounds like you have different version of Highcharts - maybe some old version has that kind of bug?
Anyway, try to set color: null directly. See:
plotOptions: {
series: {
allowPointSelect: true,
states: {
select : {
color: null
}
}
}
},
http://jsfiddle.net/MmJ4t/2/
If this won't help, the only solution may be to set for each point directly selected color:
series: [{
data: [{
y: 29.9,
states: {
select: {
color: 'red'
}
}
}, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
I have a MVC Sencha Touch application I'm building and am having some issues getting the TabPanel to function correctly. The issue is this, when I have my PosViewport.js like this, everything works fine:
touch.views.PosViewport = new Ext.extend(Ext.TabPanel, {
initComponent: function () {
console.log("inside initComponent() of PosViewport.js");
touch.views.PosViewport.superclass.initComponent.call(this);
},
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
layout: 'fit',
scroll: 'vertical',
items: [
{
title: 'Reciepts',
iconCls: 'bookmarks',
html: 'one'
},
{
title: 'POS',
iconCls: 'Favorites',
html: 'two'
}
]
});
Here, everything is great! The tab bar shows up on the bottom, it fits perfectly, and I can switch back and forth between the two with no problems.
However, instead of keeping those panels inside my PosViewport.js file, let's move them out to two seperate files:
View1.js:
touch.views.View1 = new Ext.extend(Ext.Panel, {
initComponent: function () {
touch.views.View1.superclass.initComponent.call(this);
},
layout: 'fit',
scroll: 'vertical',
fullscreen : true,
title: 'Reciepts',
iconCls: 'bookmarks',
html: 'panel one'
});
and View2.js:
touch.views.View2 = new Ext.extend(Ext.Panel, {
initComponent: function () {
touch.views.View2.superclass.initComponent.call(this);
},
layout: 'fit',
scroll: 'vertical',
fullscreen : true,
title: '2',
iconCls: 'bookmarks',
html: 'panel two'
});
I add both new views to my index.html. Now, I update my PosViewport.js to point to the new views:
touch.views.PosViewport = new Ext.extend(Ext.TabPanel, {
initComponent: function () {
console.log("inside initComponent() of PosViewport.js");
touch.views.PosViewport.superclass.initComponent.call(this);
},
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
layout: 'fit',
scroll: 'vertical',
items: [ touch.views.View1, touch.views.View2]
});
And it all goes to hell. The Bottom Tab Bar is not visible, as only a tiny piece of the top is visible on the page. The panels do not show up at all, I cannot see their HTML content at all.
What is going on here? I have absolutely no idea why it is behaving like this. Any pointers in the right direction are much appreciated, thank you!
In the second case you created two classes by this:
touch.views.View2 = new Ext.extend(Ext.Panel, { // Class definition
whereas you needed two instances of these panels. So, add the items like this:
items: [new touch.views.View1(), new touch.views.View2()] // Panel instance
This should work now. And remove the fullscreen:true option from these panels. fullscreen means, it will make the panels take whole viewport area.