CODEWITHSUNDEEP
reactjsreact-big-calendar
Ankit Patil
Ankit Patil

Reputation: 75

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.

Upvotes: 6

Views: 5301

Answers (1)

Fl&#225;vio Diniz Rossetto Junior
Fl&#225;vio Diniz Rossetto Junior

Reputation: 425

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!

Upvotes: 7

Related Questions