-
Notifications
You must be signed in to change notification settings - Fork 25
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
custom styles #8
Comments
I'm also looking for a way to programmatically add style or a class to each day on the calendar. |
Ignore my previous comment, I didn't read the documentation properly. This works for me:: <Calendar
dataSource={this.data}
style='custom'
customDayRenderer={(e) => console.log(e)}
/> |
You can customize the styles with css. Also, as @eltongonc says, with You can style that element with JS. E.g.: const customDayRenderer = (dayElement) => {
dayElement.style.background = "#00f";
return dayElement;
} If you want to add some JSX, you can use ReactDOM to render before appending it to the current element. E.g.: const customDayRenderer = (dayElement) => {
// Day number wrapper
const dayNum = dayElement.innerText;
const dayNumContainer = document.createElement("span");
dayNumContainer.classList.add("day-num");
dayNumContainer.innerText = dayNum;
// Background
const bgContainer = document.createElement("span");
bgContainer.classList.add("day-bg");
ReactDOM.render(<MyCustomBackgroundComponent />, bgContainer);
// Removal of the current DOM child, containing day number
dayElement.removeChild(e.firstChild);
// Append the new DOM elements
dayElement.appendChild(dayNumContainer);
dayElement.appendChild(bgContainer);
} That works well for me. Hope we'll be able to return custom JSX without using ReactDOM in the future. |
is there any way to customize the styles of the calendar?
The text was updated successfully, but these errors were encountered: