Our pure JavaScript Scheduler component


Post by 14165@ramco.com »

Hi there,

Here I am using BryntumSchedular in REACT APP with Grids.

I tried to call an event handler while clicking checkbox.I have explored most of the documents but couldn't find anything useful for REACT

I need to pass data of checked cell to event handler.

And I attached the screenshots of code and UI screen below.Please help me with this

Attachments
Code Snippet 1
Code Snippet 1
Screenshot (152).png (62.97 KiB) Viewed 440 times
Code Snippet 2
Code Snippet 2
Screenshot (151).png (47.18 KiB) Viewed 440 times
Here is the UI.Need to call an event handler while clicking single checkbox(passing parameter should have data of checked cell)
Here is the UI.Need to call an event handler while clicking single checkbox(passing parameter should have data of checked cell)
Screenshot (149).png (51.3 KiB) Viewed 440 times

Post by mats »

Please post code snippets as text, not as screenshots!


Post by 14165@ramco.com »

Hi Mats,here is the code snippets

BryntumScheduler component

 <BryntumScheduler
                                    ref={schedulerRef}
                                    resources={resources}
                                    events={events}
                                    startDate={new Date(2018, 1, 7, 8)}
                                    endDate={new Date(2018, 1, 8, 22)}
                                    autoHeight={false}
                                    rowHeight={40}
                                    height={400}
                                    multiEventSelect={true}
                                    eventDragSelectFeature={true}
                                    eventDragCreateFeature={false}
                                    panFeature={false}
                                    selectionMode={{
                                        checkbox: true,
                                        showCheckAll: true,
                                        rowCheckboxSelection: true,
                                        cell: true,  
} } columns={[ { text: 'Trip', field: 'resourceInfo', showRole: 'category', showImage: false, width: 130, cls: 'titleColumn' }, { type: 'action', text: '', actions: [{ cls: 'b-fa b-fa-truck', tooltip: 'Resources for the trip', visible: true, onClick: (record: any) => { console.log(record); } }] }, { text: 'Start', field: 'start', width: 130, cls: 'titleColumn' }, { text: 'End', field: 'End', width: 130, cls: 'titleColumn' }, ]} eventStore={{ listeners: { change: (event: any) => { console.log(event) } } } } eventRenderer={(events: any) => { events.renderData.height = 20; events.renderData.style = "vertical-align:middle" }} eventMenuFeature={eventContextMenu} cellMenuFeature={cellContextMenu} />

