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
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.
I have a couple questions about the first example you provided. week scale in the Timeline view
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
Live example: http://snippet.dhtmlx.com/5/db378cba1
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:)
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 (DHTMLX Snippets), 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
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
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.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);
};
x_size and x_step properties of the timeline 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
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
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
multisection feature, try creating new records in gray rows to see how multisection events work)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.
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
multisectionfeature, 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!
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.
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.
Hello. One last question as we work to implement this.
I want to make 8AM-5PM a full day so that if someone choose this time period for event in Timeline, it should be visible as full day rather than living space on sides of event on day scale. How can I achieve this. Tooltip does help but the text is readable only on hover while I want to have events spread out to dayline just like a full day!
Meaning, we want it to show as the Correct view in the image below.
Hello @Osensnolf,
You can do it with first_hour and last_hour properties of the timeline view:
https://docs.dhtmlx.com/scheduler/timeline_view.html#timeintervalforviewcells
The code may look like follows:
scheduler.createTimelineView({
...
name: "timeline",
x_unit:"day",
first_hour:08,
last_hour:17,
...
});
Here is the live demo:
http://snippet.dhtmlx.com/5/c07444417
Best regards,
Perfect!! Thank you very much.