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

How to add text to a start label and end label with client-side selection.

Asked by Damien
15 years ago.

We are having a little trouble getting a drag and click selection (ie a free time selection with a start and end time) to prefill two labels (one for start, the other for end). This is to be doneon theclient-side (no postback).

Can thetwo datesthat appear in the dialog box be utilised to fill the labels?

Can you please provide some code on how this works. Thanks and are enjoying it thus far.!

Comment posted by Dan Letecky
15 years ago.
First, define a JavaScript function that will be called after the event is fired. Don't forget that this event will receive three values as parameters: start (Date object), end (Date object), and column (string).

I expect that you need to prefill <input type="text"> elements. If these elements are generated using ASP.NET controls (e.g. TextBox) you need to ensure that you use the right IDs (you get it by using TextBox.ClientID property).

<script type=" type='text/javascript">
function Prefill(start, end, column) {
document.getElementById('startField').value = start.toLocaleString();
document.getElementById('endField').value = end.toLocaleString();
}
</script>
Remember that the start and end parameters are Date JavaScript objects so you can use its methods to extract the necessary information.
This will work if you have HTML similar to the following in your page:

<input type="text" id="startField">
<input type="text" id="endField">
Then set DayPilotCalendar.TimeRangeSelectedJSFunction to "Prefill" and it should work.

I'm working on a documentation where all this client-side stuff will be explained. This example is probably interesting for more people so I will it in the demo - http://www.daypilot.org/demo/.

Let me know if this doesn't work for you.
Comment posted by Damien
15 years ago.

Thanks for the reply Dan.

Finally got it to work. Were having trouble changing the text of labels, butmade them text boxes and it worked fine.Put the following in Page_Load :

Comment posted by Damien
15 years ago.

DayPilotCalendar1.TimeRangeSelectedJSFunction = "function(start, end, column) {document.getElementById('" + DetailsView_AddAppointment.FindControl("TextBox_StartTime").UniqueID + "').value = start.toLocaleString(); document.getElementById('" + DetailsView_AddAppointment.FindControl("TextBox_EndTime").UniqueID + "').value = end.toLocaleString();}"

Hopefully the code appears this time :)

Regards, Damien.

Comment posted by Dan Letecky
15 years ago.
Please note that I have simplified the API in DayPilot Pro 3.5 a little bit so now instead of

DayPilotCalendar1.TimeRangeSelectedJSFunction = "function(start, end, column) {document.getElementById('" + DetailsView_AddAppointment.FindControl("TextBox_StartTime").UniqueID + "').value = start.toLocaleString(); document.getElementById('" + DetailsView_AddAppointment.FindControl("TextBox_EndTime").UniqueID + "').value = end.toLocaleString();}";

you should use:

DayPilotCalendar1.TimeRangeSelectedJavaScript = "document.getElementById('" + DetailsView_AddAppointment.FindControl("TextBox_StartTime").UniqueID + "').value = start.toLocaleString(); document.getElementById('" + DetailsView_AddAppointment.FindControl("TextBox_EndTime").UniqueID + "').value = end.toLocaleString();";

There are two changes:

1. TimeRangeSelectedJSFunction was renamed to TimeRangeSelectedJavaScript.
2. The parameter is now not a JavaScript function but directly a JavaScript code. The same variables are available: start, end, column.
This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.