<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}
/>
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);