How can i change the date Format on the top of the react-big-calender

Question

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

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(() => {
        let tempEvents = [];
        data.forEach((element) => {
            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) => {
        const { start, end, event } = data;
        const newEvents = [...events];
        newEvents.forEach((existingEvent) => {
            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) => {
                        console.log(info, "infoo")
                    }).catch((err) => {
                        console.log(err,"error")
                    })
            }
        });
        setEvents(newEvents);
    };

    return (
        <Box>
            <DnDCalendar
                localizer={localizer}
                defaultDate={date}
                defaultView="day"
                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}
            />
        </Box>
    );
}

and i have attached an file to show which date i am talking about

your code helped to fix start and end time of calender. I will like to know that i want to restrict this start and end date to UK time 8AM and 6PM at evening how can i ensure it will work fine? — khizer, Nov 30 '21 at 07:30

score 1 · Answer 1 · answered Sep 19 '20 at 16:31

You can do this use the formats prop. It has multiple options for formatting the date display, dependent upon which View your currently viewing.

http://jquense.github.io/react-big-calendar/examples/index.html#prop-formats

let formats = {
  dateFormat: 'dd',

  dayFormat: (date, culture, localizer) =>
    localizer.format(date, 'DDD', culture),

  dayRangeHeaderFormat: ({ start, end }, culture, localizer) =>
    localizer.format(start, { date: 'short' }, culture) + ' — ' +
    localizer.format(end, { date: 'short' }, culture)
}

<Calendar formats={formats} />

Most take the (date: Date, culture: ?string, localizer: Object) => string method signature, unless they deal with range, and use whichever localizer you configured for your instance. So, for you (use seem to be using Moment), it would be something like:

const dayFormat = (date, culture, localizer) => localizer.format(date, 'D MMMM YYYY', culture);

return (
  <Calendar
    // other props
    formats={{
      dayFormat
    }}
  />

thanks mate it works fine thanks for the explanation very well ;) — Avinash jain, Oct 04 '20 at 16:46

How can i change the date Format on the top of the react-big-calender

1 Answers1