title: How can i change the date Format on the top of the react-big-calender
body: <p>I have used react-big-calender in my project now i used only day view of that and want to customise the date format as per my need it currently shows as wednesday Sep 2 and what i want is 2 September 2020 and i didn't find any props to manipulate that any help would be great help my code is as below</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import { Calendar, momentLocalizer } from 'react-big-calendar';
  import moment from 'moment';
  import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
  import { Box } from './styled';
  import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
  import 'react-big-calendar/lib/css/react-big-calendar.css';
  import { changeAppointment } from '../api';
  
  export default function Calender(props) {
      const { date } = props;
      const { data } = props;
      const localizer = momentLocalizer(moment);
      const DnDCalendar = withDragAndDrop(Calendar);
      const [events, setEvents] = useState([]);
  
      useEffect(() =&gt; {
          let tempEvents = [];
          data.forEach((element) =&gt; {
              const data = {
                  title: element.patient.name + ', ' + element.patient.phone,
                  id: element.id,
                  start: moment.utc(element.datetime).toDate(),
                  end: moment.utc(element.datetime).add(30, 'minutes').toDate(),
              };
              tempEvents.push(data);
              setEvents(tempEvents);
          });
      }, [data]);
  
      const onEventResize = (data) =&gt; {
          const { start, end, event } = data;
          const newEvents = [...events];
          newEvents.forEach((existingEvent) =&gt; {
              if (existingEvent.id === event.id) {
                  existingEvent.start = start;
                  existingEvent.end = end;
                  const info = {
                      id: event.id,
                      datetime: moment.utc(start).format(),
                  };
                  changeAppointment(info)
                      .then((info) =&gt; {
                          console.log(info, &quot;infoo&quot;)
                      }).catch((err) =&gt; {
                          console.log(err,&quot;error&quot;)
                      })
              }
          });
          setEvents(newEvents);
      };
  
      return (
          &lt;Box&gt;
              &lt;DnDCalendar
                  localizer={localizer}
                  defaultDate={date}
                  defaultView=&quot;day&quot;
                  timeslots={1}
                  view={'day'}
                  views={{
                      day: true,
                  }}
                  min={new Date(0, 0, 0, 9, 0, 0)}
                  max={new Date(0, 0, 0, 23, 30, 0)}
                  events={events}
                  localizer={localizer}
                  onEventDrop={onEventResize}
                  onEventResize={onEventResize}
                  resizable
                  step={30}
                  selectable={true}
              /&gt;
          &lt;/Box&gt;
      );
  }
  </code></pre>
  <p>and i have attached an file to show which date i am talking about<a href="https://i.stack.imgur.com/30f5i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/30f5i.png" alt="enter image description here" /></a></p>