How to customize FullCalendar for task scheduling and break down

Question

I want to customize task scheduling using FullCalendar ???, And display the event start in half of day and end on half day ???, Both have to be display like bellow,

I am using,

React - 11.11.1 | @fullcalendar - 6.1.10 (core, daygrid, interaction, react, resource, resource-timeline, timegrid)

If anyone know other library which support for this, please mention here.

This is my code sample,

    import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
import {useState} from "react";
function renderEventContent(eventInfo) {
    return (
        <>
            <b>{eventInfo.timeText}</b>
            <i>{eventInfo?.event?.title}</i>
        </>
    )
}

const Text = (props) => {
    const events = [
        {
            id: 1,
            className: "HalfClass",
            resourceId: "a",
            title: "Taufik1",
            start: "2019-09-03 06:00",
            end: "2019-09-05 12:00",
            description: ""
        },
        {
            id: 2,
            resourceId: "b",
            title: "Smith",
            color: "#F6BB42",
            start: "2019-09-06",
            end: "2019-09-08"
        },
        {
            id: 3,
            resourceId: "c",
            title: "Austin",
            start: "2019-09-04",
            end: "2019-09-08",
            description: ""
        },
        {
            id: 4,
            resourceId: "d",
            title: "Wong Ling",
            color: "#DA4453",
            start: "2019-09-04",
            end: "2019-09-06"
        },
        {
            id: 5,
            resourceId: "d",
            title: "Wong Ling",
            color: "#DA4453",
            start: "2019-09-10",
            end: "2019-09-12"
        }
    ]
    const asd = [
        {
            id: "a",
            title: "Auditorium A"
        },
        {
            id: "b",
            title: "Auditorium B"
        },
        {
            id: "c",
            title: "Auditorium C"
        },
        {
            id: "e",
            title: "Auditorium E"
        },
        {
            id: "d",
            title: "Auditorium D"
        }
    ]
    const [resources, setResources] = useState(asd);
    const [data, setDate] = useState(events);

    return (
        <div style={{width: '80%'}}>
            <p>Text file </p>
            {data && data?.length > 0 && (<FullCalendar
                id="calendar"
                nowIndicator
                plugins={[resourceTimelinePlugin, interactionPlugin]}
                headerToolbar={{
                    left: "prev,next today",
                    center: "title",
                    right: "resourceTimelineWeek,resourceTimelineDay"
                }}
                initialView="resourceTimelineWeek"
                editable
                initialDate="2019-09-03"
                slotDuration={{hours: 3}}
                slotLabelInterval={{hours: 24}}
                resources={resources}
                events={data}
                eventContent={renderEventContent} // custom render function
            />)}
        </div>
    );
};

export default Text;

This is my response,