Our pure JavaScript Scheduler component


Post by ewu »

I am fetching nested events through a rtk query and loading the events into the store via project.loadInlineData. The parent tasks are being rendered correctly, but none of the child tasks are displayed (despite inspecting the events and seeing children being populated correctly on the parent events, and the parent events start & end date are correctly computed from their child tasks).

It looks like the else block in the eventRenderer is never hit.

I attached a test case:

bryntum-nested-events-test-case.zip
(50.44 KiB) Downloaded 30 times

Post by alex.l »

I've reviewed your app. Possibly the problem is that your children tasks doesn't have id and doesn't have assigned to resources.
You need to add assignments for nested events too, see JSON in https://bryntum.com/examples/scheduler-pro/nested-events/ demo

All the best,
Alex


Post by ewu »

Thank you! That did the trick


Post by elcr »

ewu wrote: Thu Nov 03, 2022 7:15 pm

Thank you! That did the trick

Hi, can you share a working solution o this? I am trying to do the same thing. Thanks!


Post by mats »

@elcr Can you please share your code & data so we can have a look?


Post by elcr »

mats wrote: Thu Mar 30, 2023 2:16 pm

@elcr Can you please share your code & data so we can have a look?

I am lost with this. I am trying to turn one example into nested events. I tried a bunch this is what I have rn. The resources are showing, but not the events. I tried different ways to pass the data to the scheduler component but no luck.
I tried another example i found on the forum about this, using " new SchedulerWithSubtasks" (viewtopic.php?p=79426&hilit=nested+events+not+render#p79426) but the same results, events not showing.
It would be great if we had a demo for this

Attachments
NestedExample.zip
(2.12 MiB) Downloaded 17 times

Post by elcr »

elcr wrote: Thu Mar 30, 2023 2:35 pm
mats wrote: Thu Mar 30, 2023 2:16 pm

@elcr Can you please share your code & data so we can have a look?

I am lost with this. I am trying to turn one example into nested events. I tried a bunch this is what I have rn. The resources are showing, but not the events. I tried different ways to pass the data to the scheduler component but no luck.
I tried another example i found on the forum about this, using " new SchedulerWithSubtasks" (viewtopic.php?p=79426&hilit=nested+events+not+render#p79426) but the same results, events not showing.
It would be great if we had a demo for this

LOL, it actually works like this, but I had the date wrong :p. Now the events show, but I have no styling, any quick guide on what i need to import for the styling so that I don't go looking for hours again?

Attachments
Screenshot 2023-03-30 150804.png
Screenshot 2023-03-30 150804.png (58 KiB) Viewed 266 times

Post by mats »

If you copied the JS from the demo, don't forget to also review the CSS, look at app.scss:

.b-sch-event {
    padding-inline-start : 0;
    background-image     : repeating-linear-gradient(135deg, #eee, #eee 3px, #fff 3px, #fff 6px);
    border-radius        : 5px;

&.b-sch-event-resizing,
&.b-sch-event-selected,
&:hover {
    // Needs !important to not have to have a very specific selector here, to keep demo css simple
    background-image : repeating-linear-gradient(135deg, #e8e8e8, #e8e8e8 3px, #fff 3px, #fff 6px) !important;
}
}

.b-theme-classic-dark {
    .b-sch-event {
        background-image : repeating-linear-gradient(135deg, #777, #777 3px, #444 3px, #444 6px);

    &.b-sch-event-resizing,
    &.b-sch-event-selected,
    &:hover {
        // Needs !important to not have to have a very specific selector here, to keep demo css simple
        background-image : repeating-linear-gradient(135deg, #888, #888 3px, #555 3px, #555 6px) !important;
    }
}
}

.eventWithAgenda .b-sch-event-content {
    background-color : inherit;

.nested {
    position         : absolute;
    background-color : inherit;
    font-size        : .9em;
    display          : flex;
    justify-content  : center;
    align-items      : center;
}
}

.b-sch-horizontal .nested {
    top                  : 0;
    bottom               : 0;
    padding-inline-start : .5em;
}


.b-sch-vertical .nested {
    left        : 0;
    right       : 0;
    padding-top : .5em;
}

.b-resize-handle {
    &:before,
    &:before {
        // to make resizable handles visible over nested elements
        z-index : 10;
    }
}

Post Reply