Make a Customized Calendar With Dates Selected as Start of Week

Introduction

For this Tech Tip we will create a simple ASP.Net Web Application and show a calendar with the week selected in the calendar that is possible on the server side also.

Let’s go through the procedure one by one.

Step 1

Create an ASP.Net Web Application project.



Step 2

You should have downloaded the following DLL also.

Telerik.Web.UI.dll

Step 3

The new project has been created.



Step 4

Now add the DLL that was download to the references of the project. Right-click references and add the DLL reference to it.



Step 5

Create a new user control, for example calendar.ascx.



Step 6

Register the user control to the your aspx page, for example default.aspx.



Step 7

On default.aspx.cs file add the logic where you can capture the event on the selection of a date.

Use the following procedure.

Register an event on select date from the user control to the aspx.page.

Step 8

Add the logic on the selection of the date to bind the data to your controls as per the requirements.



Step 9

Under the User Control calendar.ascx, design the page by placing a rad combo box and Telerik calendar with your default selection of the style for the calendar.

Initialize the event as we did in Step 8 for the User Control.

Step 1

Load the Date in Page load.

Step 2

Write the event logic for the SelectedDate Change event on the calendar that will get the selected period of date.

Step 3

On the select of the date bubble back the event to the parent page for loading the control depending on the date selection periods.

Step 4

Write the logic on the Getperiod method. In other words the start date of the week is Monday.

Add an end date of 6 days from the start date so that on the select of a date the calendar will show the start and end of the week highligted for the selected date.

Step 5

On the Day render event you can write logic to disable future days so that the user cannot select a future date beyond requirements.

Step 6

Add the days disabled logic back to the calendar.

Step 7

After a period is set, bubble back the event so that the parent page is loaded with the current date's start day of week.

Step 8

Use the property to access the start and end date when the user has selected the day from the calendar.

Step 9

Run the application and then you will see the following output. By default it will load the current date start day of week.



Step 10

Click the combo box, the calendar will be displayed with the week range selected.

And on the select of a date within the week, the period will be set to the start day of the week (Monday as the start day) and the end day of the week (Sunday).