This one I can reproduce. It is a known bug. I am working on it now.
I am slightly mystified by how your app is initially kicking off the first load though.
A resource view has to have a loaded resource store so that it knows what resources to create views for. But no views exist yet, so there is no load kicked off, so it cannot create views.
OK, if your sidebar datepicker has showEvents : true, that will do it. That will ask for a month's worth of events
I will have to make it work without that though. I will make it by default "prime the pump" with a months worth of events centered on the view's current date
Here's my source. Modelled on the sample code. The JSON is being built in a PostGreSQL query - example below.
<script>
const { Toast, ArrayHelper, DateHelper, StringHelper, Calendar, Splitter } = bryntum.calendar;
$(document).ready(function () {
const calendar = new Calendar({
// Start life looking at this date
date : new Date(),
includeWeekendsButton: false,
// Features named by the properties are included.
features : {
loadOnDemand: true,
drag : false,
eventTooltip : {
// Override the default which is to show on click.
//showOn : 'hover',
deleteEvent : null,
// We want the tooltip's left edge aligned to the right edge of the event if possible.
align : 'l-r',
// Mustn't shrink because of large, graphical content
minWidth : null,
renderer : data => `<dl>
<dt>Assigned to:</dt>
<dd>
${StringHelper.encodeHtml(data.eventRecord.resource.name)}
</dd>
<dt>Time:</dt>
<dd>
${DateHelper.format(data.eventRecord.startDate, 'LT')} - ${DateHelper.format(data.eventRecord.endDate, 'LT')}
</dd>
<dt>Note:</dt>
${data.eventRecord.get('notes') ? `<dd>${StringHelper.encodeHtml(data.eventRecord.notes)}</dd>` : '<dd>n/a</dd>'}
</dl>
`,
},
},
// CrudManager arranges loading and syncing of data in JSON form from/to a web service
crudManager: {
transport: {
load: {
url: '/api/practice/calendar/resource_events'
}
},
autoLoad: false,
},
// Render to a DIV with this id
appendTo : 'container',
modes : {
// Mode name can be anything if it contains a "type" property.
dayResources: {
type: 'resource',
title: 'Day',
resourceWidth: '30em',
view: {
type: 'dayview',
dayStartTime: 8,
dayEndTime: 20,
tools: {
close: {
cls: 'b-fa b-fa-times',
tooltip: 'Remove chair',
handler() {
const
calendar = this.up('calendar'),
resourceFilter = calendar.widgetMap.resourceFilter,
resource = this.resource;
resourceFilter.selected.remove(resource);
}
}
}
},
meta: resource => resource.title
},
// Mode name can be anything if it contains a "type" property.
weekResources : {
// Type has the final say over which view type is created
type : 'resource',
title : 'Week',
resourceWidth : '30em',
// This is a config object for the subviews
view : {
dayStartTime : 8,
// Dock an additional widget at the end of the header
// Show a close icon to filter out the resource
tools : {
close : {
cls : 'b-fa b-fa-times',
tooltip : 'Filter out this resource',
handler() {
const
calendar = this.up('calendar'),
resourceFilter = calendar.widgetMap.resourceFilter,
resource = this.resource;
resourceFilter.selected.remove(resource);
}
}
}
},
// Info to display below a resource name
meta : resource => resource.title
},
// Let's not show the default views
day : null,
week : null,
month : null,
year : null,
agenda : null,
},
listeners: {
beforeEventDelete({ eventRecords, context }) {
// creating new event or editing
console.log(context);
console.log(eventRecords);
if (eventRecords[0].resource.isVirtualChair) {
alert('Event summaries cannot be cancelled - cancel the appointment in the chair');
} else {
_setAppointmentID(eventRecords[0].id);
dmx.parse('modal_cancel_booking.show()');
}
return false;
},
beforeEventEdit({ eventRecord }) {
// creating new event or editing
console.log(eventRecord.resource);
if (eventRecord.resource.isUnavailable || eventRecord.resource.isVirtualChair) {
_alertNOResource();
} else {
// adding event - get timeslot details
if (eventRecord.meta.isCreating) {
_setAppointmentID('');
_setStartDate(eventRecord.startDate);
} else {
_setAppointmentID(eventRecord.id);
}
_setSelectedChair(eventRecord.resource.id);
dmx.parse('modal_event_editor.show()');
}
return false;
}
},
// A block of configs which is applied to all modes.
modeDefaults: {
view: {
hourHeight: 120
},
},
});
calendar.crudManager.load();
window.calendar = calendar;
});
// init our data
function _setAppointmentID(id) {
dmx.parse("var_editing_appointment_id.setValue('" + id + "')");
}
// init our data
function _setSelectedChair(id) {
dmx.parse("var_practise_room_chair_id.setValue('" + id + "')");
}
// init our data
function _setStartDate(_startDate) {
dmx.parse("var_start_date.setValue('" + _startDate + "')");
}
// clear up any native leftovers
function _reloadData() {
calendar.crudManager.load();
}
function _alertNOResource() {
dmx.parse("run({'bootbox.alert':{buttons:{ok:{label:'Cancel',className:'btn-info'}},message:'No resource available on selected date',title:'NO APPOINTMENTS'}})");
calendar.crudManager.load();
}
</script>
It loads an initial 7 days from today's date - it's just a buffer.
From that point on, the calendar issues requests.
Loading ALL events isn't feasible. Most orthos will have 40-50 appointments per day, 5 days a week, 5 doctors per practice. On average. It's too much data and all needs to be sync'd (web sockets next)
Yes, that's entirely reasonable. I have majorly refactored the LoadOnDemand feature today to be much more robust.
I have added tests which test it when using ResourceView and when using showEvents in the sidebar date picker.
This should all work fine for you in the next release. If I can get this past the review process quickly, then it should be available in a nightly build if you have access to the Customer Zone.