Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to configure dynamic JavaScript Calendar Controls in an ASP.Net Page

In this article we will see how to configure the controls of a calendar with JavaScript.

Setting up the Calendar

There are several properties that are used to change settings:

  • MONTHS - The setting that determines which length of month labels should be used. Possible values are "short" and "long".
  • WEEKDAYS - The setting that determines which length of weekday labels should be used. Possible values are "1char", "short", "medium", and "long".
  • MONTHS_SHORT - The short month labels for the current locale. Default: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  • MONTHS_LONG - The long month labels for the current locale. Default: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
  • WEEKDAYS_1CHAR - The 1-character weekday labels for the current locale. Default: ["S", "M", "T", "W", "T", "F", "S"]
  • WEEKDAYS_SHORT - The short weekday labels for the current locale. Default: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
  • WEEKDAYS_MEDIUM - The medium weekday labels for the current locale. Default: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
  • WEEKDAYS_LONG - The long weekday labels for the current locale. Default: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

The Calendar also provides special configuration properties for determining how date strings and date range strings should be formatted.

These control how strings are parsed when used as input to the Calendar. By default, the date format for input to the Calendar is mm/dd/yyyy. Ranges are separated by a dash ("-") and lists of dates are delimited using a comma (","). Using these properties, the initial formatting of date can be easily modified:

  • DATE_DELIMITER - The value used to delimit individual dates in a date string passed to various Calendar functions. Default: ","
  • DATE_FIELD_DELIMITER - The value used to delimit date fields in a date string passed to various Calendar functions. Default: "/"
  • DATE_RANGE_DELIMITER - The value used to delimit date ranges in a date string passed to various Calendar functions. Default: "-"
  • MDY_MONTH_POSITION - The position of the month in a month/day/year date string. Default: 1
  • MDY_DAY_POSITION - The position of the day in a month/day/year date string. Default: 2
  • MDY_YEAR_POSITION - The position of the year in a month/day/year date string. Default: 3
  • MD_MONTH_POSITION - The position of the month in a month/day date string. Default: 1
  • MD_DAY_POSITION - The position of the day in a month/day date string. Default: 2
  • MY_MONTH_POSITION - The position of the month in a month/year date string. Default: 1
  • MY_YEAR_POSITION - The position of the year in a month/year date string. Default: 2 The following properties are used to format how the month, year label is rendered in the Calendar header:
  • MY_LABEL_MONTH_POSITION - The position of the month in the "month year" date label used in the Calendar header. Default: 1
  • MY_LABEL_YEAR_POSITION - The position of the year in the "month year" date label used in the Calendar header. Default: 2
  • MY_LABEL_MONTH_SUFFIX - The suffix to be added to the month, when rendering the "month year" label in the Calendar header. Default: " "
  • MY_LABEL_YEAR_SUFFIX - The suffix to be added to the year, when rendering the "month year" label in the Calendar header. Default: ""

Using the Code

The code will show a few different ways to use the calendar. The screen shot shows how each one is displayed.

First way to display the calendar

Figure 1: First way to display the calendar

The first calendar is a standard one with no changes whatsoever. The control just passes the selected date to the text box. The code is outlined below:

Listing 1: Calendar code

 <b>Normal Control:</b>
<asp:TextBox runat="server" ID="txtDate1" />
<toolkit:calendarextender runat="server" ID="calExtender1"
 TargetControlID="txtDate1"/>

This will display a calendar which looks like this. When you put the cursor in the textbox, the calendar will be displayed.

Second way to display the calendar

Figure 2: Second way to display the calendar

The second calendar has a button, uses a style sheet, and has unique formatting. We are now starting to add additional commands to the control.

Listing 2: Adding additional commands to the control

<b> Control with PopupButtonID, CssClass,Format:</b>
<asp:TextBox runat="server" ID="txtDate2"  Text="11/01/2006" />
<asp:Image runat="server" ID="btnDate2"
            AlternateText="cal2"
            ImageUrl="~/images/calendaricon.jpg" />
<JavaScripttoolkit:calendarextender runat="server" ID="calExtender2"
            PopupButtonID="btnDate2"
            CssClass="JavaScriptCalendar"
        TargetControlID="txtDate2" Format="MMMM d, yy" />

Now, you have a calendar with different colors, and once you select the date, the date in the text box will be in a different format than what was there originally.

The third control just has the calendar displayed in a different position.

Listing 3: Control to display calendar in a different position

<b>Control with topright:</b>
<asp:TextBox ID="txtDate3" runat="server" Width="70"> </asp:TextBox>
<JavaScripttoolkit:calendarextender ID="calExtender3" runat="server"
    PopupButtonID="btnDate3" PopupPosition="TopRight"
    TargetControlID="txtDate3" >
