Is there any way to customize Vaadin calendar's month style?
It's default is 1 Dec and i want to make Dec to bold. 1 Dec
Any solutions?
You need to overwrite the default style
.v-calendar-header-month {
font-weight: bold;
}
I have not tested that style, so I am not sure if is what you are looking for, however is a good aproach.
More info here.
Related
I need to change the default icon colour in Time pickers. but I don't know the way. If you can help me with this, It's really mean to me. Changes can see the below picture.
Use the class css-i4bv87-MuiSvgIcon-root:
.css-i4bv87-MuiSvgIcon-root{
color: red;
}
You can check this demo
When I use lightning inline editable data table component, the status bar would cover the edit panel.
I think it might is a SLDS bug.
I ran into this problem as well. I agree that I think it is a CSS issue on the SLDS side.
I'm using a lightning:datatable with inline editing, and I noticed that the footer bar div with the Cancel/Save buttons is using the 'slds-docked-form-footer' class, which sets the z-index at 8000.
Crawling up from the datepicker I noticed that the "table cell" contains a section element that has inline styling setting the z-index to 7002. That section element also has a class of "slds-popover_edit", so my workaround solution was to put this into my lightning component's css file:
.THIS section.slds-popover_edit {
z-index: 9999 !important;
}
Hope this helps, or that you've found a better solution by now. I'm going to test my page to make sure this change didn't have any unintended consequences.
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>
I'm using react-day-picker and in here the custom modifier styles are added to outside days of month.
How can I avoid adding those styles to dates which is disabled and outside of the month?
You can restrict your CSS selector with :not('.DayPicker-Day--outside'), for example:
.DayPicker-Day.DayPicker-Day--thursdays:not('.DayPicker-Day--outside') {
background: yellow;
}
My users are complaining that the change in color for md-buttons on focus is too subtle.
What is the right way to make an adjustment to this for the default color palettes?
Append: I am looking on how to adjust the button styling when the button has focus, not looking for how to create my own theme.
Also, I am using Angular-Material 1, NOT 2
OK, for anyone else looking for this, I found the answer in angular-material.modules.closure.button and angular-material.modules.js.button
.md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]):hover {
background-color: '{{primary-600}}'; }
.md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]).md-focused {
background-color: '{{primary-600}}'; }
This tells me what I needed, which is that focused buttons get primary-600.
NOW I can customized the theme palletes as recommended in the first comment