Lesson 16 - Working with the Calendar Server Control

Tutorial Series: Free C# Fundamentals via ASP.NET Web Apps

Previous Article  |  Next Article


Get GitHub Code

This lesson will show you how to use the Calendar Server Control which will make use of the DateTime and TimeSpan types you’ve learned about. This Control is useful for providing a visual component that represents a date, in a web page, in a way that users are familiar with.

Step 1: Create a New Project

Either open the CS-ASP_016 Project file from the provided folder for this lesson, or follow the instructions below to set it up manually:

Create a new project called “CS-ASP_016” and set up a Default.aspx with the following Server Controls, and programmatic IDs:

  1. getDateButton

  2. setDateButton

  3. showDateButton

  4. selectedWeekButton

  5. resultLabel

cs-asp-016---working-with-the-calendar-server-control.001

Step 2: Add a Calendar Server Control

Now, let’s place a Calendar Server Control in between the text and buttons:

cs-asp-016---working-with-the-calendar-server-control.002

Select the Calendar, take a look at its Properties Window and set the ID to “myCalendar”:

cs-asp-016---working-with-the-calendar-server-control.003

Step 3: Formatting the Calendar Properties

While in the Properties Window, take note of the various built-in styles available:

cs-asp-016---working-with-the-calendar-server-control.004

Each of these styles will expand by clicking on the plus symbol, and more options are available within.

Also take note of some useful settings in the “Appearance” section:

  1. Day formatting (single letter, three letters, full words, and so on).

  2. HTML symbol for next Month (greater than, or “>”).

  3. HTML symbol for the previous month (less than, or “<”).

cs-asp-016---working-with-the-calendar-server-control.005

Step 4: Styling the Calendar with Presets

You can access a selection of pre-formatted styles to choose from by clicking on the arrow to the right of the Calendar Control:

cs-asp-016---working-with-the-calendar-server-control.006

cs-asp-016---working-with-the-calendar-server-control.007

Step 5: Referencing the Calendar via Code

Now let’s turn to the Default.aspx.cs file and write in the following code for the getDateButton_Click event:

cs-asp-016---working-with-the-calendar-server-control.008

