Needed information to prepare Demo

Hello Support,

We need to develop an Scheduler in an Angular application based on Screenshot

.
and need to show Demo. As of now, I am refering this link to create the Scheduler sample Resources View Demo - dhtmlxScheduler

Once proper demo go well, we can have purchase. So, answer to below questions in-line. Please mention any sample reference or examples of the questions respectly.

  1. Two-level Header : Do we have two-level headers as show in the screeshot. I.e City is the primary category and Person is the sub-category.

  2. Performace Concern : Here user may add very huge appoinments, say around 2L appoinmnets. For this, do we need to consider any smart rendering?

  3. Timer : We need to show timer(red-line shown in the screenshot) as per current time.
    a) Do, we have the option to show that
    b) Also, as current time increases, we need to shade upto line as shown in the screenshot

Regards,
Nanda

Hello @nanda.reddy ,

Regarding the following question:

Two-level Header : Do we have two-level headers as show in the screeshot. I.e City is the primary category and Person is the sub-category.

Unfortunately there is no such functionality by default. Technically it could be implemented through custom solution, or by additional developing by our outsource team.

Regarding the following question:

Performace Concern : Here user may add very huge appoinments, say around 2L appoinmnets. For this, do we need to consider any smart rendering?

This requirement isn’t fully clear to me, could you please clarify, what do the 2L appointments mean?

btw, you can read basic information about scheduler performance by the following link:
https://docs.dhtmlx.com/scheduler/faq.html#schedulerscalabilitylimitationsandthemaximumnumberofevents

Regarding the timer a):

a) Timer : We need to show timer(red-line shown in the screenshot) as per current time.

Yes, you can display the current time marker with the mark_now config:
https://docs.dhtmlx.com/scheduler/api__scheduler_mark_now_config.html

Sample mark_now:
https://docs.dhtmlx.com/scheduler/samples/02_customization/23_current_time.html

Regarding the timer b):

b) Also, as current time increases, we need to shade upto line as shown in the screenshot

Yes, you can highlight/shade/block the time you want, with the “addMarkedTimespan”:
https://docs.dhtmlx.com/scheduler/api__scheduler_addmarkedtimespan.html

Sample addMarkedTimespan:
https://docs.dhtmlx.com/scheduler/samples/09_api/03_highlighted_timespans.html

Kind regards,

Hello Support,
Thanks for reply

Below are some of concerns based on reply

  1. Performance Concern :
    Let me make very clear. We need to show around 10,000 appointments as soon as Scheduler is loaded. Here we are not able to load in Angular 9 application.
    Could you please me any sample for this. Already we have raised the issue in ticket at Schedular not working in Angular 9

  2. Current time Marker
    a) As soon as Scheduler is loaded, we need to show the timer(red-line) exactly to the current system time.
    For this, what ever link (https://docs.dhtmlx.com/scheduler/samples/02_customization/23_current_time.html) you have provided is not working. This is because it always stays at 8:40 am.
    b) Also, as our current local time increases, the red-line whatever we are showing should be keep moving down.
    For this, what ever link https://docs.dhtmlx.com/scheduler/samples/09_api/03_highlighted_timespans.html you have provided is correct. Because, you are shading the particular cells.
    But what we want is that we need to shade upto the red-line. This is because as red-line keeps moving down, we need shade upto red-line.
    So, do you have any option for this.

Regards,
Nanda Kumar

Hello @nanda.reddy,

Maybe my previous answer wasn’t clear enough, as I just displayed the functionality which could be used to implement your requirements, sorry for that.

Basically, it’s not a problem to load 10000, events:
http://snippet.dhtmlx.com/5/1f7a13671
As you can see it takes less than a second.

But rendering this count of events at the same time really depends on config and will take much more time, as even rendering of 1000 events with the same config takes 17 seconds(and something like few minutes in case of 10000 events, which is really slow):
http://snippet.dhtmlx.com/5/7bcef8f7b

I can’t say for sure for the performance without an example of the configuration you want to use, as result will be different for different views, and different view config.

Could you please clarify the use case with the 10000 of events?

Also, I should notify you, that the “Units” view(which allows using of some events attribute as X-axis, and time as Y-axis) has no horizontal scroll, and it’s hard to suggest how to place so many events on it and how to keep them “visual”.

Regarding the following point:

  1. Current time Marker
    a) As soon as Schedular is loaded, we need to show the timer(red-line) exactly to the current system time.
    For this, what ever link (https://docs.dhtmlx.com/scheduler/samples/02_customization/23_current_time.html) you have provided is not working. This is because it always stays at 8:40 am.

The mark_now config marks the current date out of a box(in the provided sample it stays in the date in the past as the sample uses hardcoded value).

In order to display marked on the current date you should provide steps from the documentation:

Add the script file to your page(or add it as “import” in the angular):

<script src="https://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_limit.js"></script>

and set this config to true:

scheduler.config.mark_now = true;

As you can see in the following demo it displays the current date:
http://snippet.dhtmlx.com/5/15a34a624

b) Also, as our current local time increases, the red-line whatever we are showing should be keep moving down.
For this, what ever link https://docs.dhtmlx.com/scheduler/samples/09_api/03_highlighted_timespans.html you have provided is correct. Becaue, you are shading the perticula cells.
But what we want is that we need to shade upto the red-line. This is because as red-line keeps moving down, we need shade upto red-line.
So, do you have any option for this.

This exact functionality requires some additional code, as you should update the “marked timespan” as the time changes, here is a pretty complete demo which displays how to implement it:
http://snippet.dhtmlx.com/5/bf7a079cf

note, the following fragment forbids to drag events to the “marked” time or change events in past:

// Readonly blocks and lightboxes logic
function block_readonly(id) {
if (!id) {
return true;
} else {
if (scheduler.getEventStartDate(id) < getCurrentTime()) {
scheduler.getEvent(id).readonly = true;
return false; // for event box
} else {
scheduler.getEvent(id).readonly = false;
return true;
}
}
}

// Disabling events when block_readonly returns false
scheduler.attachEvent("onBeforeDrag", block_readonly);
scheduler.attachEvent("onClick", block_readonly);

If you don’t need the “blocking changes” logic you can simply remove it from the code.

Kind regards,