</JavaScripttoolkit:calendarextender>
<asp:ImageButton ID="btnDate3" ImageUrl="~/images/CalendarIcon.jpg"
    Width="20px" runat="server" />

Notice the properties are very similar to what we have been using. The only thing different that is new is thePopupPosition.

The fourth control makes sure we do not enter a date that is before today. To do this, you need to have HTML to have the textbox and the ASP control but also JavaScript to check the date to see if it is valid. Once you add theOnClientDateSelectionChanged property and the date is selected, the JavaScript checkDate is executed. If the date that the user selected is before today, an error is displayed and today's date is entered into the textbox.

Listing 4: Control with no date earlier than today

<b>Control with no date earlier than today:</b>
<asp:TextBox ID="txtDate4" runat="server" Width="70"></asp:TextBox>
<JavaScripttoolkit:calendarextender ID="calExtender4" runat="server"
    PopupButtonID="btnDate4" PopupPosition="TopRight"
    TargetControlID="txtDate4" OnClientDateSelectionChanged="CheckDateEalier">
</JavaScripttoolkit:calendarextender>
<asp:ImageButton ID="btnDate4" ImageUrl="~/images/CalendarIcon.jpg"
    Width="20px" runat="server"  />

Listing 5: The JavaScript

<title>JavaScript Calendar Control</title>
<script type="text/javascript">
function CheckDateEalier(sender,args) {
    if (sender._selectedDate < new Date()) {
         alert("You cannot select a day before today!");
         sender._selectedDate = new Date();
         // set the date back to the today
         sender._textbox.set_Value(sender._selectedDate.format(sender._format))
    }
}
</script>

When you select the date that is before today's date, all you get is a messagebox with an error.

This all started we wanted to display a calendar control and have today's date outlined in the control if nothing was already entered in the textbox.

Listing 6: Control with today’s date

<b>Control with today’s date :</b>
<asp:TextBox ID="txtDate5" runat="server" Width="70"></asp:TextBox>
<JavaScripttoolkit:calendarextender ID="calExtender5" runat="server"
    PopupButtonID="btnDate5" PopupPosition="Right" OnClientShowing="DisplayDateToday"
    TargetControlID="txtDate5" >
</JavaScripttoolkit:calendarextender>
<asp:ImageButton ID="btnDate5" ImageUrl="~/images/CalendarIcon.jpg"
    Width="20px" runat="server"  />

Listing 7: The JavaScript

<title>JavaScript Calendar Control</title>
<script type="text/javascript">
function DisplayDateToday(sender, args) {
    if (sender._selectedDate == null) {
        sender._selectedDate = new Date();
    }
}
</script>

Style Sheet

We used this style sheet for calendar 2.

Listing 8: Illustrates the Style Sheet

JavaScriptCalendar .JavaScript__calendar_container
{
	border:1px solid #646464;
    background-color: yellow;
    color: red;
}
.JavaScriptCalendar .JavaScript__calendar_other .JavaScript__calendar_day,
.JavaScriptCalendar .JavaScript__calendar_other .JavaScript__calendar_year
{
	color: Black;
}
.JavaScriptCalendar .JavaScript__calendar_hover .JavaScript__calendar_day,
.JavaScriptCalendar .JavaScript__calendar_hover .JavaScript__calendar_month,
.JavaScriptCalendar .JavaScript__calendar_hover .JavaScript__calendar_year
{
	color:  White;
}
.JavaScriptCalendar .JavaScript__calendar_active .JavaScript__calendar_day,
.JavaScriptCalendar .JavaScript__calendar_active .JavaScript__calendar_month,
.JavaScriptCalendar .JavaScript__calendar_active .JavaScript__calendar_year
{
	color: Purple;
	font-weight:bold;
}

Calendar Properties

Here are a few of the properties you will encounter in the property page of the control along with a brief description of what they do:

  • TargetControlID - The ID of the TextBox for the calendar
  • CssClass - Name of the CSS class used to style the calendar
  • Format - The string that holds the Format to display
  • PopupButtonID - The ID of a control to show the calendar popup when clicked. If the value is not set, the calendar will pop up when the textbox receives focus.
  • PopupPosition - Indicates where the calendar popup should appear
    • BottomLeft (default)
    • BottomRight
    • TopLeft
    • TopRight
    • Left
    • Right
  • SelectedDate - Indicates the date the Calendar will be initialized to
  • FirstDayOfWeek - What day to use as the first day of the week
    • Sunday
    • Monday
    • Tuesday
    • Wednesday
    • Thursday
    • Friday
    • Saturday
    • Default

Conclusion

Try the code out and see how you can implement the above tutorial for the web pages you are working on.



Software developer with more than 5 years of development on Java, HTML, CSS.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login