custom styles

[nahuely]

is there any way to customize the styles of the calendar?

[eltongonc]

I'm also looking for a way to programmatically add style or a class to each day on the calendar.

[eltongonc]

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)}
/>

[nistadev]

You can customize the styles with css.

Also, as @eltongonc says, with customDayRenderer prop, you receive the current DOM element to render.

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.