In this topic you'll add Previous and Next buttons to the page that will work similarly to the arrow navigation button at the top of the schedule control. The buttons will navigate the schedule to the previous or next date.
Complete the following steps:
1. Add two Input (Button) controls to your form. This control can be found on the HTML tab of the Toolbox. If necessary, right-click the Toolbox and select Show All to view all tabs.
2. Select the first Input (Button) and set its Value property to Previous in the Visual Studio Properties window.
3. Set the Value property of the second Input (Button) to Next. Your form will now look like the following image.
4. Double-click the Previous button. A new JavaScript function base is automatically generated and added to the Web form, which is shown in Source view.
5. Add the following script to the base, as in the following example:
function Button1_onclick() {
var schedule = $get("C1Schedule1").control;
schedule.navigateDatesLeft();
}
This code uses the navigateDatesLeft client-side method to navigate the schedule to the previous date when the Previous button is clicked.
6. Return to Design view and double-click the Next button. A new JavaScript function base is automatically generated and added to the Web form, which is shown in Source view.
7. Add the following code to the base, as in the following example:
function Button2_onclick() {
var schedule = $get("C1Schedule1").control;
schedule.navigateDatesRight();
}
This code uses the navigateDatesRight client-side method to navigate the schedule to the next date when the Next button is clicked.
8. Run the project. Notice the current date is the date that appears in the schedule.
9. Click the Previous button. The current date changes to the previous date.
10. Click the Next button. The current date changes to the next date.
|
