Our pure JavaScript Scheduler component


Post by JohnMousley »

I am having an issue with Scheduler Pro.

I am using a tabbed event editor. The tabs are different sizes and as I switch between them, the panel resizes, if I switch to a tab with less fields (smaller) and press the close button, when I go back into the event editor it saves the selected tab. If I then navigate to a tab with more fields, the panel does not resize to show all fields.

Please can someone help with this.


Post by mats »

Can you please post a simple test case with your tab panel config?


Post by JohnMousley »

Hi, I have attached a basic example of what we are doing.

Unfortunately the full project is to large to upload.

If you bring up the task editor, you will see an address tab, if you then go to the Appointment tab and press close, this will cause the problem.

If you then go back into the task editor and go to the address tab, some fields will be hidden.


Post by JohnMousley »

When I try to upload a file I get an error "Error parsing server response."

is there somewhere I can email the files to?


Post by mats »

No need to attach a huge sample, a minimal snippet test case would be ideal. Look at the size of our basic demo JS:

const project = new ProjectModel({
    transport: {
        load: {
            url: '../_datasets/launch-saas.json'
        }
    }
});

new Gantt({
    appendTo: 'container',
    
project, dependencyIdField: 'sequenceNumber', columns: [{ type: 'name', width: 250 }], // Custom task content, display task name on child tasks taskRenderer({ taskRecord }) { if (taskRecord.isLeaf && !taskRecord.isMilestone) { return taskRecord.name; } } }); project.load();

Post by JohnMousley »

The JS is here:

var project = null;
var scheduler = null;
const strTime = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 8, 0, 0, 0);
const endTime = new Date(strTime.getFullYear(), strTime.getMonth(), strTime.getDate() + 1, 22, 0, 0, 0);

var confirmationsEnabled = false;
var divContainer = null;

window.onload = function () {
    var contHeight = window.innerHeight - 112;
    divContainer = document.getElementById('container');
    divContainer.style.setProperty('height', contHeight + 'px');
   
scheduler = new bryntum.schedulerpro.SchedulerPro({ project: { // Configure urls used by the built in CrudManager transport: { load: { url: '..\data\data.json' } } }, features: { taskEdit: { showDeleteButton: false, items: { customerTab: { title: 'Address', items: { CustomerField: { label: 'Name', name: 'customerName', readOnly: true, type:'text' }, address1Field: { label: 'Address', name: 'address1', readOnly: true, type: 'text' }, address2Field: { label: 'Address 2', name: 'address2', readOnly: true, type: 'text' }, address3Field: { label: 'Town/City', name: 'address3', readOnly: true, type: 'text', width: 100 }, address4Field: { label: 'County', name: 'address4', readOnly: true, type: 'text' }, zipField: { label: 'Postcode', name: 'postcode', readOnly: true, type: 'text', width: 50 }, phoneField: { label: 'Phone No', name: 'phoneNo', readOnly: true, type: 'text', width: 50 }, mobileField: { label: 'Mobile No', name: 'mobileNo', readOnly: true, type: 'text', width: 50 }, emailField: { label: 'Email', name: 'email', readOnly: true, type: 'text', width: 50 }, presentationField: { label: 'Presentation', name: 'appointApproved', type: 'checkbox' } }, weight: 50 }, oppTab: { title: 'Opportunity', items: { OpportunityField: { label: 'Opp No', name: 'name', readOnly: true, type: 'text' }, prodField: { label: 'Product', name: 'product', readOnly: true, type: 'text' }, lSourceField: { label: 'Lead Source', name: 'leadSourceGroup', readOnly: true, type: 'text' }, MediaCDField: { label: 'Media Code', name: 'mediaCode', readOnly: true, type: 'text', width: 100 }, repField: { label: 'Rep', name: 'repName', readOnly: true, type: 'text' }, entryDtField: { label: 'Entry Date', name: 'opportunityEntryDateDisplay', readOnly: true, type: 'text', width: 50 }, marketingAreaField: { label: 'Marketing Area', name: 'marketingAreaNumber', readOnly: true, type: 'text', width: 50 } }, weight: 60 }, notesTab: { title: 'Comments', items: { notesField: { type: 'text', name: 'notes', label: 'Notes', width: 150 } } }, generalTab: { // Customize the title of the general tab title: 'Appointment', items: { // Hide the end date field nameField: { label: 'Opp No'}, endDateField: null, eventTypeField: { type: 'combo', name: 'eventType', label: 'Type', // Provided items start at 100, and go up in 100s, so insert after first one weight: 110, items: ['Appointment', 'Unavailable'] }, startDateField: { format: 'DD/MM/YYYY' }, durationField: { allowedUnits: 'hour' }, percentDoneField: false } }, predecessorsTab: false, successorsTab: false, advancedTab: false } } }, columns: [ { type: 'resourceInfo', text: 'Sales Reps', width: 200, // JSX as renderer renderer: ({ record }) => '<b>' + record.name + '</b>' } ], startDate: strTime, endDate: endTime, viewPreset: 'hourAndDay', tickSize: 50, appendTo: divContainer }); // Load data from the back-end scheduler.project.load(); }

The data we are using is here:

{
	"success": true,
	"events": {
		"rows": [{
			"id": "105959877_Y_1_20210304182100",
			"resourceId": "3642910",
			"eventColor": "blue",
			"name": "105959877",
			"durationUnit": "hour",
			"duration": 2.0,
			"repName": "Resource 1",
			"eventType": "Appointment",
			"appointApproved": "False",
			"notes": "Appointment details: Interested in Windows Quantity - 1 Age - 0 Doors\r\nQuantity - 1 Age - 0 Reasons for upgrade:\r\nREAPPOINTED BY FOOTCAN\r\nThis is a test on lead source change.",
			"startDate": "2021-03-04T18:21:00",
			"appointmentDateDisplay": "Thu 04 Mar 2021 06:21 PM",
			"endDate": "2021-03-04T20:21:00",
			"uniqueID": "0214506120210304165753",
			"customerName": "Mr Test",
			"opportunityNumber": "105959877",
			"householdNumber": "4180169",
			"companyNumber": "300",
			"product": "CONVEN",
			"orderNumber": "",
			"regionNumber": "1",
			"marketingAreaNumber": "47",
			"leadSourceGroup": "04",
			"mediaCode": "FOOTCAN",
			"creationDate": "20200123",
			"opportunityEntryDate": "20200123",
			"opportunityEntryDateDisplay": "23/01/2020",
			"installationDate": "0",
			"canvasserType": "F",
			"canvasserNumber": "100134095",
			"canvasserteamonopportunity": "NORWICH",
			"appointmentDate": "20210304",
			"appointmentTime": "182100",
			"presented": "N",
			"saleDate": "0",
			"saleweekendDate": "0",
			"saleValue": "0",
			"sourceFinance": "",
			"repNumber": "3642910",
			"guaranteeStatus": "",
			"sittingCode": "",
			"opportunityUpdateProgram": "TPNF030",
			"opportunityUpdateDate": "20210302",
			"opportunityUpdateUser": "",
			"opportunityUpdateTime": "94904",
			"activeIndicator": "",
			"recallDate": "0",
			"opportunityQuantity": "0",
			"singleItemFlag": "N",
			"canvasserValue": "50.00",
			"subOverrideValue": "0",
			"overrideValue": "20.00",
			"supervisorsPayrollNumber": "000",
			"subSupervisorsPayrollNum": "000",
			"canvasserpaidfield": "N",
			"titleonOpportunity": "Mr",
			"opportunityFirstName": "M",
			"opportunitySurname": "Test",
			"uniquePersonalNumber": "19293599",
			"recommendorNumber": "0",
			"recommendValue": "0",
			"recommendPaidDate": "0",
			"fcanSalesbonuspercentage": "1.00",
			"newFootcanPay": "Y",
			"sgoInterest": "N",
			"passedtoShowroom": "Y",
			"acknowledgedbyShowroom": "N",
			"originalRepNumber": "",
			"appointmentDateOverrideU": "",
			"exclude": "N",
			"adapt": "",
			"adaptOpportunity": "",
			"adaptSoldOpportunity": "",
			"numberofUnits": "0",
			"footcanApp": "Y",
			"subidiaryMediaCode": "",
			"distancesellingflag": "H",
			"distancesellingDisplay": "In Home",
			"distancesoldflag": "",
			"documentFlag": "",
			"dateAdded": "20210304",
			"version": "21",
			"address1": "65 Test ROAD",
			"address2": "",
			"address3": "BURY ST. EDMUNDS",
			"address4": "SUFFOLK",
			"postcode": "IP33 2II",
			"phoneNo": "",
			"mobileNo": "",
			"email": "",
			"rowHeight": 150
		}]
	},
	"resources": {
		"rows": [{
			"id": "3642910",
			"name": "Resource 1",
			"type": "Norwich"
		}]
	}
}

Post by pmiklashevich »

Thanks for the report! Ticket here: https://github.com/bryntum/support/issues/2493

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply