Employee Week View in Timeline Sample?


#1

Using the example here, do you have a version that shows the Employees name on the left and a Week view at the top?

https://dhtmlx.com/docs/products/dhtmlxScheduler/sample_timeline.shtml

We are looking for a way to make it easy to schedule employees based on which construction project they should be on for that day.

THanks
Steve


#2

Hi Steve,
Sorry for the delay. Regarding this question:

Using the example here, do you have a version that shows the Employees name on the left and a Week view at the top?

If I understood you correctly, you want to show the Employees name on the y-axis and days of the week on x_axis. You can customize the X-scale step and size in the Timeline view to show one week on X-axis there.
Please, use the createTimelineView method and properties of the configuration object of the Timeline view to solve it:

var sections=[
  {key:1, label:"James Smith"},
  {key:2, label:"John Williams"},
  {key:3, label:"David Miller"},
  {key:4, label:"Linda Brown"}
];

scheduler.createTimelineView({
  name:    "timeline",
  x_unit:    "day",
  x_date:    "%D, %j %F",
  x_step:    1,
  x_size: 7,
  y_unit:    sections,
  y_property:    "section_id",
  render:"bar"
});
scheduler.date.timeline_start = scheduler.date.week_start;

A snippet with week scale in the Timeline view:
https://snippet.dhtmlx.com/5/6a3336c08

We are looking for a way to make it easy to schedule employees based on which construction project they should be on for that day.

Using the dhtmlxscheduler_treetimeline.js extension, you can display constructions and employees as children in the scheduler. In order for the same employee relate to different constructions, you can make them as a child elements with the same labels, but with the different ids:

var elements = [
  {key:10, label:"Construction 1", open: true, children: [
    {key:1.10, label:"Emploee 1"},
    {key:2.10, label:"Emploee 2"}
  ]},
  {key:20, label:"Construction 2", open:true, children: [
    {key:1.20, label:"Emploee 1"},
{key:2.20, label:"Emploee 2"}
  ]}
];

Here is a demo:
http://snippet.dhtmlx.com/5/1b307b123

If you need something different, please describe your question with more details or send us some image of how it should look.


#3

I have a couple questions about the first example you provided. week scale in the Timeline view

  1. How do we define the work day (such as 8AM-5PM) so that the events that get added appear wider? It looks like each day factors in the hour and that causes the items to appear smaller making it impossible to read unless you open the item.
    a.
  2. What do we change to show only Monday -Friday?
  3. In construction, you have crews/teams. Often there is one supervisor and several employees. They all arrive and leave at the same time and have the same schedule. How could we show a Crew name on the left hand side and when a change is made to the crew, also apply it to the employees that make up the crew. This is where most all scheduling software falls apart. They do a great job scheduling one person, but not groups of people. So instead of scheduling something once, it has to get scheduled one per person that is on the crew. That keeps most people from using scheduling software since it doesn’t allow for the crew as a whole to be scheduled.

#4

Hi!

How do we define the work day (such as 8AM-5PM) so that the events that get added appear wider? It looks like each day factors in the hour and that causes the items to appear smaller making it impossible to read unless you open the item.

you can try round_position option:
https://docs.dhtmlx.com/scheduler/api__scheduler_createtimelineview.html
it will stretch the event to the whole width of the cell, which may or may not be what you need.

otherwise, I think you could try the tooltip extension to make the content readable without opening the form https://docs.dhtmlx.com/scheduler/tooltips.html

What do we change to show only Monday -Friday?

There is a feature for hiding columns in the view, please check this article:
https://docs.dhtmlx.com/scheduler/custom_scales.html

Here is a live example: http://snippet.dhtmlx.com/5/77f5aa4aa

In construction, you have crews/teams. Often there is one supervisor and several employees. They all arrive and leave at the same time and have the same schedule. How could we show a Crew name on the left hand side and when a change is made to the crew, also apply it to the employees that make up the crew. This is where most all scheduling software falls apart. They do a great job scheduling one person, but not groups of people. So instead of scheduling something once, it has to get scheduled one per person that is on the crew. That keeps most people from using scheduling software since it doesn’t allow for the crew as a whole to be scheduled.

I think I get what you mean, and it will require some custom development.

I can suggest several approaches that you may investigate, either of them should be doable but each will provide slightly different UX.

