Customize timeline resource row color and HTML structure

#1

I would like to create “utility” resources in my calendar timeline where users can click to create new resource rows. The goal is to allow them to add child resources to parent resources inline by clicking on an Add button on the bottom of the parent resource.

There is an option, renderResource, which is supposed to allow you to customize the rendering of the resource. However, it only allows you to customize the label - the rest of the HTML of the resource is fixed, which makes it difficult to change the shape of the resource (ie - to make it a thinner bar then a real, full-on resource), to change the color of the resource tab, or really to customize very much of what’s going on there at all.

What I would like to do, at a minimum, is add a class to the resource tab at the same level as “mbsc-timeline-resource”, and ideally, be able to edit all of the HTML inside that div, and not just the “mbsc-timeline-resource-title” div, which only covers a small section of the resource.

I would also like to be able to shade this whole resource row a different color (in our designs it’s a light green). I’ve tried setting a color on the resource, but this doesn’t actually seem to result in any visible change.

I’ve attached a screenshot of what I’m trying to accomplish. Has anyone seen anything that looks like this? I keep digging through the documentation and I don’t see anyone referencing such a use case.

image
image.png410×966 55.9 KB

#2

Made a little progress on this by just flexing out the mbsc-timeline-resource-title div to fill the whole resource and then position:absoluting the expand/collapse icon. Not perfect but I was able to get something much closer to the mockup.

However, I still can’t figure out how to do two things:

  1. Change the height of this row so that it’s smaller - both to conserve space and to make it visually distinct from normal resource rows, helping to break up the different resource groups.

  2. Apply a class to the whole row to be able to set the background color or border attributes. Right now I can apply a background color + border to the resource cell but not the rest of the timeline row. It would be ideal if a class can be placed on the mbsc-timeline-row that corresponds to the resource. I haven’t found a way to do this yet. In the absence of that it looks like:

image
image.png696×110 1.65 KB

#3

Hi @Steve_Weiss!

Thanks for the detailed questions! I’ll try to answer them one by one.

  1. Custom heights for resource rows are not supported at the moment. The height depends on the height of the events and the number of events that are stuck on a row.
  2. You can set a color to a resource row using the colors option. You should pass a start and end date that is always outside of the view and pass the resource ID to colors object. The background property should be the color you want! Something like this:
colors: [
 { 
    start: new Date(2022, 0, 1),
    end: new Date(2023, 0, 1),
    background: '#FBFEF4',
    resource: 'addtask'
 }
]

Let me know if that works!

#4

Hello @Steve_Weiss :wave:

We have just shipped Mobiscroll 5.22 where we added the possibility of customizing the parent resource row with CSS, by using the .mbsc-timeline-parent class. E.g. increasing or decreasing the row height specifically for parent resources.

Working example: https://demo.mobiscroll.com/timeline/setting-row-height.