How do I add multiple pieces of content & multiple class names on one tile?

[teifler]

Hey Team,

I want to show events like in the image below. I want to work with dayFns to create reoccurring events

Is there a way that I work with tileContent or tileClass and that I am able to return multiple classes if they object has more events? So that I return an object or array instead?

// generate days
  const sunday = 0;
  const monday = 1;
  const tuesday = 2;
  const wednesday = 3;
  const thursday = 4;
  const friday = 5;
  const saturday = 6;

  //Papertrash twice a month
  const firstPaperTrash = dateFns.setDay(startOfMonth, friday, {
    weekStartsOn: dateFns.getDay(startOfMonth),
  });
  const lastPaperTrash = dateFns.addWeeks(firstPaperTrash, 4);

  //LIST OF EVENTS
  const eventDates = [firstPaperTrash, lastPaperTrash, now];

 function isSameDay(eventDates, date) {
    return differenceInCalendarDays(eventDates, date) === 0;
  }

  function tile2ClassName({ date, view }) {
    //Check each entry of eventDates against date to see if it should be highlighted

    if (
      view === 'month' &&
      eventDates.find((eventDate, index) => isSameDay(eventDate, date))
    ) {
      return 'highlight';
    }
  }

  return (
    <div>
      <Calendar
        onChange={onChange}
        //tileClassName={tileClassName}
        tileClassName={tile2ClassName}
        value={date}
      />
    </div>
  );
}

I want that my calender looks roughly like that or that I give different borders. But the problem is how should I check for different events? Or should I make the dates a object and put a css class in them to do this?

any help is much appreciated,
Tim

[wojtekmaj]

Adding multiple class names through tileClassName is simple! You can either pass them as an array or merge the strings yourself:
https://codesandbox.io/s/react-calendar-tileclassname-multiple-zc9s1p

Similarly, for tileContent, you can return multiple elements the same way you can from a React component: using array or Fragment:
https://codesandbox.io/s/react-calendar-tilecontent-multiple-b5bfg

[teifler]

Thanks Wojtekmaj, that helped me heaps. If anyone is interested how I did it please check my repository and the live version:
https://github.com/teifler/event-calendar
event-calendar-chi.vercel.app