Howdy,
I love this product! Good job team Byntum on building it!
I have two partnered schedulers that does not render so nicely.
What I want
- Share one CrudManager between the two schedulers
- Scheduler 1 filters to some resources, while scheduler 2 filter to the rest
- On load scroll to a given day.
- Some custom sorting to take place for overlapping events in scheduler 1.
My question is: Which parts of the code below is causing the following issues? And how to rework the code to make it "smoother" and only require a single HTTP request?
Issues
- On the initial load, I see two identical GET calls are issued to the backend, most likely one from each scheduler so double up on load time
- It renders rather "ugly", see this video (I am just sharing part of the view due to privacy). See how it renders events, then disappears only to reload them again? https://www.dropbox.com/s/i7zutvwxv4xbjz5/Screen%20Recording%202022-11-23%20at%2007.15.09.mov?dl=0
What I have
Just sharing the key points here (I set a very basic, standard CrudManager inside useSchedulesConfig):
<script setup lang="ts">
import {onMounted, reactive, ref, Ref, UnwrapRef} from "vue";
import {BryntumScheduler} from "@bryntum/scheduler-vue-3";
import {DateHelper, Scheduler} from "@bryntum/scheduler";
const unassignedSchedulerRef: Ref<UnwrapRef<BryntumScheduler>> = ref(null);
const assignedSchedulerRef: Ref<UnwrapRef<BryntumScheduler>> = ref(null);
const sharedConfig = useSchedulesConfig()
const unassignedConfig = ref(reactive({
...sharedConfig,
ref: "unassignedSchedulerRef",
cls: "auto-height-unassigned-shifts",
hideHeaders: false,
}))
const assignedConfig = reactive({
...sharedConfig,
ref: "assignedSchedulerRef",
hideHeaders: true,
tbar: null,
})
const maxEndDate = ref(new Date())
const minStartDate = ref(new Date())
const firstDayOfSchedule = ref(new Date())
const onScrollTo = (obj) => {
const unassignedScheduler = unassignedSchedulerRef.value.instance.value;
unassignedScheduler.scrollToDate(obj.value, {block: 'start', animate: 500})
}
onMounted(() => {
const assignedScheduler = assignedSchedulerRef.value.instance.value;
const unassignedScheduler = unassignedSchedulerRef.value.instance.value;
unassignedScheduler.addPartner(assignedSchedulerRef.value.instance.value)
unassignedScheduler.eventStore.filter(event => event.resourceId === 0)
unassignedScheduler.resourceStore.filter(resource => resource.id === 0)
assignedScheduler.eventStore.filter(event => event.resourceId !== 0)
assignedScheduler.resourceStore.filter(resource => resource.id !== 0)
unassignedScheduler.widgetMap.scrollTo.on({change: onScrollTo, thisObj: assignedScheduler});
assignedScheduler.crudManager.on({
beforeLoad() {
},
load({source, requestType, response, responseOptions}) {
firstDayOfSchedule.value = new Date(Math.min(...assignedScheduler.eventStore.allRecords.filter(e => e.historic === false && e.eventType === "shift").map(r => r.startDate)))
maxEndDate.value = new Date(Math.max(...assignedScheduler.eventStore.allRecords.filter(e => e.eventType === "shift").map(r => r.endDate)));
minStartDate.value = new Date(Math.min(...assignedScheduler.eventStore.allRecords.filter(e => e.eventType === "shift").map(r => r.startDate)));
assignedScheduler.setTimeSpan(minStartDate.value, maxEndDate.value)
assignedScheduler.scrollToDate(firstDayOfSchedule.value, {block: 'start', animate: 500})
unassignedScheduler.eventStore.sort([{field: 'startDate', ascending: true,},])
unassignedScheduler.overlappingEventSorter = function (a, b) {
const startA = DateHelper.format(a.startDate, "YYYY-MM-DD")
const startB = DateHelper.format(b.startDate, "YYYY-MM-DD")
if (startA !== startB)
return 0;
if (a.name.toLowerCase() == b.name.toLowerCase())
return 0;
if (a.name.toLowerCase() < b.name.toLowerCase())
return -1;
if (a.name.toLowerCase() > b.name.toLowerCase())
return 1;
}
},
});
})
</script>
<template>
<div></div>
<div id="schedule-calendar">
<bryntum-scheduler ref="unassignedSchedulerRef" v-bind="unassignedConfig" />
<bryntum-splitter appendTo="schedule-calendar" />
<bryntum-scheduler ref="assignedSchedulerRef" v-bind="assignedConfig" />
</div>
</template>