I want to specify the color of the event when I add it to my calendar.
For example
I can add an event and set it to a specific color using CSS
(.has-event) but this makes all my events the same color. I want to
add two different events and each event has one color (yellow and
green).
I can add events to the calendar by using the events configuration in one of the two form:
events: ['Sat Jun 28 2014'], or
events: [{ date: new Date('Sat Jun 28 2014'), backgroundColor: '#FDD800', color: '#FFFFFF' }],
I would think that the latest one would be the one to solve my problem but it's not working.
Can you please tell me what am I doing wrong?
you can see the different colours only when you change the view from say monthly to daily. I had the problem and it seems this is a limitation.
I solved it by building a style tag in the document, there is no flashing using css.
<style>
[data-pika-year="2021"][data-pika-month="3"][data-pika-day="20"] {
color: white;
background-color: blue;
}
</style>
Related
I'm new to React and wanted to ask what's the cleanest way to implement a background design like this. I want to know how you could change the background to blue and have the images overlap into the white area or the rings in the corners. So what is the best approach? And I don't want to use a background image
Background I want to implement
position: fixed;
background: "your image or some colors";
width: 100%;
height: 100vh;
Other contents should appear accordingly if you apply proper z-index
There are several options.
You can add !important behind the code that wnna be overwrite.
add z-index for the each element. note : the higher z-index number of the element, it will be place at the top.
in-line style. where you can add tag style={{ your style here}} within your element. example
<div style={{z-index : 10, backgroundImage : black}} > Text here </div>
manual CSS with tag backgroud-image.
With extjs 5, by default, the tab title is aligned to the center.
With extjs 6 I can not get the same result and the titleAlign config does not work.
I tried to solve with tabConfig that although it is not available in the extjs 6 documentation it still works.
Any idea how to solve it?
Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2oo3
You can use
style: {
'text-align': 'center'
}
in your tabConfig. Here's the FIDDLE
I think this is a bug. The tab button is represented by the Ext.tab.Tab class.
Represents a single Tab in a Ext.tab.Panel. A Tab is simply a slightly
customized Ext.button.Button, styled to look like a tab.
And like all the buttons it has the textAlign config, the one that you are looking for. It says that by default it has the center value, but it doesn't seem to work. Although left and right values do seem to work.
EDIT
This is a css bug, to apply a global fix just append this rule to the application:
.x-tab-button-center {
text-align: center;
}
I am using angular-chart.js to create a dashboard. Instead of using the built in legend within the canvas I created my own and am using ng-repeat to dynamically create the labels with matching colors.
Now, what I would like to accomplish is this: when an item is hovered in my custom legend it would highlight that item in the graph and vice versa.
I was thinking that perhaps if I can find what the event that is triggering the tooltip event I can manipulate that and create a ng-mousover expression...
is this even possible?
Thanks,
Emad
Not exactly, the same but someone posted an example of hiding / showing line on legend click: https://github.com/jtblin/angular-chart.js/issues/70
In Chart.js 2.x, there is support for an onclick event as well on the legend to something similar: http://www.chartjs.org/docs/#chart-configuration-legend-configuration
color: [
{
backgroundColor: ['#92d06f', '#73c8b8', '#3bb9ab'],
borderColor: 'rgba(255, 255, 255, 0)',
hoverBackgroundColor: ['#92d06f', '#73c8b8', '#3bb9ab'],
hoverBorderColor: ['#92d06f', '#73c8b8', '#3bb9ab'],
hoverBorderWidth: 10,
hoverRadius: 0
}
],
It works fine when mouse over on active segment in angular 2
There is simple form and some textfields on this form. I have to set colors
(background and font) in two of them on runtime.
I tried to do it two ways:
1) fieldInstance.addClass('aaa') with css like this
.aaa .x-form-field {
background-color: black;
color: red;
}
2) fieldInstance.setFieldStyle('font-weight: bold;color: red;background-color: black;');
both methods are working because I see the bottom age of both is
fields is thick in black color, and both fields are working the same (almost) way.
Before enter and after exit background color is white.
When I start to edit this fields, background of first
is always white, background of the second is black until
I leave the field.
Could you explain me whats wrong?
For <input> element applied many classes beside x-form-field, like x-form-text and some of them define color and background-color aswell. So I guess that some of that classes may be more specific than .aaa .x-form-field. Try to use !important within your CSS rules:
.aaa .x-form-field {
background-color: black !important;
color: red !important;
}
I think that the 1st function append a class to the Others already presents.
In the second case you replace values of style already setted.
Maybe to have the same issue you need to modify the x-form-field fields, instead of append Others.
I Always use the second option if i have to modify style on Runtime.
maybe posting other code i can see better where the problem could present
In Angular js ui rid, how can I remove vertical and horizontal scrollbars ?
And also for each column heading I am getting a little carrot icon by default, which shows sort ascend, sort descent, Hide column. I want to remove this also from my column headings.
Instead .table-striped which comes by default for ui grid, I want to use .table-bordered. Is there any place to set these parameters to ui grid?
enableHorizontalScrollbar : 0,
enableVerticalScrollbar : 0,
enableSorting : false,
enableColumnMenus : false;
Good answer from #Asqan answering the first part of your question. For the second part:
Instead .table-striped which comes by default for ui grid, I want to use .table-bordered. Is there any place to set these parameters to ui grid?
I'm thinking you mean you want the look in this plunker I created.
You can solve these css issues in one of two general ways.
1) Customize the ui-grid css
2) Leave the original ui-grid css then override it in your own css file
I've shows the first option to solve your "stripped" issue and the second option to implement your desired border. I have done both for example only so you can see both options - I recommend choosing and using consistently one method or the other.
The ui-grid sets the ".table-striped" look to which you are referring in the css. You can override this either in you own css file or using the customizer tool and setting the #rowcoloreven and #rowcolorodd fields to the hex code for white #ffffff. This will update the ui-grid css to contain the below:
.ui-grid-row:nth-child(odd) .ui-grid-cell {
background-color: #ffffff;
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
background-color: #ffffff;
}
For ".table-bordered" see specifically in the style.css file these added lines
.ui-grid-cell {
border-style: solid;
border-bottom: 1px #ff0000;
}