Our pure JavaScript Scheduler component


Post by Srindt »

I want to set a height programmatically to each of my event based on a condition.

I used eventRenderer and inside which i tried to set my the height of my event.

Even though the height changes, the UI becomes messy as they started to overlap and doesn't
respect their respective boundaries.

Is it possible to set individual heights to each event based on my business logic?


Post by alex.l »

Is it possible to set individual heights to each event based on my business logic?

It is possible using CSS, you're on the right way ( try renderData.cls, renderData.style).
https://bryntum.com/docs/scheduler/#Scheduler/view/mixin/SchedulerEventRendering#config-eventRenderer

Sounds like you didn't increase row height respectively. https://bryntum.com/docs/scheduler/#Grid/data/GridRowModel#field-rowHeight
Check this example https://bryntum.com/examples/scheduler/rowheight/
Here is an example of using custom event template, might be helpful too
https://bryntum.com/examples/scheduler/drag-onto-tasks/

All the best,
Alex


Post by Srindt »

Thanks for the reply alex.

Let me elaborate my code.

1.I show day, week view mode based upon the drop down selection.

2.In Day Mode, I need to show the event bigger with more details.(I have a separate eventTemplate for day mode)

I did

        this.$refs.scheduler.schedulerInstance.rowHeight = 192;

3.In Week Mode, I need to show the event smaller.(I have a separate eventTemplate for week mode)

I did

        this.$refs.scheduler.schedulerInstance.rowHeight = 80;

Now based upon an event attribute, I need to show a separate template which I'm showing.

So far it is working correctly.

But the separate template's height is different from the day,week mode templates.

Apart from the rowHeight, I have set the event height inside eventRenderer.

eventRenderer({ eventRecord, resourceRecord, tplData }) {
        if(event.status == "DISPATCHED"){
            tplData.height = 72; //separate template based upon event attribute
        }else{
            if(isEventSmallInSize()){
                tplData.height = 80;//Week mode template
            }else{
                tplData.height = 192;//Month mode template
            }
        }
 }        

So the actual issue begins:

->In Week mode, there is not much gap between the events having a status of 'DISPATCHED'.(Ref Pic 1)
Though the gaps are irregular, atleast the gaps are not wider.And I'm okay with it as of now!

->In Day mode, there is much gap between the events having a status of 'DISPATCHED'.(Ref Pic 2)
This gap is very big.

I feel it is because of the rowHeight(which is 192 for DAY Mode), that the gap is very big.

->But I can't reduce the rowHeight for Day Mode, as there are other events which are getting shown larger.

Question:
Is there a way that I can reduce the gap between 'DISPATCHED' events in DAY Mode as well without compromising my other events (which are actually larger - Ref Pic 2 - very first event)?

ScreenShots Link: https://drive.google.com/file/d/1BbxBefzWS4ZqjyDlRg4snVwg5nv3WNyC/view?usp=sharing


Post by alex.l »

Nothing I can suggest out of the box, just CSS tuning.
Try to attach your solution here, runnable is appreciated, we will have a look and try to help with it.

All the best,
Alex


Post by Srindt »

Hi Alex,

I have created a sample project with day,week modes along with their respective gif files.

If you notice, there will be more space between the events with DISPATCHED labels and it is not usable as well!

Kindly have a look at the files: https://drive.google.com/file/d/1vBkNVUfPqaWcUCnhWuTQ-xkKDUmAeOec/view?usp=sharing


Post by alex.l »

Ok, I checked your test case and our code base and see, that it was just implemented for 4.3.0 release and available only for SchedulerPro, unfortunately.
It is a hard work to support that, the name of that new config is eventLayout , it will allow to use any position for events in the resource using callback function and other settings, we've also added custom-layout demo to show the power.

Unfortunately, right now, I can only say that it is not supported by the Scheduler and no plans to add this in nearest releases. There are 3 ways to achieve it:

  1. Try to implement it yourself. You'll be needed to look at HorizontalLayoutStack and modify it.
  2. Upgrade to SchedulerPro and get 4.3.0 release, there are many benefits available except that one.
  3. We can write it for you, contact our sales for Professional Services https://www.bryntum.com/services

All the best,
Alex


Post by Srindt »

Thanks for the clarification Alex.

1.So with 4.3.0 release, this spacing issue won't be present right?

2.With this 4.3.0 release, shall we be able to place/group multiple events in a box sort of UI?

3.When shall we be able to expect 4.3.0 release?


Post by alex.l »

  1. This is not issue, we just don't support events with different heights right now. As I said, SchedulerPro will have special config where you will be able to implement it.
  2. I am sorry, I am not sure I got it. Is it related to height issue we are discussing? If not, please open a new thread for this question. Forum rules: viewtopic.php?f=1&t=772
  3. I cannot provide you any dates, but we aimed to do it in a few weeks or so.

All the best,
Alex


Post by Srindt »

Hi Alex, Hope you are good.

We used the scheduler 4.3.3 version and tried to set barMargin.

But still we face the same issue. We can see the events getting overlapped as well.

And the extra space between dispatched events are still there.

This is my updated project: https://drive.google.com/file/d/1Q_z9UjykSs6fg2O4wQytDY1O47XfX6_u/view?usp=sharing

We do have license for the scheduler component.

Kindly let me know, what i'm missing, so that we can overcome the spacing issue.


Post by alex.l »

Hi Srindt,

This is not supported in the Scheduler, only in the SchedulerPro. We have a demo here: https://bryntum.com/examples/scheduler-pro/custom-layouts/
But not supported in the Scheduler.

All the best,
Alex


Post Reply