search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Expected End Date

Asked by Maheswar
4 years ago.

I would like to have expected end date showing in a dotted line for event only if the event is finishing early(end date).

The fields are
start,
end,
expected

Answer posted by Dan Letecky [DayPilot]
4 years ago.

You can set custom CSS for an event using onBeforeEventRender. See also:

http://doc.daypilot.org/scheduler/event-customization/

CSS
<style>
    .expected .scheduler_default_event_inner {
        border-right: 1px dotted gray;
    }
</style>

onBeforeEventRender: The "expected" end has to be passed as "end" because it determines the event box size. The real (early) end has to be passed as a special parameter, e.g. "realEnd":

    dp.onBeforeEventRender = function(args) {
        if (args.data.end !== args.data.realEnd) {
          args.data.cssClass = "expected";   // use args.e instead of args.data in older versions
        }
    };

If you want to add a marker at the "realEnd" you can use an active area:

    dp.onBeforeEventRender = function(args) {
        if (args.data.end !== args.data.realEnd) {
          args.data.cssClass = "expected";   // use args.e instead of args.data in older versions
          args.data.areas = [ { start: args.data.realEnd, width:1, top:0, bottom:0, backColor: "red" } ];
        }
    };

See also: http://doc.daypilot.org/scheduler/event-active-areas/

Comment posted by Maheswar Reddy
4 years ago.

But the position need to be calculated based on date difference right ?
But i feel it is not good practice(for responsive).

Comment posted by Maheswar Reddy
4 years ago.

To add this how do you calculate it.

Comment posted by Dan Letecky [DayPilot]
4 years ago.

If you use "start" and "end" properties of the area object the horizontal pixel position is calculated automatically during rendering.

See the example above:

// ...
args.data.areas = [ { start: args.data.realEnd, width:1, top:0, bottom:0, backColor: "red" } ];
// ...
Comment posted by Maheswar Reddy
4 years ago.

But i should not drag the red active area and can able to extend yellow color event(other than active area)

Comment posted by Dan Letecky [DayPilot]
4 years ago.

Unless you specify an action for the active area ("action" property) it doesn't do anything special (on clicking or dragging).

You can resize the event using the default margins on the left and on the right.

Comment posted by Maheswar Reddy
4 years ago.

will you please give some example..

Comment posted by Dan Letecky [DayPilot]
4 years ago.

The solution suggested above would allow the users to resize the event using the dotted part, not using the solid part.

So I would recommend using one of the solutions suggested in the follow-up question here:
http://forums.daypilot.org/Topic.aspx/2854/expended-end-date

1. Display the solid and dotted part as separate events.
2. Use event versions to display the expected duration above the event.

#1 would match the required UI exactly but it's more work (you need to split the events to two parts each and handle them differently)
#2 is very easy to implement because it was created exactly for this purpose (show the original/planned state)

You can see an online demo here:
http://javascript.daypilot.org/sandbox/scheduler/eventversions.html

The striped box above the event is the "version". Sample code:

        var e = new DayPilot.Event({
            start: new DayPilot.Date("2015-03-25T00:00:00").addDays(start),
            end: new DayPilot.Date("2015-03-25T12:00:00").addDays(start).addDays(durationDays).addHours(duration),
            id: DayPilot.guid(),
            resource: String.fromCharCode(65+i),
            text: "Event " + (i + 1),
            versions: [
                {
                    start: new DayPilot.Date("2015-03-25T00:00:00").addDays(start),
                    end: new DayPilot.Date("2015-03-25T12:00:00").addDays(start).addDays(durationDays).addHours(duration).addDays(1),
                    barHidden: true
                }
            ]
        });

        dp.events.add(e);

Note the "versions" property.

The appearance of the version box can be customized using CSS.

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.