Firstly, do you want to edit the appointments of each person in the crew individually? Not just remove an appointment from some person, but to adjust the duration and dates for some people within the crew?
If so, then the solution would be to develop a simple way of creating multiple appointments in predefined rows.

Given that you have a Tree Timeline like in this example: http://snippet.dhtmlx.com/5/77f5aa4aa

  1. We can allow creating events in ‘folder’ rows (that are crews), and these events will be duplicated for each person in the crew. You’ll listen to API events for creating new events, and if the event is created in a folder (crew row) - you get all members of that crew and add a copy of that event to each member.
    After that, each event will be editable individually. You can also add hooks for deleting or modifying the crew event in order to apply the same changes for the whole crew.

Live example: http://snippet.dhtmlx.com/5/db378cba1

  1. Another approach would be to allow users to select crew members before creating the appointment.
    For example http://snippet.dhtmlx.com/5/59e5023a2 - try selecting a crew and then drag-create an appointment.
    If you check the code, you’ll find ‘onEventAdded’ handler that duplicates the appointment for all selected members.

If you don’t need the ability to change the duration of crew events for individual members, you can look into multisection events feature:
https://docs.dhtmlx.com/scheduler/timeline_view.html#assignmentofeventstoseveralsections

Something like this: http://snippet.dhtmlx.com/5/2ad7177d8 (please note this example is not finished, I’ve made it just to illustrate the general idea);

Hopefully, something from this is helpful:)


#5

Wow - you went above and beyond on providing us great customer support and some great examples to review. Thank you very much.

I like approach #2 since it allows you to leave off someone if they are out.

