Expected End Date

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

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

<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/

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

To add this how do you calculate it.

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" } ];
// ...

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

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.

will you please give some example..

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.