Scheduler Event End Identification

Such continuous events are marked with special CSS classes which you can use to add custom styling:

• scheduler_default_event_continueleft

• scheduler_default_event_continueright

You can either use these CSS classes directly to add something using :after/:before pseudoclasses or you can add active areas that will be hidden if the above classes are not present.

We tried it but cannot get it to work.

We also had a look at http://mvc.daypilot.org/demo/Scheduler/CssContinue, it seems to work for the left but not right.

Are there any other examples?

I assume that you are talking about the visible date range that is returned by visibleStart()/visibleEnd() methods, i.e. the whole grid.

In that case, you can try this.

CSS

.scheduler_default_event:not(.scheduler_default_event_continueleft) .continue_left,
.scheduler_default_event:not(.scheduler_default_event_continueright) .continue_right {
    display: none;
}

Config:

onBeforeEventRender: args => {
    args.data.areas = [
        {
            left: 5,
            top: "calc(50% - 10px)",
            width: 20,
            height: 20,
            backColor: "#999999",
            fontColor: "#ffffff",
            borderRadius: "50%",
            symbol: "../icons/daypilot.svg#minichevron-left-2",
            cssClass: "continue_left",
        },
        {
            right: 5,
            top: "calc(50% - 10px)",
            width: 20,
            height: 20,
            backColor: "#999999",
            fontColor: "#ffffff",
            borderRadius: "50%",
            symbol: "../icons/daypilot.svg#minichevron-right-2",
            cssClass: "continue_right",
        }
    ];
}

This adds active areas with arrows to the start and end of each event. They are only visible if the event is marked with scheduler_default_event_continueleft or scheduler_default_event_continueright. The Scheduler uses these CSS classes to mark events that go over the grid edges.

If you mean the viewport (the section of the grid that is visible on screen), these classes do not apply. If you enable the floating events feature (it is enabled by default), the Scheduler will add a special floating div to events that start before the viewport start. This floating div displays the event text so it is always readable. Also, the default CSS theme displays a small arrow at the visible start of such events. The floating events are only implemented for the left edge of the viewport.

Sorry but if you create a custom css for the scheduler, in the generated css there is such thing *continueleft class.

Does that mean we have to use .scheduler_default_event_continueleft or .*_event_continueleft

If you are using a custom CSS theme, you need to replace the asterisk with the theme prefix when defining the rule - e.g. .mytheme_event_continueleft.

This custom rule needs to be added to the CSS theme file manually. By default, there are no styles defined for these CSS classes.

Tried it all. Does not work.

An example would be great so that we can see it in action as this is an important visual indication of the events duration.

Something is happening.

It seems we have to push these as the last areas, if there are other customer areas being defined but the icons are not right.

Also the icons custom icons on the right such as the delete button are also showing in addition to the continue right icon which at the moment is only a grey circle.

The border radius is also not being removed so it looks as if it is the end of the event.

An example addressing all these would be great.

Sorry, we need to amend our custom areas positioning so they do not overlap.

Ignore me for the moment.

Is there anyway we can move the other areas based on whether the continue icons are present?

The standard left icon when the event start is out of the viewport works correctly by moving the areas. We would like the same behavior with the continue icons if possible.

Also when we click on the icon, say the continueright, we would like to make the scheduler endDate to the eents endDate but we cannot do that unless we also change the days property.

Is there a property such as “auto” for the days or someother way we can achieve this?

You may want to take a look at the infinite scrolling feature which would solve all these problems without additional tweaking.

Infinitescroll may not be suitable for our use case.
It would be nice if you could address this issue in the coming releases so as you say, it works without needing to do any tweaks.