<BryntumSchedulerPro
ref={schedulerRef}
startDate={DateHelper.format(dateRangeSelect.startDate, 'YYYY-MM-DD')}
endDate={DateHelper.format(addDays(dateRangeSelect.endDate, 1), 'YYYY-MM-DD')}
fillTicks
onDataChange={handleDataCHange}
// eventTooltipFeature={{
// template: (record: any) => ReactDOMServer.renderToStaticMarkup(<div><ToolTipPuck data={record} /></div>),
// // hideDelay: 10000,
// }}
features={{
scheduleTooltip: false,
search: true,
// eventResize: false,
dependencies: false,
// calendar: true,
taskEdit: false,
eventDrag: {
copy: true, // create a copy of the dragged event in the scheduler's event store
},
eventTooltip: {
template: (record: any) => ReactDOMServer.renderToStaticMarkup(<div><ToolTipPuck data={record} /></div>),
cls: 'custom-tooltip-section',
// hideDelay: 100004,
},
timeRanges: {
showHeaderElements: true,
},
// timeRanges: true,
tree: true,
resourceTimeRanges: true,
// percentBar : true,
regionResize: true,
excelExporter: {
zipcelx,
// Choose the date format for date fields
dateFormat: 'YYYY-MM-DD HH:mm',
},
pdfExport: {
exportServer: 'http://localhost:3000/',
// Required for font-awesome icons to display correctly
// headerTpl,
// footerTpl
},
eventEdit: {
items: {
recurrenceCombo: false,
// actBillHrs: {
// type: 'text',
// name: 'actBillHrs',
// label: 'Actual hrs',
// weight: 120,
// },
// totalEstBillHrs: {
// type: 'text',
// name: 'totalEstBillHrs',
// label: 'Est hrs',
// weight: 120,
// // This field is only displayed for meetings
// // dataset : { eventType : 'meeting' }
// },
// dwell: {
// type: 'text',
// name: 'dwell',
// label: 'dwell',
// weight: 120,
// // This field is only displayed for meetings
// // dataset : { eventType : 'meeting' }
// },
// prod: {
// type: 'text',
// name: 'prod',
// label: 'prod',
// weight: 120,
// // This field is only displayed for meetings
// // dataset : { eventType : 'meeting' }
// },
// eventColor: {
// type: 'combo',
// name: 'eventColor',
// label: 'color',
// items: ['#ffffff'],
// weight: 120,
// },
// percentDone: {
// type: 'text',
// name: 'percentDone',
// label: 'percentDone',
// weight: 120,
// // This field is only displayed for meetings
// // dataset : { eventType : 'meeting' }
// },
nameField: {
readOnly: true,
},
shopField: {
type: 'text',
name: 'shopName',
label: 'shop',
readOnly: true,
weight: 120,
},
resourceField: {
required: true,
label: 'SLOT',
},
endDateField: {
// type: 'endDateField',
listeners: {
// Look in owner chain for this function name
change: (record: any) => {
const endDateCombo = record.source.owner.widgetMap.nameField.placeholder;
if (endDateCombo === 'Puck Name') {
// setendDateDragPuck(record.value);
}
},
},
},
},
},
eventDragCreate: false,
// Turn the Event menu off completely, will not be created
eventMenu: true,
// Turn the Schedule menu off completely, will not be created
scheduleMenu: false,
// Turn the TimeAxis Header menu off completely, will not be created
timeAxisHeaderMenu: true,
}}
eventRenderer={(argss: any) => {
const { eventRecord, resourceRecord, renderData } = argss;
const { isLeaf } = resourceRecord;
// Add custom CSS classes to the template element data by setting property names
// eslint-disable-next-line no-param-reassign
renderData.cls.leaf = isLeaf;
// eslint-disable-next-line no-param-reassign
renderData.cls.group = !isLeaf;
// add css class to the event
renderData.cls.add('customLeftBars');
// const value = eventRecord.data.percentDone || 0;
// Add a child to the event element (b-sch-event)
// renderData.children.push({
// className: 'value',
// style: {
// width: `${value}%`,
// },
// // html : value
// html: '',
// });
const convertActualStart = DateHelper.format(new Date(eventRecord.startDate), 'YYYY-MM-DD');
const calendarStart = DateHelper.format(new Date(dateRangeSelect.startDate), 'YYYY-MM-DD');
// const checkstartMore: any = (DateHelper.isAfter(new Date(eventRecord.actualStartDate), dateRangeSelect.startDate)
// || DateHelper.isEqual(new Date(eventRecord.actualStartDate), dateRangeSelect.startDate));
const checkstartMore = DateHelper.isBefore(new Date(convertActualStart), new Date(calendarStart));
const convertActyualEnd = DateHelper.format(new Date(eventRecord.endDate), 'YYYY-MM-DD');
const calendarEnd = DateHelper.format(new Date(dateRangeSelect.endDate), 'YYYY-MM-DD');
const checkendMore = DateHelper.isAfter(new Date(convertActyualEnd), new Date(calendarEnd));
// if (eventRecord.droppedEvent) {
// console.log('winnnt3', schedulerinst.instance);
// const eventCurrentDrop = schedulerinst.instance.eventStore.getById(eventRecord.id);
// const newData = getsampleRightPanel.map((k: any) => (
// {
// ...k,
// id: _.uniqueId(),
// children: k.children.map((m: any) => ({ ...m, id: _.uniqueId() })),
// }));
// setsampleRightPanel(newData);
// schedulerinst.instance?.editEvent(eventCurrentDrop);
// eventCurrentDrop.droppedEvent = false;
// }
const value = eventRecord.data.percentDone || 0;
// Add a child to the event element (b-sch-event)
renderData.children.push({
className: 'percCompleteDynamic',
style: {
width: `${value}%`,
},
html: '',
});
renderData.children.push({
className: 'value',
style: {
left: (checkstartMore || checkendMore) ? `${Math.abs(renderData.left)}px` : '0px',
},
// html : value
html: ReactDOMServer.renderToStaticMarkup(<EventRenderer eventRecord={eventRecord} checkstartMore={checkstartMore} checkendMore={checkendMore} />),
});
if (eventRecord.droppedEvent) {
const eventCurrentDrop = schedulerinst.instance.eventStore.getById(eventRecord.id);
setTimeout(() => {
eventCurrentDrop.droppedEvent = false;
}, 1000);
}
// return isLeaf ? ReactDOMServer.renderToStaticMarkup(<EventRenderer eventRecord={eventRecord} checkstartMore={checkstartMore} checkendMore={checkendMore} />) : 'out of slot';
}}
// eslint-disable-next-line react/jsx-props-no-multi-spaces
// eventRenderer={() => ReactDOMServer.renderToStaticMarkup(<EventRenderer checkstartMore={checkstartMore} checkendMore={checkendMore} />)}
resources={eventsData ? eventsData?.resources : []}
// events={eventsData ? eventsData?.events : []}
listeners={{
// eventmouseenter(event: any) {
// if (event && event.relatedTarget) {
// const { relatedTarget } = event;
// console.log('11155', relatedTarget);
// // Do something with relatedTarget
// }
// },
// onTimeSpanMouseLeave(event: any) {
// if (event && event.relatedTarget) {
// const { relatedTarget } = event;
// console.log('6777', relatedTarget);
// // Do something with relatedTarget
// }
// },
// eventClick(data: any) {
// console.log('single', data);
// const targetPrevDate = schedulerinst.instance.widgetMap.startDateFiled.currentElement.querySelector('.b-icon-angle-left');
// targetPrevDate.click();
// },
renderEvent({ eventRecord, element }: any) {
// if (schedulerinst.instance) {
// const viewStartDate = schedulerinst.instance.timeAxis.startDate;
// if (!DateHelper.isAfter(
// new Date(eventRecord.actualStartDate),
// viewStartDate,
// )) {
// // if (eventRecord.name === 'DEAX1002') {
// const leftValue = element.offsetLeft;
// const target = element.querySelector('.custom-left-style');
// if (target) {
// target.style.left = `${Math.abs(leftValue)}px`;
// }
// }
// }
if (element) {
const target = element.querySelector('.render-event-next');
if (target) {
target.addEventListener('click', () => {
schedulerinst.instance.mask('Loading data');
let startDate: any;
let endDate: any;
const addStartDate = DateHelper.add(dateRangeSelect.endDate, 3, 'day');
const addEndDate = DateHelper.add(addStartDate, 11, 'day');
setDateRangeSelect((prev: any) => ({ ...prev, startDate: addStartDate, endDate: addEndDate }));
// eslint-disable-next-line prefer-const
startDate = DateHelper.format(new Date(addStartDate), 'MMM-D');
// eslint-disable-next-line prefer-const
endDate = DateHelper.format(new Date(addEndDate), 'MMM-D');
schedulerinst.instance.setTimeSpan(addStartDate, addDays(addEndDate, 1));
// eslint-disable-next-line max-len
const myCustomTag = schedulerinst.instance.tbar.widgetMap.startDateFiled.currentElement.querySelector('.custom-date-change');
myCustomTag.innerText = `${startDate}-${endDate}`;
setInitateCall(true);
});
}
if (eventRecord) {
// do domething
}
const targetPrev = element.querySelector('.render-event-prev');
if (targetPrev) {
targetPrev.addEventListener('click', () => {
schedulerinst.instance.mask('Loading data');
let startDate: any;
let endDate: any;
const addStartDate = DateHelper.add(dateRangeSelect.startDate, -3, 'day');
const addEndDate = DateHelper.add(addStartDate, -11, 'day');
setDateRangeSelect((prev: any) => ({ ...prev, startDate: addEndDate, endDate: addStartDate }));
// eslint-disable-next-line prefer-const
startDate = DateHelper.format(new Date(addStartDate), 'MMM-D');
// eslint-disable-next-line prefer-const
endDate = DateHelper.format(new Date(addEndDate), 'MMM-D');
schedulerinst.instance.setTimeSpan(addEndDate, addDays(addStartDate, 1));
// eslint-disable-next-line max-len
const myCustomTag = schedulerinst.instance.tbar.widgetMap.startDateFiled.currentElement.querySelector('.custom-date-change');
myCustomTag.innerText = `${startDate}-${endDate}`;
setInitateCall(true);
});
}
}
// if (eventRecord.droppedEvent) {
// console.log('winnnt', schedulerinst.instance);
// const eventCurrentDrop = schedulerinst.instance.eventStore.getById(eventRecord.id);
// const newData = getsampleRightPanel.map((k: any) => (
// {
// ...k,
// id: _.uniqueId(),
// children: k.children.map((m: any) => ({ ...m, id: _.uniqueId() })),
// }));
// setsampleRightPanel(newData);
// schedulerinst.instance?.editEvent(eventCurrentDrop);
// eventCurrentDrop.droppedEvent = false;
// }
},
// beforeEventDrag() {
// console.log('dragging');
// },
beforeEventEditShow(props: any) {
const { editor, eventRecord } = props;
const { resourceField, shopField } = editor.widgetMap;
if (eventRecord.note === 'New Task') {
shopField.hidden = true;
editor.title = 'Add event';
}
editor.widgetMap.resourceField.store.filter({
filterBy: (resource: any) => resource.data.slottype,
});
resourceField.hidden = false;
},
eventResizeEnd(props: any) {
setUpdateDragPayload({
assignmentId: props.eventRecord.assignmentId,
startDate: props.eventRecord.startDate,
endDate: props.eventRecord.endDate,
slotId: props.eventRecord.resourceId.split('P')[0],
id: props.eventRecord.id,
});
setUpdateDrag(true);
},
afterEventDrop(records: any) {
setUpdateDragPayload({
assignmentId: records.eventRecords[0].assignmentId,
startDate: records.eventRecords[0].startDate,
endDate: records.eventRecords[0].endDate,
slotId: records.eventRecords[0].resourceId.split('P')[0],
id: records.eventRecords[0].id,
});
setUpdateDrag(true);
},
eventEditBeforeSetRecord({ record: eventRecord }: any) {
if (eventRecord.originalData.name === 'Drag Task') {
// eventRecord.set('name', 'Puck Name');
// eslint-disable-next-line radix
eventRecord.set(
'endDate',
new Date(
parseInt(DateHelper.format(eventRecord.startDate, 'YYYY')),
parseInt(DateHelper.format(eventRecord.startDate, 'M')) - 1,
parseInt(DateHelper.format(eventRecord.startDate, 'D')) + 1,
13,
40,
),
);
}
// // Only CEO and CTO roles are allowed to play golf...
// editor.widgetMap.resourceField.store.filter({
// filterBy: (resource: any) => resource.data.slottype,
// });
},
beforeEventSave(params: any) {
const { eventRecord, values } = params;
if (eventRecord.originalData.name === 'Drag Task') {
// eventRecord.actualStartDate = DateHelper.format(new Date(eventRecord.startDate), 'YYYY-MM-DD');
eventRecord.actualStartDate = DateHelper.format(values.startDate, 'YYYY-MM-DD');
// const formattedDate = DateHelper.format(endDateDragPuck, 'YYYY-MM-DD');
const formattedDate = DateHelper.format(values.endDate, 'YYYY-MM-DD');
eventRecord.actualEndDate = `${formattedDate}T15:50:54.343Z`;
}
},
afterEventSave(props: any) {
// console.log('ss', props);
if (props.eventRecord.originalData.note === 'New Task') {
props.eventRecord.originalData.name = '';
setPostDragPayload({
id: props.eventRecord.id,
jobId: `${props.eventRecord.originalData.milestoneWidth}`,
slotId: props.eventRecord.resourceId.split('P')[0],
startDate: props.eventRecord.startDate,
endDate: props.eventRecord.endDate,
});
setExternalDrag(true);
}
if (props.eventRecord.originalData.note !== 'New Task') {
setUpdateDragPayload({
assignmentId: props.eventRecord.assignmentId,
startDate: props.eventRecord.startDate,
endDate: props.eventRecord.endDate,
slotId: props.eventRecord.resourceId.split('P')[0],
id: props.eventRecord.id,
});
setUpdateDrag(true);
}
},
// selectionChange({ mode, selected }: any) {
// if (mode === 'row' && selected?.length) {
// schedulerinst.instance.tbar.widgetMap.resourceCombo.value = selected[0];
// }
// }
// afterEventSave: () => {
// schedulerinst.instance.eventStore.sort({ field: 'startDate', ascending: true });
// const eventsByStartDate = [...schedulerinst.instance.eventStore.records];
// schedulerinst.instance.eventStore.clearSorters();
// schedulerinst.instance.eventStore.sort({ field: 'endDate', ascending: false });
// const eventsByEndDate = [...schedulerinst.instance.eventStore.records];
// schedulerinst.instance.eventStore.clearSorters();
// if (eventsByStartDate.length) {
// // @ts-ignore
// // eslint-disable-next-line max-len
// schedulerinst.instance.setTimeSpan(eventsByStartDate[0].startDate, eventsByEndDate[0].endDate);
// }
// },
beforeEventDropFinalize({ context }: any) {
const { newResource } = context;
// Don't allow dropping events in the past
context.valid = newResource.data.slottype;
},
}}
tbar={{
title: 'Text',
content: '<div class="toolbar-title">Maintenance Schedule</div>',
items: {
startDateFiled: {
type: 'datefield',
value: dateRangeSelect.startDate,
// value: '2023-1-25',
format: 'MMM D',
contentElementCls: 'add-custom-calendar-tbar',
step: '10d',
listeners: {
change: (value : any) => {
schedulerinst.instance.mask('Loading data');
schedulerinst.instance.viewPreset = 'weekPreset';
const checkDateGreaterThanPreviuos = DateHelper.isAfter(value.oldValue, value.value);
let startDate;
let endDate;
if (checkDateGreaterThanPreviuos) {
const addStartDate = DateHelper.add(dateRangeSelect.startDate, -3, 'day');
const addEndDate = DateHelper.add(addStartDate, -11, 'day');
setDateRangeSelect((prev: any) => ({ ...prev, startDate: addEndDate, endDate: addStartDate }));
startDate = DateHelper.format(new Date(addStartDate), 'MMM-D');
endDate = DateHelper.format(new Date(addEndDate), 'MMM-D');
schedulerinst.instance.setTimeSpan(addEndDate, addDays(addStartDate, 1));
} else {
const addStartDate = DateHelper.add(dateRangeSelect.endDate, 3, 'day');
const addEndDate = DateHelper.add(addStartDate, 11, 'day');
setDateRangeSelect((prev: any) => ({ ...prev, startDate: addStartDate, endDate: addEndDate }));
startDate = DateHelper.format(new Date(addStartDate), 'MMM-D');
endDate = DateHelper.format(new Date(addEndDate), 'MMM-D');
schedulerinst.instance.setTimeSpan(addStartDate, addDays(addEndDate, 1));
}
// eslint-disable-next-line max-len
const myCustomTag = schedulerinst.instance.tbar.widgetMap.startDateFiled.currentElement.querySelector('.custom-date-change');
myCustomTag.innerText = `${startDate}-${endDate}`;
setInitateCall(true);
},
},
},
addEventButton: {
type: 'button',
icon: 'b-icon b-icon-add',
contentElementCls: 'add-custom-button-tbar',
text: 'Add',
onAction: () => {
const resource = schedulerinst.instance.resourceStore.first;
if (!resource) {
Toast.show('There is no resource available');
return;
}
const event = new EventModel({
resourceId: resource.children[0].id,
startDate: schedulerinst.instance.startDate,
duration: 26,
durationUnit: 'hour',
name: 'Drag Task',
note: 'New Task',
});
// schedulerinst.instance?.addEvent(event);
schedulerinst.instance?.editEvent(event);
},
},
addFilterOptin: {
type: 'button',
// text : 'Excel Export',
ref: 'excelExportBtn1',
contentElementCls: 'add-custom-common-style-tbar',
disabled: true,
// icon : 'b-fa-file-export',
content: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 6V8H21V6H3ZM10 18H14V16H10V18ZM18 13H6V11H18V13Z" fill="#3F4F6B"/>
</svg>`,
onAction: () => {
schedulerinst.instance.features.excelExporter.export();
},
},
addExcelExport: {
type: 'button',
// text : 'Excel Export',
contentElementCls: 'add-custom-common-style-tbar',
ref: 'excelExportBtn1',
// icon : 'b-fa-file-export',
content: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 9.5H15V3.5H9V9.5H5L12 16.5L19 9.5ZM11 11.5V5.5H13V11.5H14.17L12 13.67L9.83 11.5H11ZM19 20.5V18.5H5V20.5H19Z" fill="#3F4F6B"/>
</svg>
`,
onAction: () => {
schedulerinst.instance.features.excelExporter.export();
},
},
addGridOptin: {
type: 'button',
// text : 'Excel Export',
contentElementCls: 'add-custom-common-style-tbar',
ref: 'excelExportBtn1',
disabled: true,
// icon : 'b-fa-file-export',
content: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2H20C21.1 2 22 2.9 22 4V20C22 21.1 21.1 22 20 22H4C2.9 22 2 21.1 2 20V4C2 2.9 2.9 2 4 2ZM4 20H8V16H4V20ZM8 14H4V10H8V14ZM4 8H8V4H4V8ZM14 20H10V16H14V20ZM10 14H14V10H10V14ZM14 8H10V4H14V8ZM16 20H20V16H16V20ZM20 14H16V10H20V14ZM16 8H20V4H16V8Z" fill="#3F4F6B"/>
</svg>
`,
onAction: () => {
schedulerinst.instance.features.excelExporter.export();
},
},
// addSearch: {
// type: 'dropdown',
// width: 300,
// label: 'Scroll to Event',
// editable: false,
// store: schedulerinst.instance && schedulerinst.instance.eventStore,
// valueField: 'id',
// displayField: 'name',
// onAction({ record }: any) {
// // eslint-disable-next-line max-len
// schedulerinst.instance.scrollEventIntoView(record, {
// animate: {
// easing: 'easeFromTo',
// duration: 1000,
// },
// highlight: true,
// });
// const checkId = document.querySelector("[data-ref = 'addSearch']")?.querySelector('input');
// if (checkId) {
// checkId.blur();
// }
// },
// },
// search: {
// // appendTo: document.body,
// type: 'text',
// contentElementCls: 'add-custom-elasticsearch-tbar b-fa b-fa-search',
// label: '',
// align: 'start',
// icon: 'b-fa b-fa-search',
// placeholder: 'Search Puck',
// value: '',
// // eslint-disable-next-line max-len
// // content: '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium makeStyles-searchicon-53 css-i4bv87-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="SearchIcon"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>',
// // eslint-disable-next-line max-len
// onInput: (val: any) => {
// const { instance } = schedulerinst;
// instance.eventStore.forEach((task: any) => {
// const taskClassList = new DomClassList(task.cls);
// const matched = taskClassList.contains('b-match');
// if (task.name.toLowerCase().indexOf(val.value.toLowerCase()) >= 0) {
// if (!matched) {
// taskClassList.add('b-match');
// }
// } else if (matched) {
// taskClassList.remove('b-match');
// }
// // eslint-disable-next-line no-param-reassign
// task.cls = taskClassList.value;
// });
// instance.element.classList[val.value.length > 0 ? 'add' : 'remove']('b-highlighting');
// },
// },
},
}}
resourceTimeRanges={eventsData.resourceTimeRangesStack}
// eslint-disable-next-line react/jsx-props-no-spreading
{...GanttDefaultConfig}
/>