Search code examples
reactjsreact-big-calendar

How to get full day names for week in month view in react big calendar

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.

Solution

  • 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!