Resource Manager Calendar widget

Hi,

I have a requirement that needs a resource manager UI component. Ideally I would like to use Vaadin because of existing experience. However there is nothing out of the box that I can find.

I need the widget to allow me to schedule multiple appointments daily for multiple individuals, a bit like a project plan but top to bottom. See attachment for an example.

I’m thinking of creating a widget that contains a collection of Calendar widgets that render side by side in day view and have one scroll bar to move all in sync along the time axis.

Does anyone know of anything that already does this and if not would the above be a good approach - I’ve never created a custom widget and my strength is more server side than UI work.

Thanks
20805.png

This will most likely not be a trivial task. There are multiple approaches that can be taken, I won’t guarantee that all of them works, but I’ll throw in some ideas where to get started.


Server-side approach

Depending on how flexible you are with your requirements, this could be achieved in the following way:

  • Panel (for scrollbars)
    [list]
  • HorizontalLayout
    [list]
  • n times VerticalLayout (one for each resource)
    [list]
  • Label (resource name)
  • Calendar in “day” mode. Height and width of calendar needs to be static (in pixels, that is).

    [/list]

    [/list]

    [/list]

Making the calendar static in height guarantees you that you won’t get any scrollbars in the calendar itself. If the calendars’ heights are larger than the panel, then you’ll get scrollbars within the panel. Note that scrolling would also hide the header of the calendar (date and resource name), so when scrolling, you wouldn’t any longer see to whom the calendar belongs. If this is not OK, then an option might be to move the labels outside the panel, but then the widths of the calendars would also need to be known.

With this approach, you should come quite close to the image you’ve posted. Down-side is that you’ll have the hours showing for every resource. You might be able to get rid of those with some CSS magic (not sure if this alone will help). Second option is to make a custom version of the Calendar and remove the timeline from the client-side code.

Not sure what the performance of this approach is. If you have many resources visible at the same time, it might become slow to render.


Client-side approach

One approach is to do it basically in exactly the same way as the server-side approach, as you described, but I don’t see much benefit in this. A more complex, but “better” way would be to take a copy of the calendar component and modify so that instead of showing days in the week mode, each “day” would be a resource. I haven’t taken a look at the code, so I have no idea how hard this would be to implement. From a performance perspective, my guess is that this approach would be the best.

Hi Devguy,

I’m facing exactly the same need. What was the solution you adopted to get what you mentioned in the attached image ?

Your response will help me a lot.

Thanks in advance.

Hi because this widget was the core of our application we had to go with Kendo in the end. Vaadin did offer a custom build but it prooved too expensive for our project - they also did say if there is enough interest in this widget they would look at sponsoring it. I recommend you contact them - if it were to be developed in the future we would consider porting our app.

I would also be interrested in such a component, and in my opinion it deserves a sponsoring.

could somebody at Vaadin give us a little more info about how many people asked for it, and which kind of offer has been done to devguy ( price, planning, and functional scope ) ?

Regards

Two samples :

http://demos.telerik.com/kendo-ui/scheduler/timeline
http://www.smartclient.com/smartgwt/showcase/#timeline_filtering_new

Could be a nice add to the actual calendar component, or (if really hard to do) a pretty decent pro-tool.

Hi! I’m the product manager for Vaadin’s Pro Tools. Before being a product manager, I’ve been working in our consulting deparment in delivering projects built with Vaadin. I’ve been personally in two projects that has had some kind of resource manager and I know about one additional that implemented one.

So in that sense it could be a nice Pro Tool as many needs some kind of resource managing. The problem is that it is very hard to agree on a common feature set that would be useful for many projects. From the three cases that I know personally, I don’t think we could have buiit one common solution that would be good enough for more than one of the projects.

Some features to consider:

  • Should the lanes be vertical or horizontal
  • Should there be multiple lanes
  • Should it be bound to a time scale or something else
  • If time, should it be a day like 0:00-24:00, or something else? Can it span multiple days? Could it be weeks?
  • Should slots have a granularity on size, like you can only resize for example 10 minutes at a time?
  • Should the start and end time of slots be defined across all lanes to be the same or should there be no slots, like in a calendar.
  • Should the whole range always be filled with something throughout the whole time span and you just change configurations at smaller intervals. Like for example in a supermarket case where you wouldn’t allocate persons directly to cashiers but you plan how many cashiers should be available throughout the day in different hours.
  • Should it be populated by drag and dropping stuff on top of it
  • Should it be populated by a popup button where you fill in the details
  • Should the events be resizeable by dragging the edges
  • Should they have context menu actions

Those were the first things that popped into my mind. I found one of the three cases in the public success stories on vaadin.com. That was maybe the most special one as had a mode where it was only one lane with additional info, it was horizontal, and the requirement was that there should never be any empty slots. You can see it in second screenshot on
https://vaadin.com/who-is-using-vaadin/showcase/-/asset_publisher/2Spd/content/perseo?redirect=/who-is-using-vaadin

So there is a lot to consider on when building a generic add-on like this. I guess it could be fairly simple to build the most basic case, for example a barber shop case, where you have employees as the lanes, a working day as the time span and then book customer appontments to the employees throughout the day. The question is that is it too basic for most/all cases and it wouldn’t be enough for most looking into it. Then the additional features needed would vary greatly from project to project.

This is however on my radar now and I will keep it in mind when considering what our Pro Tools team should build next. Thanks for your input.

Hi Jens,

Thanks for the reply. That’s a good list of points and I’m sure there are more. But none of them strike me as being mutually exclusive, albeit I don’t think the widget should be overcomplicated.

I believe the Kendo Scheduler solution addresses a lot of the points you raised and is very useful for most cases. Something similar would be an awesome starting point for a Vaadin implementation. I already have 2 uses for such a widget.

http://demos.telerik.com/kendo-ui/scheduler/index

Thanks

Hi Jens,

Yes, many thanks for taking time to answer this one.
But I completely agree with Devguy, having finest specifications does not exclude generic component.

As I told on a preview post, there are multiple components like this in other frameworks.
(as a remind, for instance : http://demos.telerik.com/kendo-ui/scheduler/timeline and http://www.smartclient.com/smartgwt/showcase/#timeline_filtering_new)

There is also a nice start with
Gantt AddOn
, we had some good results with it. But the fact is, it’s quite risky to rely on a free add-on with low-activity (no offense Tomi, you’re addon is great !) for a production-project.

It could also be an extension to the actual calendar component, it would make sense.

Regards

Thanks to both of you.

The Kendo Sceduler seems to indeed be a Calendar widget that can be presented in multiple different ways. Especially the /timeline demo is interesting there. The basic usage version is pretty much a regular calendar wiget with multiple calendar sources attached to them - in their demo terms “Owner”. Vaadin Calendar, http://demo.vaadin.com/calendar, is a bit similar with the exception that here is has directly “Color” to distinguish instead of “Owner”. A customized visualisation of Calendar can also be found in http://demo.vaadin.com/dashboard/#!schedule.

So it could be possibe to extend on Calendar to do this, or then you could make a completely different component which would maybe share the data model with the Calendar. My gut says that having a seprate components with maybe a shared base is better as the different presentations wouldn’t cripple each other feature wise.

Vaadin Calendar was orignially a Pro Tools add-on and one of the first ones. It was later released under Apache license and moved to maintenance mode due to lack of interest in it. I think this was back in 2012 or 2013. I will ask the guys who were on the project back then and see if there were any plans like this back end, and how much interest there was in the end.

Here might be potential for sponsored development as well.