Below code is data and dependencies which i used

 const resources = [
        { "id": "a", "resourceInfo": "TP001 Leg1 ", "category": "CHN To MUM", "start": "10/Jul/2020 1.45 PM", "End": "10/Jul/2020", "cls": 'textstyle' },
        { "id": "b", "resourceInfo": "TP001 Leg1 CHN To MUM", "start": "0/Jul/2020 1.45 PM", "End": "0/Jul/2020 1.45 PM", "cls": 'textstyle' },
        { "id": "c", "resourceInfo": "TP001 Leg1 CHN To MUM ", "start": "0/Jul/2020 1.45 PM", "End": "0/Jul/2020 1.45 PM", "cls": 'textstyle' },
        { "id": "f", "resourceInfo": "TP001 Leg1 CHN To MUM ", "start": "0/Jul/2020 1.45 PM", "End": "0/Jul/2020 1.45 PM", "cls": 'textstyle' },
        { "id": "g", "resourceInfo": "TP001 Leg1 CHN To MUM ", "start": "0/Jul/2020 1.45 PM", "End": "0/Jul/2020 1.45 PM", "cls": 'textstyle' },
        { "id": "d", "resourceInfo": "TP001 Leg1 CHN To MUM ", "start": "0/Jul/2020 1.45 PM", "End": "0/Jul/2020 1.45 PM", "cls": 'textstyle' },
        { "id": "e", "resourceInfo": "TP001 Leg1 CHN To MUM ", "start": "0/Jul/2020 1.45 PM", "End": "0/Jul/2020 1.45 PM", "cls": 'textstyle' },
        { "id": "h", "resourceInfo": "TP001 Leg1 CHN To MUM ", "start": "0/Jul/2020 1.45 PM", "End": "0/Jul/2020 1.45 PM", "cls": 'textstyle' },
        { "id": "i", "resourceInfo": "TP001 Leg1 CHN To MUM ", "start": "0/Jul/2020 1.45 PM", "End": "0/Jul/2020 1.45 PM", "cls": 'textstyle' },
        { "id": "j", "resourceInfo": "TP001 Leg1 CHN To MUM ", "start": "0/Jul/2020 1.45 PM", "End": "0/Jul/2020 1.45 PM", "cls": 'textstyle' },
        // { "id": "k", "resourceInfo": "TP001 Leg1 CHN To MUM ", "start": "10/Jul/2020", "End": "10/Jul/2020", "cls": 'textstyle' }
    ];
    const events = [
        {
            "id": 1,
            "resourceId": "a",
            "startDate": "2018-02-07 11:00",
            "endDate": "2018-02-07 14:00",
        },
        {
            "id": 2,
            "resourceId": "b",
            "startDate": "2018-02-07 12:00",
            "endDate": "2018-02-07 15:00",

    },
    {
        "id": 3,
        "resourceId": "c",
        "startDate": "2018-02-07 13:00",
        "endDate": "2018-02-07 16:00",

    },
    {
        "id": 4,
        "resourceId": "d",
        "startDate": "2018-02-07 09:00",
        "endDate": "2018-02-07 11:00",
    },
    {
        "id": 5,
        "resourceId": "e",
        "startDate": "2018-02-07 10:00",
        "endDate": "2018-02-07 12:00",
    },
    {
        "id": 6,
        "resourceId": "f",
        "startDate": "2018-02-07 11:00",
        "endDate": "2018-02-07 13:00",
    },
    {
        "id": 7,
        "resourceId": "g",
        "startDate": "2018-02-07 14:00",
        "endDate": "2018-02-07 17:00",
    },
    {
        "id": 8,
        "resourceId": "h",
        "startDate": "2018-02-07 13:00",
        "endDate": "2018-02-07 15:00",
    },
    {
        "id": 9,
        "resourceId": "i",
        "startDate": "2018-02-07 16:00",
        "endDate": "2018-02-07 19:00",
    },
    {
        "id": 10,
        "resourceId": "j",
        "startDate": "2018-02-07 17:00",
        "endDate": "2018-02-07 20:00",
    },
    {
        "id": 11,
        "resourceId": "k",
        "startDate": "2018-02-07 9:00",
        "endDate": "2018-02-07 11:00"
    }
];
const timeranges = [
    {
        "startDate": "2018-02-07 11:00",
        "endDate": "2018-02-07 12:00",
        "cls": "striped"
    }
];
//  var schedulerinstance;

var eventContextMenu = {
    items: {
        deleteEvent: false,
        editEvent: false,
        View: {
            text: 'View',
            cls: 'my-menu-item',
            onItem: (data: any) => {
            //code
            }
        },
        Remove: {
            text: 'Remove',
            cls: 'my-menu-item',

        },
        AddTrip: {
            text: 'Add to New Trip',
            cls: 'my-menu-item',

        }
    }
}
var eventContextMenuResource = {
    items: {
        deleteEvent: false,
        editEvent: false,
        View: {
            text: 'View',
            cls: 'my-menu-item',
            onItem: (data: any) => {
             //code
            }
        },
        Remove: {
            text: 'Remove',
            cls: 'my-menu-item',

        },

    }
}
var cellContextMenu = {
    items: {
        removeRow: false,
        map: {
            text: 'View Map & Chart',
            weight: 500, 
        
        }
    }
}
//

const schedulerRef: any = useRef(null);

Post by saki »

In this case, checking the checkbox selects the corresponding row so you can listen to https://bryntum.com/docs/grid/#Grid/view/mixin/GridSelection#event-selectionChange event. The handler receives all data you may need.

We have a React demo where we listen to this event. It's a Grid demo but the approach is same for Scheduler: https://bryntum.com/examples/grid/react/javascript/basic/build/index.html


Post Reply