score:8
i solved the issue........i modified my code
css code
.highlight {
color:red;
}
i have created an array of multiple dates
const mark = [
'04-03-2020',
'03-03-2020',
'05-03-2020'
]
and finally, the calendar will look like this
<calendar
style={{ height: 500 }}
onchange={this.onchange}
value={this.state.date}
tileclassname={({ date, view }) => {
if(mark.find(x=>x===moment(date).format("dd-mm-yyyy"))){
return 'highlight'
}
}}
tiledisabled={({ date }) => date.getday() === 0}
/*maxdate={new date(2020, 1, 0)}</div>*/
mindate={
new date()
}
>
</calendar>
score:0
you are using react-calendar. you can highlight a date very easily.
- create a class
highlight
(name can be anything). - import that style file (.css or .scss)
it have a props called
tileclassname
. send a callback like below.<calendar tileclassname={({ date, view }) => { // date will return every date visible on calendar and view will view type (eg. month) if(// your_condititon ){ return 'highlight'; // your class name } }} onchange={this.onchange} value={this.state.date} />
score:1
here is a common way to find out how to adjust styles with some libs which you are not familiar with.
if you look at the dom tree, you would find each date button have class
like below
<button class="react-calendar__tile react-calendar__month-view__days__day ...">
...
</button>
by change the style of it, we find that's the element we want to handle.
notice the classname react-calendar__tile
if we checkout their document by searching that class name's tile
. you would find:
tileclassname
class name(s) that will be applied to a given calendar item (day on month view, month on year view and so on).
by providing css class to it, you can customize your styles.
for example, make it blue
<calendar
tileclassname="content"
...
/>
.content {
font-size: 20px;
color: blue;
}
you can try it yourself here
score:1
this will helps you.working code source code
demo:evenfy
code:
datearray=[{date:"2021-06-11t09:47:17.456000z",colorname: "pink"},{date:"2021-06-12t09:47:17.456000z",colorname: "blue"}.{date:"2021-06-16t09:47:17.456000z",colorname: "blue"}]
<calendar
tileclassname={({ activestartdate, date, view }) => this.setclass(date)}
/>
setclass = (date) => {
const dateobj =
datearray.find((x) => {
return (
date.getday() === new date(x.date).getday() &&
date.getmonth() === new date(x.date).getmonth() &&
date.getdate() === new date(x.date).getdate()
);
});
return dateobj ? dateobj.colorname : "";}
Source: stackoverflow.com
Related Query
- How to mark particular dates in react-calender
- How to edit particular object in React
- Airbnb react date range picker only showing current month calendar not selected dates month calender
- How to update an array at a particular index with React js
- How to use react dates properly
- How to re-render a particular component in React with setInterval or there is another way?
- How to add a dynamic Element to particular Html Node which is extracted from React ref?
- React - How to get height of the particular div if you know its class
- How do you mark a prop as required in react typescript?
- how to make particular part of string bold in React JS?
- React JS: How do I redirect back to my main page when user refreshes another particular page?
- React - How can I access a particular position in the array, and then change it?
- How to change the state of the particular component when it is clicked, using useState in react js?
- How to hide a column on REACT Material table in all rows and show it on Edit for the Particular Row I am editing and Add Operations on new row adding?
- How to Jump to particular section using React router-dom Link
- how to disable event select in react big calender
- How to href to particular component in react on some action
- How to assign a value to particular cell in table layout in react js?
- Destructuring props in React -> need help understanding how it works in my particular case
- How to fetch sequence api calls where second api call need particular data from first api call result using react hooks?
- Mapping over API data in a react component - how to access a particular property?
- How to Create Unique Edit Fields for particular Item in React
- how to disable past and today dates on react-bootstrap-date-picker node module for react js?
- React How To Scroll To Particular Position
- How to restrict user from accessing a particular page by typing the url using react and typescript?
- Trying to figure out how to change background image depending on the genre of that particular book REACT
- How to get radio button and calender control values in react js
- How to check if JSON data matches a particular string in React js?
- How can I hide particular element in react list?
- React Redux - How to take use on a particular location when they come back on that page
More Query from same tag
- useEffect inside a Class component to Scroll on top of page
- ReactJS: How can I pass a string to use as a function name?
- How to return error from firebase function?
- React Router 4 passing props through Route render doesn't work
- ReactJS: post request with data through fetch
- Replacing constructor with Hooks in REACT
- react router not matching to route
- Why is my synchronous code executing asynchronously?
- Toggle state inside object using react hook
- Im not able to set an initial state in my react-native application
- Adding Id attribute to multiple checkboxes
- What are the advantages of useRef() instead of just declaring a variable?
- React router open route in new window
- React not rendering anything on the DOM
- How to get props and pass data from child in reactjs?
- Conditionally put border-radius on Bar in recharts
- Serialize form data to json react
- Fetching data from api in componentDidMount is returning null
- Can I safe navigate within useMemo
- ReactJS: How do I pass multiple arrays as a prop to ChildComponent?
- How to add custom styled to a styled component?
- styled-components, Referring to other components and use its props?
- is filter best way to remove items in array? (react.js)
- React useEffect with property as dependency makes infinite loop
- React pass Object to Modal then set state of Object to that Object
- Apollo Client 3 evict query result - doesn't work?
- How to prepending before icon for text area for React component
- What is a good practice to avoid duplicated functions in React.js with 'this.setState' format?
- What is the difference between .addCase() and .addMatcher()
- How can I make a text box in React which allows only numbers or an empty value, which triggers the number keypad on mobile?