Date time format in react js and moment.js in a Calendar

Question

Basically i'm creating a calendar with events plugin and for that using react-big-calendar. I am able to create usestate to add events and show in calendar but whenever I put the start and end date with time coordinates it doesn't show the event where when I just put the start, end date without time coordinates it will show it.

Kinda confuse here whats happening cause when using the hardcore value of events it showing the events without even adding time. Need assistance.

Whole Calendar component

import React, { useState } from 'react';
import "./CalendarNew.css"
import 'react-big-calendar/lib/css/react-big-calendar.css';
import { Badge } from 'antd';
import { Modal, Button } from 'antd';
import { TextField } from '@material-ui/core';
import { DatePicker, Space } from 'antd';
import { Checkbox } from 'antd';
import { Input } from 'antd';

import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'

const now = new Date();
const { RangePicker } = DatePicker;

const localizer = momentLocalizer(moment)

function CalendarNew() {

    const [visible, setVisible] = React.useState(false);
    const [title, setTitle] = useState('');
    const [location, setLocation] = useState('');
    const [description, setDescription] = useState('');
    const [pickerDate, setPickerDate] = useState(null)
    const [startDate, setStartDate] = useState(null)
    const [endDate, setEndDate] = useState(null)




    const realEvents = [{
        id: 0,
        title: titles,
        location: locations,
        start: new Date(startDate),
        end: new Date(endDate),
        description: description,

    }]



    const events = [
        {
            id: 0,
            title: 'All Day Event very long title',
            allDay: true,
            start: new Date(2021, 8, 1, 0, 20, 20),
            end: new Date(2021, 8, 3, 0, 20, 20),
            location: 'melbourne',
        },
        {
            id: 1,
            title: 'Long Event',
            start: new Date(2021, 8, 7),
            end: new Date(2021, 8, 10),
            location: 'sydney',
        },


    ]

    // for PopUp
    const showModal = () => {
        setVisible(true);
    };


    const handleCancel = () => {
        console.log('Clicked cancel button');
        setVisible(false);
    };




    const handleOk = (event) => {
        event.preventDefault();

        // setTitle("");
        // setLocation("");
        // setDescription("");
        // setPickerDate(new Date())
        setStartDate(pickerDate[0].format('YYYY, M, D, h,MM,ss'))
        setEndDate(pickerDate[1].format('YYYY, M, D,h,MM,ss'))
        console.log("Title = ", title, ',Location = ', location, ',Description = ', description, "Daterange =", pickerDate[0].format('YYYY, M, D,h,MM,ss'))
        setVisible(false);


    };


    // title eventListner
    const titleChange = (event) => {
        setTitle(event.target.value)
    }
    // location eventListner
    const locationChange = (event) => {
        setLocation(event.target.value)
    }
    // description eventListner
    const descriptionsChange = (event) => {
        setDescription(event.target.value)
    }
    // range picker eventListner
    const dateChange = (dateString) => {
        setPickerDate(dateString)
    }
    console.log(title)
    ///console.log("range picker start date", pickerDate[0])
    console.log("range picker end date", endDate)

    return (
        <div>
            <Calendar
                localizer={localizer}
                events={realEvents}
                startAccessor="start"
                endAccessor="end"
                style={{ height: 500 }}
                
            />
            {/* PopUp */}
            <Modal
                centered={true}
                title="Event's"
                visible={visible}
                maskClosable={true}


                visible={visible}
                onCancel={handleCancel}

                footer={[
                    <Button onClick={handleCancel}>
                        Cancel
                    </Button>,
                    <Button onClick={handleOk} form="popup_form" key="submit" htmlType="submit" type="primary">
                        Ok
                    </Button>
                ]}

            >
                <div className="form-popup">
                    <form id="popup_form">
                        <div className="row-1">
                            <div className="title">
                                <TextField
                                    style={{ width: '195px' }}
                                    id="title"
                                    name="title"
                                    label="Title"
                                    value={title}
                                    onChange={titleChange}

                                    placeholder={'Title of event'}
                                    variant="standard"
                                />
                            </div>
                            <div className="location">
                                <TextField
                                    style={{ width: '200px' }}
                                    id="location"
                                    name="location"
                                    label="Location"
                                    value={location}
                                    onChange={locationChange}
                                    placeholder={'Location of event'}
                                    variant="standard"
                                />
                            </div>
                        </div>
                        <div className="row-2">
                            <div className="start-calendar">
                                <Space direction="vertical" size={12}>
                                    <RangePicker
                                        id="date-picker"
                                        name="date_picker"
                                        value={pickerDate}
                                        onChange={dateChange}
                                        format="YYYY-M-D HH:mm:ss"
                                        placeholder={['Start date', 'End date']}
                                        style={{ width: '420px' }}
                                        size={'large'} />
                                </Space>
                            </div>
                        </div>
                        <div className='row-3'>
                            <div className='checkbox'>
                                <Checkbox
                                    id="all_day"
                                    name="all_day"
                                >
                                    All day
                                </Checkbox>
                            </div>
                        </div>
                        <div className='row-4'>
                            <div className='description'>
                                <label>
                                    <TextField
                                        style={{ width: '420px' }}
                                        id="description"
                                        name="description"
                                        label="Description"
                                        value={description}
                                        onChange={descriptionChange}
                                        multiline
                                        rows={1}
                                        placeholder={'description of event'}
                                        variant="standard"
                                    />
                                </label>
                            </div>
                        </div>

                    </form>
                </div>
            </Modal>
        </div>
    )
}

export default CalendarNew;

Output using state without time coordinates

showing the events

Output using state with time coordinates To add time coordinates, I'm setting startDate,endDate state to:

setStartDate(pickerDate[0].format('YYYY, M, D, h,MM,ss')) 

setEndDate(pickerDate[1].format('YYYY, M, D,h,MM,ss'))

image is here but no event showing

Output using hardcode data with time coordinates Using the object named events in the code

image is here

Answer 1

all dates in React-Big-Calendar are true JS Date objects. Even those you use on an Event. When constructing an event, make sure to use Date s for your start and end dates, especially when you add them to the events used in the prop.

Answer 2

So, the bug was in the format part itself in the state. Correct answer:

setStartDate(pickerDate[0].format('YYYY, M, D, HH:mm:ss')) 

setEndDate(pickerDate[1].format('YYYY, M, D, HH:mm:ss'))