Default first day of a week in Kendo React JS's calendar library is Sunday.
Want starting day of a week should be Monday.
It is localized using the IntlProvider, see the documentation in the KendoReact site. In the example the calendar starts from Monday, and not Sunday, since it is using ES culture.
The IntlProvider provides the cultures to the DatePicker including the first day of week.
You can load the data from CLDR as it is from their repo. Or modify it first to match your needs and then load it. For example: weekData.supplemental.weekData.firstDay.US = 'mon';
Here is such override example with full code:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Calendar } from '#progress/kendo-react-dateinputs';
import { IntlProvider, load } from '#progress/kendo-react-intl';
import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
import currencyData from 'cldr-core/supplemental/currencyData.json';
import weekData from 'cldr-core/supplemental/weekData.json';
load(likelySubtags, currencyData, weekData);
weekData.supplemental.weekData.firstDay.US = 'mon';
class App extends React.Component {
render() {
return (
<IntlProvider locale={'en-US'}>
<div className="example-wrapper row">
<Calendar />
</div>
</IntlProvider>
);
}
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
);
And here is live version of the above.
Related
i have installed rellax.js in vue3 project.
import App from './App.vue'
import VueRellax from 'vue-rellax'
createApp(App).use(VueRellax).mount(#app)
but when i add rellax class on any components template tags its not working
<section class="rellax section portfolio-section pd-34" id="portfolio">
<PortfolioComponent />
</section>
not working when i add class rellax in component class even doesnot show in inspect
It looks like vue-rellax was never rewritten for Vue 3. You're likely better off to use the rellax library and import it into your components or as a window variable.
App.vue:
<script setup>
import { onMounted } from 'vue';
import Rellax from 'rellax'
onMounted(() => {
let rellax = new Rellax('.rellax');
})
</script>
I'm following a video course on React, and it is showing us the basics of creating a shopping cart that will eventually look something like this:
I am still early in the course. I am building a component and setting the attributes. Right now, it should just show "Zero" and have the word "Increment" on the button. The problem is, I cannot see the word "Zero" in the Chrome browser. Chrome shows that the word is there, though:
Here is my React code for counter.jsx:
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
class Counter extends Component {
state = {
count: 0
};
styles = {
fontSize: 30,
fontWeight: 'bold',
};
render() {
return (
<div>
<span style={this.styles} className='badge badge-primary m-2'>{this.formatCount()}</span>
<button className='btn btn-secondary btn-sm'>Increment</button>
</div>
);
}
formatCount() {
const { count } = this.state;
return count === 0 ? 'Zero' : count;
}
}
export default Counter;
It is called in index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.css';
import Counter from './components/counter';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Counter />
</React.StrictMode>
);
The course has a forum, and I asked a question about this yesterday >> HERE <<, but there has been no answer, and I cannot continue building the project with the 1st step not working.
Can someone point out what it is that I did wrong?
Also, I personally think that the formatCount() function should declare count as:
formatCount() {
const { count } = this.state.count;
return count === 0 ? 'Zero' : count;
}
But, that makes it so that the text "Zero" no longer appears in the Chrome debugger. Why?
(I included the bootstrap tag because the index page uses bootstrap, and it could be doing something that is hiding my text)
I've built a fairly simple React app based on create-react-app which uses the Material-UI for its interface components. It also depends on one of my own packages which also uses Material-UI (same version) for a couple of shared components.
Things were looking good locally until I ran a production build and deployed it. Some of the styles were behaving oddly, for example the Material-UI grid was much narrower than when running locally.
I did some reading and found a few instances of people discussing colliding class names under my scenario. This took me to some official Material-UI documentation which provides the following example code to use a custom class name prefix:
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName } from '#material-ui/core/styles';
const generateClassName = createGenerateClassName({
dangerouslyUseGlobalCSS: true,
productionPrefix: 'c',
});
function App() {
return (
<JssProvider generateClassName={generateClassName}>
...
</JssProvider>
);
}
export default App;
Before applying this fix when inspecting my production app's source code I could see the outermost DIV using the CSS class jss2 jss24.
After applying this fix my production app actually visually renders the same layout as my development version and so would appear to be fixed. However, examining the source shows the outermost DIV to have the class MuiGrid-container-2 MuiGrid-spacing-xs-8-24 which suggests to me something isn't right. I could leave it like this but it does mean I'm running with unoptimised code.
Am I doing something wrong here? Or is there an alternative resolution? I'm using current latest version of #material-ui/core (3.3.2) and the full contents of my App.js are:
import React, { Component } from 'react';
import { Provider } from "react-redux";
import { OidcProvider } from 'redux-oidc';
import JssProvider from 'react-jss/lib/JssProvider';
import Routes from './routes';
import store from './store';
import userManager from './utils/userManager';
import {
CustomUiTheme as Theme,
CustomUiLayout as Layout,
CustomUiSnackbar as Snackbar,
CustomUiModalAlert as Alert
} from 'custom-ui';
import Loading from './components/loading';
import { createGenerateClassName } from '#material-ui/core/styles';
const generateClassName = createGenerateClassName({
dangerouslyUseGlobalCSS: true,
productionPrefix: 'tw',
});
class App extends Component {
render() {
return (
<JssProvider generateClassName={generateClassName}>
<Provider store={store}>
<OidcProvider store={store} userManager={userManager}>
<Theme>
<Loading />
<Layout variant="xmas">
<Alert />
<Routes />
<Snackbar />
</Layout>
</Theme>
</OidcProvider>
</Provider>
</JssProvider>
);
}
}
export default App;
I'm trying to implement a star rating system provided by react. I'm referring this article to do this.
http://cameronroe.github.io/react-star-rating/?react-star-rating=4
my star rating jsx file
import React from 'react';
import StarRating from 'react-star-rating';
class FormComponent extends React.Component {
render() {
return (
<StarRating name="airbnb-rating" totalStars={5}/>
);
}
}
export default FormComponent;
I'm calling it like this
<div className="preview_usr_stars">
<FormComponent/>
</div>
But I get a result like this. Hover effects are not working, basically it does not work
It looks like you have not included the CSS.
From the link you provide:
Include the css:
<link rel="stylesheet" href="node_modules/react-star-rating/dist/css/react-star-rating.min.css">
If you are using webpack with css-loader, you can simply do
import 'react-star-rating/dist/css/react-star-rating.min.css'
I'm using the Accounts UI meteor package in my React + Meteor project and want to render the loginButtons template with the property align="right". In Blaze the code would just be {{> loginButtons align="right"}}, but I'm at at a loss with how to add this property in React.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Template } from 'meteor/templating';
import { Blaze } from 'meteor/blaze';
export default class AccountsUIContainer extends Component {
componentDidMount() {
this.view = Blaze.render(Template.loginButtons, // How do I give loginButtons `align="right`?
ReactDOM.findDOMNode(this.refs.container));
}
componentWillUnmount() {
Blaze.remove(this.view);
}
render() {
return <span ref="container" />;
}
}
I think Blaze.renderWithData() may be part of the solution, but my tests with this method haven't worked so far. I also think people have created solutions to using Blaze templates in React before, but I'm not sure these alternate solutions would be the "right" way to solve this problem in Meteor 1.4.
The answer was right inside the documentation. First meteor add gadicc:blaze-react-component, then in the component
import React from 'react';
import Blaze from 'meteor/gadicc:blaze-react-component';
const App = () => (
<div>
<Blaze template="loginButtons" align="right" />
</div>
);