React-calendar: Changing tileContent dynamically?

[ktse]

Hi,
Firstly I just want to thank you for putting out this react component!
I am currently trying to edit the appearance of certain day tiles and disable all other day tiles based on dates returned from an api call. I am able to make these changes only when a day or month is clicked using the onClickDays and onClickMonths functions, is there a way to also update tiles after a next or prev label in at the top is clicked?

Another problem I have is on the initial render of the calendar, it does not have my tile edits since a day or month must be clicked to call my api and change tiles. Is there a way to call my functions on the very first render?

I am fairly new to React and any help or insight would be much appreciated! I hope this explanation makes sense, let me know if I am unclear.

[wojtekmaj]

Hi,
changing tileContent function should trigger re-render. I don't see why it wouldn't. It's only a matter of writing it properly, for example passing

const tileContent = ({ date, view }) => view === 'month' && date.getDay() === 0 ? <p>Sunday!</p> : null;

// ...

render() {
  return (
    <Calendar tileContent={tileContent} />
  );
}

will not trigger re-render as tileContent remained unchanged.

render() {
  const tileContent = ({ date, view }) => view === 'month' && date.getDay() === 0 ? <p>Sunday!</p> : null;

  // ...

  return (
    <Calendar tileContent={tileContent} />
  );
}

This, on the other hand, will create a new function on each render, so every time parent component renders, Calendar will too.

For optimal performance, you should create new tileContent function each time something actually changes, but that's a little more advanced.

[ktse]

Oh i get what you are saying!! This helped a lot and helped me fix my issue! Thanks again!

[Sylvenas]

@wojtekmaj ,
Hi,
is there some way to re-render tileContent (or re-call createTileContent function) when active date change?
thanks a lot!

[wojtekmaj]

@Sylvenas Not quite; you need to update the tileContent function on active date change. There's onActiveDateChange for you to hook into.

[OlegSvynarchuk]

Hello! I am trying to change the color of the tile after this particular tile has been clicked. Seemed like simple task for me at first but after trying several approaches my clicks have no influence on the tiles color I intended to change. Can you please help me with where I got stuck.

import React, { Component } from 'react'
import Calendar from 'react-calendar'

export default class App extends Component {

state = {
  selected: new Date(),
}

  onClickDay = (date) => {
    this.setState({selected: date,})

  tileClassName = ({ date, view }) => view === 
    'month' && date === this.state.selected ? 'red' : null;

  }
  render() {   

    return (
      <div>
        <Calendar
        onClickDay={this.onClickDay}
        tileClassName={this.tileClassName}
        />
      </div>  
    )
  }
}

[wojtekmaj]

@OlegSvynarchuk Way to go! You seem to be only missing this. before tileClassName = ..., so you're not actually assigning this function to this, so I bet if you did console.log(this.tileClassName) in render() it would be undefined.