import { SchedulerPro, EventHelper, PresetManager, StringHelper, EventModel } from '../../build/schedulerpro.module.js?466403';
import shared from '../_shared/shared.module.js?466403';
const
zoomLevels = {
minuteAndHour : 1,
hourAndDay : 1
};
class ProEvent extends EventModel {
static fields = [
{ name : 'durationUnit', defaultValue : 'hour' }
];
}
const scheduler = new SchedulerPro({
// Limit zoom levels to those which use hours to make filtering non-working time works better in this demo
// A Project holds the data and the calculation engine for Scheduler Pro. It also acts as a CrudManager, allowing
// loading data into all stores at once
appendTo : 'container',
startDate : '2023-03-23',
endDate : '2023-03-28',
rowHeight : 90,
barMargin : 15,
eventStyle : 'border',
resourceImagePath : '../_shared/images/users/',
// Custom viewPreset (based on 'hourAndDay') that displays a compact 24-hour bottom header
viewPreset : {
base : 'hourAndDay',
tickWidth : 30,
displayDateFormat : 'll HH:mm',
headers : [
{
unit : 'day',
dateFormat : 'ddd DD/MM' //Mon 01/10
},
{
unit : 'hour',
dateFormat : 'HH'
}
]
},
features : {
// Not using the dependencies feature
dependencies : false
},
columns : [
// Column that displays a thumb for the resource
{
type : 'resourceInfo',
text : 'Manager'
}
],
// Custom event renderer that displays small thumbs for assigned resources
eventRenderer({ eventRecord, renderData }) {
const durationColors = {
0 : 'blue',
1 : 'indigo',
2 : 'violet'
};
// Project length determines color
renderData.eventColor = durationColors[Math.min(Math.floor(eventRecord.duration / 9), 2)];
// Custom content, displays images for assigned resources + event name
return [
{
html : StringHelper.encodeHtml(eventRecord.name)
},
{
className : 'assigned',
children : eventRecord.resources.map(resource => ({
tag : 'img',
draggable : false,
src : resource.image !== false ? this.resourceImagePath + resource.name.toLowerCase() + '.jpg' : null,
dataset : {
resourceId : resource.id
}
}))
}
];
},
listeners : {
paint({ firstPaint }) {
if (firstPaint) {
// To have resource images in events redrawn when assignments change, do a full refresh
this.assignmentStore.on({
add : 'refreshWithTransition',
remove : 'refreshWithTransition',
thisObj : this
});
// Select row when clicking a resource image on an event
EventHelper.on({
element : this.element,
delegate : '.assigned img',
thisObj : this,
click(event) {
this.selectRow({ record : event.target.dataset.resourceId });
}
});
}
}
},
tbar : [
// Add a button to filter out non-working time
{
ref : 'filterButton',
type : 'button',
text : 'Filter out non-working time',
toggleable : true,
icon : 'b-fa-square',
pressedIcon : 'b-fa-check-square',
onToggle({ pressed }) {
if (pressed) {
// Filter that keeps working time ticks in time axis
scheduler.timeAxis.filter(t => scheduler.project.calendar.isWorkingTime(t.startDate, t.endDate));
}
else {
// Restore all ticks
scheduler.timeAxis.clearFilters();
}
}
}
]
});
scheduler.resources = [{
id: 1,
name : 'Name'
}];
scheduler.events = [{
allDay: true,
draggable: false,
duration: 1,
durationUnit: "d",
eventColor: "#C4E538",
id: 11050,
name: "FS1",
note: "TEST",
resizable: false,
resourceId: 1,
startDate: "2023-03-26",
supportsRecurring: false
}]
Could you please attach here the code you used and link to example you used so we will be able to reproduce this.