I'm trying to add some icons to the header as buttons, I've tried using both bootstrap and fontawesome as mentioned in the docs but I get an empty square instead of the icon. When using the bootstrap theme I get 'undefined', when using the standard I get the below.
Here's my code:
const customButtons = {
custom1: {
icon: "fa-times",
click: function() {
alert('test');
}
}
}
<CustomCalendar
customCalendarRef={customCalendarRef}
select={(e: any) => processClick(e)}
customButtons={customButtons}
themeSystem="standard"
header={{
right: '',
center: '',
left: 'prev,next today custom1'
}}
/>
Result:
How can I show an icon as a button in the header?
I'm also using fullcalendar in my react app so I've tried using your code. First there's one thing you forgot, wich is fontawesome icons also needs the "fa" class, so the correct would be fa fa-times, not only fa-times.
But then there's another issue which is the icon comes with custom fullcalendar classes when rendered:
So a solution you might use is to add this to your css somewhere:
.fc-icon.fa {
font: normal normal normal 14px/1 FontAwesome !important;
}
It worked for me:
Edited:
The string of the fontawesome classes should start with a blank space otherwise the 'fa' class will concatenate with the fullcalendar class. So: icon: ' fa fa-times'
Related
I want to change the color of the label circled here:
How would I go about doing so?
I have tried changing the color of the primary colors on the palette. Also, there does not seem to be a way to do it through CSS without affecting other components.
Here's my current code for the theme:
const calendarTheme = createMuiTheme({
overrides: {
MuiPickersDay: {
day: {
color: "#436E70",
},
daySelected: {
backgroundColor: "#436E70",
},
dayDisabled: {
color: "#436E70",
},
current: {
color: "#436E70",
},
},
},
});
Material-UI pickers v3.3.10
https://material-ui-pickers.dev/guides/css-overrides
Variant: static
Npm package used: #material-ui/pickers
Someone suggested this post: Change header color of Material-UI Date Picker
That solution is 5+ years old already,getMuiTheme is not part of v3.3.10. Also the way described in that post does not work anymore, it does not matter where in the createMuiTheme object I put
datePicker: {
color: palette.primary1Color,
textColor: palette.alternateTextColor,
calendarTextColor: palette.textColor,
selectColor: palette.primary2Color,
selectTextColor: palette.alternateTextColor,
calendarYearBackgroundColor: palette.canvasColor,
headerColor: palette.pickerHeaderColor || palette.primary1Color,
},
It does not work, it doesn't have any effects. And the documentation also doesn't bring much light to the case.
Thanks in advance.
According to the documentation from your link the datepicker has a rule (sometimes called slot) called MuiPickersCalendarHeader. This rule is used to provide styling to a <div> tag that is an ancestor to the <p> tag that contains the text you've circled in your sample image (i.e. "July 2022"). You can see how these tags are structured in the Inspector tab of the Developer Tools Window in Firefox (in the browser highlight the text "July 2022", right-click the highlighted text, then from the context menu choose Inspect). Knowing the tag structure, we can apply a CSS selector to target the <p> tag like so:
const calendarTheme = createMuiTheme({
overrides: {
MuiPickersDay: {
...
// MuiPickersCalendarHeader rule
MuiPickersCalendarHeader: {
switchHeader: {
['& > div > p']: {
// backgroundColor: lightBlue.A200,
// color: "white",
},
},
},
...
}
}
The above code is untested. If you have problems with it say so in a comment, and I'll try to test it.
I have a series of objects that look like this:
{
color: '#7018A7',
icon: 'User',
label: 'todd',
text: "Lorem ipsum..."
},
I need to use my icon property inside a Font Awesome Component <FontAwesomeIcon icon={icon}. However, I'm importing the icons I need import {faUser} from '<font awesome library>'. Of course, if I interpolate the icon's name (icon={`fa${icon}`}), I get an error because it is not equal to the actual imported icon.
Is there any way to refer to the imported icon by using the variable/property name?
The problem: FontAwesomeIcon does not accept a string as an argument.
The solution: have the icon property's value set to the imported icon
icon: faUser
The requirement is to have 'inline editing' of some cell in Tabulator based table.
The cell requires a custom editor since the input is a custom component (which is already used in another form, outside of Tabulator).
Our environment is React + Tabulator (v4.7) + BlueprintJS as the components library.
The problem is that the component won't fully open as a custom editor in Tabulator, while working fine outside of Tabulator, in a regular form.
Why the component won't fully open?
The custom component serving as the 'editor' for this cell is using Blueprint (BP) 'popover' so it has a popover target and a content. This is how it looks like in a form edit:
The problem is that upon clicking, the popover target is being rendered but the popover content is not, so the custom 'dropdown' input component is never appearing:
Relevant code sections
Tabulator column definition:
{
title: "Some Col Title",
field: "someField",
formatter: someFieldFormatter,
editor: "someFieldEditor" as Tabulator.Editor,
editorParams: (cell) => {
return { cell, zones: zonesDataTree };
},
},
Defining custom cell editor:
Tabulator.prototype.extendModule("edit", "editors", {
someFieldEditor: (
cell: CellComponent,
onRendered: Function,
success: Function,
cancel: Function,
editorParams: SomeFieldCellEditorParams
): Element => {
const elem = document.createElement("div");
// SomeFieldCellEditor is a React component that wraps around the same component used in
// the "regular form" scenario mentioned in the screenshot
const someFieldCellEditorComponent: any = React.createElement(SomeFieldCellEditor, {
theData: editorParams.data,
});
ReactDOM.render(someFieldCellEditorComponent, elem);
return elem;
},
});
This is happening because the element is contained inside of the cell.
To prevent corruption of the table layout, tabulator cells have overflow:hidden defined on their CSS.
Most dropdown libraries have a an option that lets you set where in the DOM the list should be appended. You can use this potion to append the list to the body tag which should resolve the issue.
On a side note, did you know that Tabulator comes with built in Select and AutoComplete Editors
I'm working with react-native and I have created an Alert element.
Alert.alert(
'Warning',
'bla bla bla',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
]
)
Now I'd like to apply some style to it. Let's say I want to apply to it a red background color and white color for the text.
How can I achieve this? Is it possible?
There actually is a way to customize the text on the buttons but you're limited to what is provided... Below is the type definition from react native. Then a simple example showing a red button. Basically the "default" is blue, "cancel" is bold but still blue and "destructive" is red.
**
* An Alert button style
*/
export type AlertButtonStyle = $Enum<{
/**
* Default button style
*/
'default': string,
/**
* Cancel button style
*/
'cancel': string,
/**
* Destructive button style
*/
'destructive': string,
}>;
Alert.alert("Look out!",
"Hitting reset will wipe all the app's data on your phone. This cannot be undone!",
[
{text: 'Reset', onPress: this._doSomethingSerious, style: 'destructive'},
{text: 'Cancel'},
],
{cancelable: false}
)
You can use a custom library like react-native-modalbox.
You'll be able to style the modal as you like:
<Modal style={{background: 'red'}} ref={"modal1"}>
<Text style={{color: 'white'}}>Basic modal</Text>
<Button onPress={this.toggleSwipeToClose} style={styles.btn}>Disable swipeToClose({this.state.swipeToClose ? "true" : "false"})</Button>
</Modal>
You can open the modal using
openModal1(id) {
this.refs.modal1.open();
}
Check out the example to see more options.
Bonus: If you want to find a good library for react-native, try js.coach
I don't think this is possible, because the Alert component of react-native is something included in Android and iOS and cannot be modified :/
I recommend this kind of similar probleme here !
See ya !
I've been looking for this in android/rn sources.
Looking at the implementation code, it instantiates an AlertDialog.Builder, and looking at the android original source code for the AlertDialog.Builder, the constructor with only context uses a resolveDialogTheme with themeResId=0. Anyway, the important part about this method is this:
} else {
final TypedValue outValue = new TypedValue();
context.getTheme().resolveAttribute(R.attr.alertDialogTheme, outValue, true);
return outValue.resourceId;
}
The fallback style/theme is alertDialogTheme, so you can override the alert dialog default theme with android:alertDialogTheme like this:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:alertDialogTheme">#style/ThemeAlert</item>
</style>
<style name="ThemeAlert" parent="Theme.AppCompat.Light.Dialog.Alert">
<!-- This one changes buttons text color -->
<item name="colorAccent">#152849</item>
</style>
</resources>
I needed to change the text for default buttons, so this worked for me (at least on RN 0.61.5), but I'm not sure about which props could be changed.
Of course, this doesn't solve changing colors at runtime... if that's really needed you probably should use a lib or write a native module yourself.
I have a react bootstrap tooltip that works well unless I'm close to the edges of the window. In that case I want the tooltip not to be cut off but resized to accomadate the full text and have borders on all sides.
I also want the tooltip arrow to point just above the trigger element (in my case the 'i' icon).
My guess is that this requires working with the DOM once the ReactBootstrap.Tooltip has been rendered. I need to be able to calculate it's current size and window top and left offset positions and then re-position/re-size it.
Here's my current code (in CoffeeScript):
define [
'jquery',
'es6-shim',
'react',
'react-bootstrap'
], ($, _shim, React, ReactBootstrap) ->
{div, i, h2} = React.DOM
ToolTipHint = React.createFactory(
React.createClass
render: ->
tooltip = ReactBootstrap.Tooltip className: 'hint-content',
h2 className: 'hint-title', #props.fieldName
div className: 'hint-text', #props.tooltip
ReactBootstrap.OverlayTrigger(
trigger: ['hover']
placement: 'top'
overlay: tooltip
delayShow: 300
deplayHide: 150,
div className: 'hint-icon-container',
i className: 'gg-icon-tooltip hint-icon'
)
)
And here's the screenshot of the problem:
How can I fix this problem?
I had this very same problem when my trigger was close to the right side of the window. I fixed it by overwriting the max-width of the .popover class to:
.popover{
max-width: none;
}
and defining a width to the element inside the popover.
The tooltip has a "container" (just like the original bootstrap component that you can set). By default it is the body.
Try to play a bit with this option. I can't tell from what you provided what value you should use.