Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Customizing WebSchedule’s Caption Header Area

Before You Begin:

The WebSchedule’s™ WebDayView™, WebMonthView™ and WebCalendarView™ have a navigational area in their header area that can be customized and styled. The CaptionsHeaderStyle object is based on the standard Style object found on most of the Ultimate UI for ASP.NET controls.

The following procedure shows you how to change the BackColor on the buttons, as well as the Cursor.

Note
Note:

In this walk-through, you will be modifying the installed Cascading Style Sheet (CSS) and will remove the back color from the WebDayView’s NavigationButtons in all of your projects. You may want to make this style sheet locate to just one project, if this will cause problems with other projects.

Follow these Steps:

  1. Create a new ASP.NET project. Set up the WebSchedule controls on the form. For more information, see Quick Start using the Web Forms Designer, or Setting Up WebSchedule in Code.

  2. With the WebSchedule controls on your form and connected to a Data Provider and WebScheduleInfo, you are now ready to customize the different parts (e.g., NavigationButtonStyle).

  3. Before you can actually customize the control, you will need to modify the CSS for the WebSchedule control you are using due to the Presets the controls take on by default. The style sheets are installed in the installation path as ig_common, which is located in a standard installation at the following location:

C:\Inetpub\wwwroot\aspnet_client\infragistics23.1\Styles.

  1. If you have not chosen any presets, the style sheet you will want is in the Default folder. If you have chosen a different preset other than the default, navigate to that presets folder.

  2. Under the assumption that you have not modified the preset, choose the Default folder. The other assumption is that you are working with the WebDayView, so open the file called ig_webdayview.css. You can open this style sheet inside the Visual Studio .NET IDE to modify it. Notice that if you are working with any of the other views, they have a CSS that you can open in this same location.

  3. With the CSS open, scroll down to where it lists igdv_CaptionHeader. The last two lines where it sets the background-image and background-position are the two properties you will be modifying. Just comment out those to lines by place /* * / around the those two lines. Your style sheet will look similar to the following around that style.

In CSS:

.igdv_CaptionHeader {
        /*background-image: url(images/MonthHeaderCaption_bg.png);
        background-repeat: repeat-x;*/
        font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
        font-size: x-small;
        font-weight: bold;
        color: #FFFFFF;
        height: 25px;
        line-height: 25px;
        padding-top: 0px;
        padding-bottom: 0px;
        text-align: left;
        overflow: hidden;
        border-collapse: collapse;
        border-bottom: 1px solid #002D96;
        border-left: 1px solid #002D96;
        border-right: 1px solid #002D96;
        background-color: #002D96;
}

  1. Note that this modification will affect all the WebDayView’s that are using this particular preset because you are modifying the style sheet from which they all pull. This is necessary because the control reads the style sheet after it reads the properties set in code. Therefore, the style sheet properties will always be taken if they are being modified in both locations.

  2. With that simple modification done, you can now go into the code behind and set the CaptioHeaderStyle object. The following code snippet modifies that BackColor of the caption header and the Cursor that is displayed when you mouse over the header.

In Visual Basic:

Me.WebDayView1.CaptionHeaderStyle.BackColor = Color.Red
Me.WebDayView1.CaptionHeaderStyle.Cursor = Infragistics.WebUI.[Shared].Cursors.Hand

In C#:

this.WebDayView1.CaptionHeaderStyle.BackColor = Color.Red;
this.WebDayView1.CaptionHeaderStyle.Cursor = Infragistics.WebUI.Shared.Cursors.Hand;
WebSchedule Walk Through Customizing the CaptionHeaderStyle 01.png

  1. Styling these buttons as you can see is verily simple. You may also want to style the navigational buttons when modifying the CaptioHeaderStyle. For information on how to modify the NavigationButtonStyle review the Customizing the Navigational Buttons topic.

What You Accomplished:

This walk-through was designed to help you style the caption header area at the top of the WebDayView and WebMonthView.