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

ASP.Net MVC3 -- How to update "StartDate" field from jQuery DatePicker control?

Asked by Steve M.
5 years ago.

How would I update the "StartDate" value of the DayPilot Lite Calendar object? I'm trying to do so from Javascript using the value of a jQuery Datepicker object. Below are snippets of my implementation:

~~~~~~~~~~~~~
Controller:
~~~~~~~~~~~~~
public ActionResult Backend(int productId, int archiveId)
{
return new Dpc(productId, archiveId, target).CallBack(this);
}

class Dpc : DayPilotCalendar
{
public Dpc(int productId, int archiveId)
{
this.ProductId = productId;
this.ArchiveId = archiveId;
}

protected override void OnInit(InitArgs e)
{
// ...
// data fetching, which loads "List<T>" object, and passes the ".ToArray()" output into DayPilotCalendar's "Events" property
// ...

DataIdField = "ScheduleId";
DataTextField = "Summary";
DataStartField = "Start";
DataEndField = "End";

Update();
}

private int ArchiveId { get; set; }
private int ProductId { get; set; }
}

~~~~~~~~~~~~~
// end of snippet
~~~~~~~~~~~~~

~~~~~~~~~~~~~
View:
~~~~~~~~~~~~~
// ...

<p>Pick a date:
<br/>@Html.TextBox("txtDate", Model.LastScheduleStartDay.ToString("MM/dd/yyyy"), new { @class = "date", @maxlength = "10", @style = "width:100px;" })
<br/>@Html.TextBox("alternate", Model.LastScheduleStartDay.ToString("MM/dd/yyyy"), new { @class = "meh", @maxlength = "10", @style = "width:100px; visibility:hidden;" })</p>
<script type="text/javascript">
$(document).ready(function () {
$('.date').datepicker({
dateFormat: "mm/dd/yy",
altField: "#alternate",
altFormat: "DD, d MM, yy"
});

$('#txtDate').change(function () {
var newDateTime = new Date(Date.parse($("#alternate").val()));
dpc.startDate = newDateTime;
dpc.callBack2('Init');
});
});

</script>

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
ViewType = ViewType.Day,
WeekStarts = WeekStarts.Sunday,
BackendUrl = @resultUrl,
StartDate = @Model.LastScheduleStartDay,
CellHeight = 30,
HourWidth = 50,
Width = "98%",
ShowToolTip = true
})

~~~~~~~~~~~~~
// end of snippet
~~~~~~~~~~~~~

Any guidance is appreciated!

  • Steve M.
Answer posted by Dan Letecky [DayPilot]
5 years ago.

You should replace

dpc.startDate = newDateTime; 
dpc.callBack2('Init'); 

with this:

dpc.commandCallBack("goto", { "start": start });

In the server-side OnCommand handler, detect e.Command == "goto", set StartDate from (DateTime) e.Data["start"] and call Update(Full);

The start variable should be either a string in ISO format or a DayPilot.Date object.

You can create a DayPilot.Date object from Date:

var start = new DayPilot.Date(newDateTime, true);

See also:

http://api.daypilot.org/daypilot-date-constructor/

Comment posted by Steve M.
5 years ago.

I thought the "commandCallBack" was only supported in the "Pro" version -- I'm using the "Lite" version.

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

It's fully supported on the server side, only the client-side method is missing. It will be added in the next release.

It is as simple as this:

        this.commandCallBack = function(command, data) {
            var params = {};
            params.command = command;
            this.callBack2('Command', data, params);
        }; 

So you can either add it yourself or replace this:

dpc.commandCallBack("goto", { "start": start });

with this:

dpc.callBack2("Command", { "start": start }, { "command": "goto"});

Comment posted by Steve M.
5 years ago.

Ah, I see now. That worked perfectly; my day calendar is now updating the date and reflecting the appropriate events.

BTW, what is the CallbackUpdateType value used of the non-overloaded "Update()" call?

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

It's EventsOnly. In the near future, the update mode will be detected automatically when you call Update() without parameters just like in the WebForms version.

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