When testing this example (http://snippet.dhtmlx.com/5/2ad7177d8), I clicked on George’s name to add an event and it shows the names of everyone else on the crew within the Add Event popup. I haven’t decided if that would be good or bad but I’m wondering if it would be possible to not show the names of other employees if the action is performed on an individuals name. In that case, we would just apply the action to that person. If someone creates a task from the gray bar, then it would show all names.

You are correct, once an event is scheduled for the crew, we want to allow the individual entries to be adjusted. I tried to adjust the crew entry to see if it would adjust the associated events but it did not.

Using the approach similar to setup in #2, could you create a button called “Schedule Shift”. Once clicked, it opens the same popup that you would see if you double click on the Crew grey bar. This is what someone would do to create a schedule for multiple employees at the same time who may or may not be listed together in the same crew. The reason for this is that some companies use crews and some do not.

Regarding above point, companies would want all of their employees to be in the Employee list and then followed by a list of Crews (if any). This means that some employees could appear multiple times (as an Employee and as an employee of a Crew). The person would be the same so the what ever is scheduled for them in Crew would show in their Employee view and what ever is scheduled in the Employee row would also show with their name in the Crew section. Does that make sense? See the attached image.

In the timeline view, can it be set to show one week at a time (Monday - Friday)? We would ultimately allow our customers to set which days they want to see but showing one week at a time really allows you to get a good view of who will be where and when. I do agree that we most likely need to add the tooltip feature since some Project names (which is what we will use as the Event name) will be long and clipped.

You all have a lot of examples but I feel like this is one of the things missing the most. We get asked for this feature very often and there are not many people who do it well. I think you all have everything needed to provide a really great Employee/Crew scheduling feature.

Looking forward to your reply.

THANK YOU VERY MUCH!!!

-Steve


#6

Hi Steve!

I’ll start with this question since the solution here is more straightforward

In the timeline view, can it be set to show one week at a time (Monday - Friday)? We would ultimately allow our customers to set which days they want to see but showing one week at a time really allows you to get a good view of who will be where and when.

Yes! It’s fairly simple. The range of the timeline is controlled by several parameters

  1. The start date of the scale is defined by scheduler.date.{viewName}_start function. This function is created automatically when you call scheduler.createTimelineView, and the {viewNane} part matches the name value of the parameter.
    Meaning that if you create the timeline like this:
scheduler.createTimelineView({
   name: "timeline",
   ...
});

The scheduler will define function named scheduler.date.timeline_start.
This function accepts Date argument - date which must be displayed in the timeline - and returns a start date of the timeline for that date.
In short, in order to start the timeline from Monday, the function must return the week start date for any given date:

scheduler.date.timeline_start = function(date){
    return scheduler.date.week_start(date);
};
  1. The range of the timeline is defined by x_size and x_step properties of the timeline configuration.
    So in order to have a weekly timeline you need the following configuration:
scheduler.createTimelineView({
  section_autoheight: false,
  name:	"timeline",
  x_step:	1,
  x_size: 7,
  x_unit: "day",
...
  
});
scheduler.date.timeline_start = function(date){
   return scheduler.date.week_start(date);
};

http://snippet.dhtmlx.com/5/493391396

  1. Then, in order to hide weekends, you need to use the ignore function:
scheduler.ignore_timeline = function(date){
    if (date.getDay() == 6 || date.getDay() == 0) //hides Saturdays and Sundays
        return true;
};

The reason for setting timeline size to 7 days and hiding two of them instead of specifying x_size: 5 is that x_size also defines the increment which is applied when you press Next and Prev buttons in the navigation panel - https://prnt.sc/tdyu4k - you want the timeline to be scrolled full week forward/backward when you click those buttons.
So you’ll want to have the inner timeline size as 7 days and hide the weekends.

There is a way to redefine the built-in increment behavior, so it won’t rely on x_unit - the same way as with scheduler.date.timeline_start scheduler also defines another function scheduler.date.add_timeline(startDate, direction) which is used to calculate the next displayed date from the current one. startDate is the start date of the time scale, direction is 1 or -1 for the next or previous date respectively. This function can be also redefined, e.g.

scheduler.date.add_timeline = function(date, inc){
    return scheduler.date.add(date, inc, "week");
};

Here is a general description of these functions https://docs.dhtmlx.com/scheduler/custom_views.html#methodsforhandlingtheview

but for now, it may be simpler to go with ignore_timeline approach.

I’ll try to get to the rest of your questions a bit later today


#7

I like approach #2 since

Before we continue, I realized that I did a bad job numbering examples, so I’m not 100% which #2 setup you mean.

Here are different setups

As I understand, by the #2 approach you mean the last example, which uses ‘multisection events’ feature ( https://docs.dhtmlx.com/scheduler/timeline_view.html#assignmentofeventstoseveralsections ).

There is an important distinction between ‘multisection events’ example and the rest:

Multisection events mean that we have a single event record, which is mirrored in multiple rows. That’s why changes applied to one of such events are immediately applied to all others.
This also means, that using this approach, you can’t modify events individually since there are no individual data items to modify. Technically, it’s possible to work around that, but the complexity defeats the purpose of usage of the multisection events.

Thus, I believe you’ll have a better chance of implementing what you need using regular events and duplicating them by code like in this example:
http://snippet.dhtmlx.com/5/db378cba1
This way, at the data level you’ll have individual records that could be edited separately.
If you’ll want these records to be moved synchronously (e.g. user moves a record in a gray row and all individual bars are moved simultaneously), or to be able to modify these records as one - it can be done via API.

Using the approach similar to the setup in #2, could you create a button called “Schedule Shift”. Once clicked, it opens the same popup that you would see if you double click on the Crew grey bar. This is what someone would do to create a schedule for multiple employees at the same time who may or may not be listed together in the same crew. The reason for this is that some companies use crews and some do not.

Yes, I believe it can be done (using the approach with duplicated events http://snippet.dhtmlx.com/5/db378cba1 ).
You need to implement the popup,
when it’s saved you’ll have a list of selected employees.
When you have it, you can create individual events from the API and add them into the scheduler https://docs.dhtmlx.com/scheduler/api__scheduler_addevent.html

In order for all individual records to have some shared properties (i.e. title), you’ll need to add your records a custom property e.g. shiftId, which you’ll generate somehow, so you could tell which records represent the same workshift.
Having that, you’ll be able to modify all records of the same shift from code, when the user modifies an individual row.

Regarding above point, companies would want all of their employees to be in the Employee list and then followed by a list of Crews (if any). This means that some employees could appear multiple times (as an Employee and as an employee of a Crew). The person would be the same so the what ever is scheduled for them in Crew would show in their Employee view and what ever is scheduled in the Employee row would also show with their name in the Crew section. Does that make sense? See the attached image.

This may require some work.
There is no simple way to duplicate sections of the timeline and their events that way.
Probably the simplest approach would be to have two separate schedulers - https://docs.dhtmlx.com/scheduler/samples/20_multiple/01_basic.html - displaying the timeline.
The top one will display a complete list of employees,
In the bottom one, you can hide the navigation panel and the header of the timeline, so it would look like an extension of the top scheduler.

A quick sample: http://snippet.dhtmlx.com/5/6bde548f3

And then you’ll need to synchronize the data between them - capture data change in one scheduler https://docs.dhtmlx.com/scheduler/server_integration.html#savingchangeswithoutdataprocessor
and adding/updating/removing appropriate records in another.

Making all of this into a usable app will definitely require quite a bit of work, but overall it seems doable.


#8

You are really heading in the right direction and this is very encouraging. Others will be able to read this in the future and learn from it since this is something needed in so many industries.

I reviewed each example that you shared.

http://snippet.dhtmlx.com/5/db378cba1 - duplicate an appointment created in a crew row

This example does not allow you to modify the main (gray bar) vent and allow the following items to be updated.

http://snippet.dhtmlx.com/5/59e5023a2 - duplicate an appointment using checkboxes

This example would be too difficult for someone to understand and they would forget to check the box and not realize the mistake unitl after they added the details.

http://snippet.dhtmlx.com/5/2ad7177d8 - duplicate an appointment created in a crew row using ‘multisection events’ feature (please don’t mind the “Construction site” events, these are test data from the previous example and don’t use multisection feature, try creating new records in gray rows to see how multisection events work)

This example is close but it doesn’t allow me to remove someone from the shift like the others do. Example: Mike is part of the crew but I know that each Friday Mike has to leave at noon to go visit his sick parents. I want to schedule Mike when I schedule others but then I want to reduce his time for the Friday entry.

I looked at the sample for multiple calendars but I do not think it will be the best fit for us.

Once we get the sample able working, I think we will be at a place where we can start making smaller customization’s (such as text alerts).

We do need to figure our a way to allow a crew to be scheduled at one time and have the crew task move and it move the tasks for everyone assigned to it but at the same time allow for each individuals tasks to be changed or revised without impacting the full crew. If we can get that working, that will be great!

Again, thank you very much!


#9

Hello Steve!

This example does not allow you to modify the main (gray bar) vent and allow the following items to be updated.

Please beware, the examples above show exactly one feature - how to bulk-create appointments for multiple rows(employee crews) of the timeline. It can be done in different ways, each way may have different side-effects which will affect how you’d need to develop the next steps.

From what I can see now, I believe the following approach/snippet is a good starting point:

http://snippet.dhtmlx.com/5/db378cba1 - duplicate an appointment created in a crew row

The ability to modify the main event and have these changes to be applied to the following events is a different feature that I didn’t touch and that will require some experimenting. I can only suggest you a general direction and point to the related API.
It can be done but will require some coding, which I can’t do here this time.

If you’re going to give it a try yourself, you may want to check onEventChanged API event:
https://docs.dhtmlx.com/scheduler/api__scheduler_oneventchanged_event.html
It is fired each time an event is modified.
So, each time you detect the main event is changed - you’ll need to get the individual events and apply the appropriate changes to them. That way you’ll have changes made to the main appointment applied to the related ones.

E.g. http://snippet.dhtmlx.com/5/a26e3a45f

If you want the member events to be moved synchronously with the crew event during drag and drop, you’ll need to capture drag and drop events:

https://docs.dhtmlx.com/scheduler/api__scheduler_onbeforedrag_event.html
https://docs.dhtmlx.com/scheduler/api__scheduler_oneventdrag_event.html
https://docs.dhtmlx.com/scheduler/api__scheduler_ondragend_event.html - each time the main event is updated by drag-and-drop, you get all related events, changes their dates accordingly and repaint them (https://docs.dhtmlx.com/scheduler/api__scheduler_updateevent.html).

E.g.: http://snippet.dhtmlx.com/5/454c070cd

That way they could be moved together with the main event.

If you’ll have difficulties with implementing a particular feature - please share some kind of sample of what you’ve got, so I (or anyone else on this forum) could look at it and suggest something.

If you’ll need more involved help - you may want to contact our Custom Development department, so they could get a developer familiar with dhtmlxScheduler to do the work.


#10

Thank you again for this. This does give us some great ideas to consider and review. We will discuss this more and work with our team to see what we can do to move forward.