Remembering back to the lesson on DateTime, this uses the ToShortDateString() helper method for the DateTime value. This displays the value in the Month/Day/Year format (depending on your computer's localization) in a string format, allowing us to print it to the resultLabel.

Now run the application, select a date, and the “Get Date” button to display the current date formatted as a string type.

cs-asp-016---working-with-the-calendar-server-control.009

Now, let’s have the “Set Date” button change the date of the Calendar when clicked. The selected date is shown by the highlighted box on the calendar control.:

cs-asp-016---working-with-the-calendar-server-control.010

cs-asp-016---working-with-the-calendar-server-control.011

Since the VisibleDate property can be set to any DateTime, let’s demonstrate this by writing the following in showDateButton_Click:

cs-asp-016---working-with-the-calendar-server-control.012

cs-asp-016---working-with-the-calendar-server-control.013

This changes the calendar's selection to the date input, then shows the user that date, regardless of the month or year.

Step 6: Add the Option to Select an Entire Week

Go back to the Properties Window for the Calendar and adjust the SelectionMode property from the default (Day) to “DayWeek,” and notice how it adds a selection arrow for each week in the month.

cs-asp-016---working-with-the-calendar-server-control.014

cs-asp-016---working-with-the-calendar-server-control.015

Next, enter the following code that displays the currently selected date when you click on the “Selected Week” button:

cs-asp-016---working-with-the-calendar-server-control.016

When you run the application you will have to:

  1. Select a week on the Calendar.

  2. Click on the “Selected Week” button.

cs-asp-016---working-with-the-calendar-server-control.017

Step 7: Utilizing the SelectionChanged Event

One more thing worth noting is the event – visible in the Calendar’s Properties Windows – that fires whenever any selection is changed on the Calendar:

cs-asp-016---working-with-the-calendar-server-control.018

Click on the lightning bold in the Properties window, then double-click the SelectionChanged option to create and EventHandler for that.

Probably the simplest way to demonstrate what this event does is to write the following in the method attached to this event in Default.aspx.cs:

cs-asp-016---working-with-the-calendar-server-control.019

Now, when you run the application and click on individual dates, you will notice that the selected date is automatically displayed in the Label Control. Unlike the previous events that have been firing upon a button click, this event fires with the mere act of clicking on any given date on the Calendar:

cs-asp-016---working-with-the-calendar-server-control.020

Using the Calendar control, in conjunction with the DateTime and TimeSpan properties we've discussed, can be very useful. In fact, we'll put them to use in the very next Challenge. Be sure to brush up on the last few lessons, and then proceed onto that challenge. Good luck!


Related Articles in this Tutorial:

Lesson 1 - Series Introduction

Lesson 2 - Installing Visual Studio 2015

Lesson 3 - Building Your First Web App

Lesson 4 - Understanding What You Just Did

Lesson 5 - Working with Projects in Visual Studio

Lesson 6 - Simple Web Page Formatting in Visual Studio

Challenge 1

Solution 1

Lesson 7 - Variables and Data Types

Lesson 8 - Data Type Conversion

Lesson 9 - Arithmetic Operators

Lesson 10 - C# Syntax Basics

Challenge 2 - ChallengeSimpleCalculator

Solution - ChallengeSimpleCalculator

Lesson 11 - Conditional If Statements

Lesson 12 - The Conditional Ternary Operator

Challenge 3 - ChallengeConditionalRadioButton

Solution - Challenge Conditional RadioButton

Lesson 13 - Comparison and Logical Operators

Lesson 13 Challenge - First Papa Bob's Website

Solution - Challenge First Papa Bob's Website

Lesson 14 - Working with Dates and Times

Lesson 15 - Working With Spans of Time

Lesson 16 - Working with the Calendar Server Control

Challenge 4 - Challenge Days Between Dates

Solution - Challenge Days Between Dates

Lesson 17 - Page_Load and Page.IsPostBack

Lesson 18 - Setting a Break Point and Debugging

Lesson 19 - Formatting Strings

Challenge 5 - Challenge Epic Spies Assignment

Solution - Challenge Epic Spies Assignment

Lesson 20 - Maintaining State with ViewState

Lesson 21 - Storing Values in Arrays

Lesson 22 - Understanding Multidimensional Arrays

Lesson 23 - Changing the Length of an Array

Challenge 6 - Challenge Epic Spies Asset Tracker

Solution - Challenge Epic Spies Asset Tracker

Lesson 24 - Understanding Variable Scope

Lesson 25 - Code Blocks and Nested If Statements

Lesson 26 - Looping with the For Iteration Statement

Challenge 7 - Challenge For Xmen Battle Count

Solution - Challenge For Xmen Battle Count

Lesson 27 - Looping with the while() & do...while() Iteration Statements

Lesson 28 - Creating and Calling Simple Helper Methods

Lesson 29 - Creating Methods with Input Parameters

Lesson 30 - Returning Values from Methods

Lesson 31 - Creating Overloaded Methods

Lesson 32 - Creating Optional Parameters

Lesson 33 - Creating Names Parameters

Lesson 34 - Creating Methods with Output Parameters

Challenge 8 - Challenge Postal Calculator Helper Methods

Solution - Challenge Postal Calculator Helper Methods

Mega Challenge Casino

Solution - Mega Challenge Casino

Lesson 35 - Manipulating Strings

Challenge 9 - Phun With Strings

Solution - Challenge Phun With Strings

Lesson 36 - Introduction to Classes and Objects

Challenge - Hero Monster Classes Part 1

Solution - Hero Monster Classes Part 1

Challenge - Hero Monster Classes Part 2

Solution - Challenge Hero Monster Classes Part 2

Lesson 37 - Creating Class Files Creating Cohesive Classes and Code Navigation

Lesson 38 - Understanding Object References and Object Lifetime

Lesson 39 - Understanding the .NET Framework and Compilation

Lesson 40 - Namespaces and Using Directives

Lesson 41 - Creating Class Libraries and Adding References to Assemblies

Lesson 42 - Accessibility Modifiers, Fields and Properties

Lesson 43 - Creating Constructor Methods

Lesson 44 - Naming Conventions for Identifiers

Lesson 45 - Static vs Instance Members

Challenge 10 - Challenge Simple Darts

Solution - Challenge Simple Darts

Lesson 46 - Working with the List Collection

Lesson 47 - Object Initializers

Lesson 48 - Collection Initializers

Lesson 49 - Working with the Dictionary Collection

Lesson 50 - Looping with the foreach Iteration Statement

Lesson 51 - Implicitly-Typed Variables with the var Keyword

Challenge 11 - Challenge Student Courses

Solution - Challenge Student Courses

Mega Challenge War

Solution - Mega Challenge War

Lesson 52 - Creating GUIDs

Lesson 53 - Working with Enumerations

Lesson 54 - Understanding the switch() Statement

Lesson 55 - First Pass at the Separation of Concerns Principle

Lesson 56 - Understanding Exception Handling

Lesson 57 - Understanding Global Exception Handling

Lesson 58 - Understanding Custom Exceptions

Lesson 59 - Creating a Database in Visual Studio

Lesson 60 - Creating an Entity Data Model

Lesson 61 - Displaying the DbSet Result in an ASP.NET GridView

Lesson 62 - Implementing a Button Command in a GridView

Lesson 63 - Using a Tools-Centric Approach to Building a Database Application

Lesson 64 - Using a Maintenance-Driven Approach to Building a Database Application

Lesson 65 - Creating a New Instance of an Entity and Persisting it to the Database

Lesson 66 - Package Management with NuGet

Lesson 67 - NuGet No-Commit Workflow

Lesson 68 - Introduction the Twitter Bootstrap CSS Framework

Lesson 69 - Mapping Enum Types to Entity Properties in the Framework Designer

Lesson 70 - Deploying the App to Microsoft Azure Web Services Web Apps

Papa Bob's Mega Challenge

Papa Bob's Mega Solution Part 1 - Setting up the Solution

Papa Bob's Mega Solution Part 2 - Adding an Order to the Database

Papa Bob's Mega Solution Part 3 - Passing an Order from the Presentation Layer

Papa Bob's Mega Solution Part 4 - Creating the Order Form

Papa Bob's Mega Solution Part 5 - Adding Enums

Papa Bob's Mega Solution Part 6 - Creating an Order with Validation

Papa Bob's Mega Solution Part 7 - Calculating the Order Price

Papa Bob's Mega Solution Part 8 - Displaying the Price to the User

Papa Bob's Mega Solution Part 9 - Creating the Order Management Page


Comments

Please login or register to add a comment