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"
}]
}
}