I have two types of resource columns in my day view. All of the columns of one type will be one width and all of the columns of another type will be a different width. When I do this dragging to create ends up creating events in the wrong resource column. It appears as though the logic for handling “drag to create” assumes all of the column widths are the same.
Yes, it’s possible that the different column widths are causing the issue. Could you share a visual and some code where I can replicate this behavior to investigate further?
I noticed you are using version 5.18, while the latest is 5.33. I don’t think updating will directly solve your problem, but it’s always a good idea to stay up-to-date. You can check the update guide here: Update Mobiscroll Version.
Our use case is fairly complex and I don’t have a minimal reproducible example to show you. I did update to the latest version and that did not fix things. However, I’ve found a way to workaround what I need to for the time being. It would be good in the future to be able to have different column widths per resource as it would improve our user experience.
You could create a minimal case example doing the following:
const resources=[...create some resources with cssClass prop that give every other resource widths like 100, 400, 100, 400, etc.]
<Eventcalendar
theme="ios"
themeVariant="light"
showControls={false}
showEventTooltip={false}
showToday={false}
showLabelCount={false}
dragToCreate
dragTimeStep={15}
view={{
schedule: {
type: "day",
size: 1,
timeCellStep: 15,
allDay: false,
},
}}
resources={resources}
/>
Then try dragging to create in one column near the edges of the next and you should see the UI creating the event in the wrong column.
Thank you for the valuable details.
I tested the code you shared and reproduced the issue.
Currently, we don’t support variable column widths, but this feature has been requested before. I’ve added your voice to the list as well.