Can't create event using javascript

I have tried to create event using javascript. I have created like this :

@Html.DayPilotMenu("menu", new DayPilotMenuConfig
{
CssClassPrefix = "menu_default",
Items = new DayPilot.Web.Mvc.MenuItemCollection
{
new DayPilot.Web.Mvc.MenuItem {Text="Delete", Action=MenuItemAction.CallBack, Command="Delete"}
}
})

@Html.DayPilotBubble("bubble", new DayPilotBubbleConfig
{
LoadingText="Loading...",
CssClassPrefix="bubble_default"
})

@Html.DayPilotScheduler("dps_areas", new DayPilot.Web.Mvc.DayPilotSchedulerConfig
{
BackendUrl = Url.Action("Backend", "Build", new { area = "Plan", planId = @ViewBag.PlanId }),
Height = 300,
HeightSpec = HeightSpec.Max,
TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
TimeRangeSelectedJavaScript = "timeRangeSelected(start, end, resource)",
EventMoveHandling = EventMoveHandlingType.CallBack,
EventResizeHandling = EventResizeHandlingType.CallBack,
AfterRenderJavaScript="afterRender(data, isCallBack)",
Days = 365,
CellDuration = 1440,
CellGroupBy = GroupBy.Month,
EventClickHandling = EventClickHandlingType.JavaScript,
EventClickJavaScript = "editEvent(e.value());",
ContextMenu = "menu",
EventBubble = "bubble",
Resources = new ResourceCollection {new Resource{Name = "Spots", Id = "A", Expanded = false}},
Separators = new SeparatorCollection {new Separator(DateTime.Now, Color.Red)}
})

My js function is like this :

function timeRangeSelected(start, end, resource, data) {
var dps = new DayPilot.Scheduler("dps_areas");
dps.clearSelection();
var e = new DayPilot.Event({
start: args.start,
end: args.end,
id: DayPilot.guid(),
resource: args.resource,
text: "Spot"
});
dps.events.add(e);
toastr.success("Spot has been created!");
}

But when I try to create event, it prompts this issue

TypeError: this.divRange is undefined

Screenshot :

http://forums.daypilot.org/attachment/rg4nxselbrdgzojgdoc4t26kvy/day-pilot-event-create-error.png