6

I'm trying to get the full day names on the header for the month view and was unable to do so.

I'm pretty sure its in the localize function but couldn't find a solution online. Here's my code so far:

import { Calendar, momentLocalizer } from "react-big-calendar";
import Toolbar from "react-big-calendar/lib/Toolbar";
import "react-big-calendar/lib/css/react-big-calendar.css";

moment.locale("en-gb", {
   week: {
    format: "dddd"
  }
});
const localizer = momentLocalizer(moment);

<Calendar
   localizer={localizer}
   components={{ toolbar: CalendarToolbar }}
   events={eventsList}
   eventPropGetter={this.eventStyleGetter}
   startAccessor="start"
   endAccessor="end"
/>

I'm not getting an error message in the above, but it's not working. Any help would be appreciated.

Ankit Patil
  • 75
  • 1
  • 5

1 Answers1

7

You can try something like this

const formats = {
  weekdayFormat: (date, culture, localizer) => localizer.format(date, 'dddd', culture),
}
<Calendar
formats={formats}
/>

Your result may be: enter image description here

More info about the API here: https://jquense.github.io/react-big-calendar/examples/index.html#prop-formats.weekdayFormat

Edit: Thanks for Kostantin Komelin for providing the updated link to the library docs on the comments!

Flávio Diniz Rossetto Junior
  • 415
  • 4
  • 8
  • 1
    The correct link to the API docs is https://jquense.github.io/react-big-calendar/examples/index.html#prop-formats.weekdayFormat – Konstantin Komelin Oct 05 '21 at 13:23
  • 1
    For those who don't need a granular control over formatter through a function, I suggest a simpler solution: `weekdayFormat: 'dddd'`. It works for me with `date-fns` formatter. – Konstantin Komelin Oct 07 '21 at 06:40