Our pure JavaScript Scheduler component


Post by sagarsa2 »

Hi Team,
I am facing this issue, when I load the Scheduler - Group Summary component for a logged in user and logout and login with another user, try to load the Scheduler, its retaining the old data and showing up "Data Loading Failed". So I wanted to know if is there a way to clear data before loading Scheduler component. Below is the code I am using for loading:

const crudManager = new CrudManager(
 {
    autoLoad  : false,
    transport : {
        load : {
        method: 'GET',
        url: `GroupActionSummary`,
        paramName: 'data',
        headers: {
            'Content-Type': 'application/json',
          
}, } }, listeners: { beforeSend: ({ params }) => { params.id = actionId; }, beforeLoad: () => { if (!actionId) { return false; } return true; } } }); const schedulerConfig = { set: (id) => { actionId= id; }, eventStyle : 'border', resourceImagePath : 'https://', readOnly: true, features : { group : 'actionName', sort : 'name', groupSummary : { collapseToHeader : true, summaries : [ { label : 'Total', height : 40, // needed to make summary row grow correctly renderer({ events }) { const value = Math.min(1, events.length / maxValue), height = (100 * value) + '%'; return ` <div class="bar-outer"> <div class="bar-inner" style="height: ${height}"><label class="${value > 0.5 ? 'b-summarybar-label-inside' : ''}">${events.length || ''}</label></div> </div> `; } } ] }, pan : true, eventDragCreate : false, eventMenu: { disabled: true }, cellMenu : { disabled: true }, scheduleMenu : { disabled: true }, eventDrag : { disabled: true }, eventDragSelect : { disabled: true }, eventResize :{ disabled : true }, eventEdit : { disabled : true } }, columns : [ { text : 'Action', width : 100, field : 'actionName', hidden : true }, { type : 'resourceInfo', text : 'Action', width : 170, showEventCount : false, showMeta(resourceRecord){ var eventLength = resourceRecord.events.length; return `${eventLength} task${eventLength != 1 ? "s":""}`; }, summaries : [{ sum : 'count', label : 'Employees' }] }, { text : 'Name', width : 130, field : 'name' }, { type : "timeAxis", tooltip : "Right-click for context menu" } ], rowHeight : 55, barMargin : 10, startDate : '', endDate : '', createEventOnDblClick : false, // Customize preset viewPreset : { base : 'weekDateAndMonth', displayDateFormat : 'DD-MM-YYYY', timeResolution : { unit : 'day', increment : 1 } }, crudManager : crudManager, eventRenderer : (eventRecord, renderData) => UtilService.getSchedulerProEventRenderer(eventRecord, renderData) }; export { schedulerConfig };
function ActionGroup(actionId) {
     
const schedulerRef = useRef(); schedulerConfig.setAction(actionId.actionId); useEffect(() => { schedulerConfig.crudManager.load(); if(schedulerRef.current){ const scheduler = schedulerRef.current.instance; scheduler.zoomLevel = 7; } }, []); return ( <Fragment> <BryntumScheduler ref={schedulerRef}{...schedulerConfig}/> </Fragment> ); }

Post by saki »

What you could do would be to empty all scheduler stores before CM load. The code could look like this:

useEffect(() => {
    if(schedulerRef.current){
        const scheduler = schedulerRef.current.instance;
        scheduler.resourceStore.removeAll();
        scheduler.eventStore.removeAll();
        // remove records from all other used stores (dependencies, time ranges, etc.)
        scheduler.crudManager.load();
    } 
     
 }, []); 

Post Reply