logo
border border
              
border border
border border
  Post Subject :: #9. [AjaxControlToolkit] Calendar 컨트롤     [ASP.NET AJAX]
border border
border border
     
이번 포스트에서는 Calendar 컨트롤에 대해서 알아보도록 하겠습니다. 이 포스트는 ajax.asp.net(http://ajax.asp.net/ajaxtoolkit/Calendar/Calendar.aspx)를 참고하여 만들었습니다.

CalendarExtender 컨트롤의 활용성은 많이 있을 것입니다. 특히, 우리가 많이 보아왔던 생년월일을 선택한다거나, 어떠한 특정 날짜를 지정하고자 할 때, 굳이 텍스트박스에 우리가 키보드를 통하여 특정 날짜를 선택하기 보다는 달력을 통해 어떠한 날짜를 선택할 때 Calendar 컨트롤은 상당히 유용하게 쓰일 수 있습니다. 기존에 만약 어떠한 행동을 했을 경우(예를 들어, 달력 이미지나 텍스트박스를 클릭했을 때) 달력을 보여주는 것은 ASP를 이용하거나, HTML을 이용해서 사용했습니다만, ASP.NET AJAX의 CalendarExtender 컨트롤은 이러한 기능을 상당히 손쉽게 제공하고 있습니다.

그러면, 우선 CalendarExtender 컨트롤의 속성부터 알아보도록 하겠습니다.

<ajaxToolkit:Calendar runat="server"
TargetControlID="Date1"
CssClass="ClassName"
Format="MMMM d, yyyy"
PopupButtonID="Image1" />


이탤릭체로 표시된 부분은 옵션으로 사용할 수 있습니다.

먼저, 속성에 대해서 알아보도록 하겠습니다.

1. TargetControlID : CalendarExtender 컨트롤을 확장할 수 있는 텍스트박스의 ID입니다.

2. CssClass : CalendarExtender 컨트롤에 사용될 Css Class의 이름을 정의합니다. 자세한 사항은 http://community.bennettadelson.com/blogs/rbuckton/archive/2007/02/02/Skinning-model-for-Calendar-and-Tabs-in-Ajax-Control-Toolkit.aspx에 정의되어 있습니다.

3. Format : CalendarExtender 컨트롤에서 선택된 날짜를 표시하는 방법을 나타냅니다. 이 또한, http://msdn2.microsoft.com/en-us/library/bb79761a-ca08-44ee-b142-b06b3e2fc22b.aspx에 정의되어 있습니다.

4. PopupButtonID : 클릭했을 경우 CalendarExtender 컨트롤을 보여줄 컨트롤의 ID입니다. 이 값이 설정되지 않으면, TextBox에 포커스가 올 때 CalendarExtender 컨트롤이 팝업되게 됩니다.

그럼, CalendarExtender 컨트롤에 대한 속성을 알아보았으니, 실제적으로 코드를 작성하여 보도록 하겠습니다.

새로운 웹 사이트를 하나 생성한 후 새로 웹 폼을 하나 추가하고, 웹 폼의 이름을 Calendar.aspx로 합니다. Calendar.aspx의 소스는 다음과 같습니다.

    1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Calendar.aspx.cs" Inherits="Calendar" %>

    2 

    3 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

    4 

    5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    6 <html xmlns="http://www.w3.org/1999/xhtml">

    7 <head runat="server">

    8     <title>제목 없음</title>

    9 </head>

   10 <body>

   11     <form id="form1" runat="server">

   12         <asp:ScriptManager ID="ScriptManager1" runat="server">

   13         </asp:ScriptManager>

   14         <table border="0" cellpadding="0" cellspacing="0" style="background-color:#959695;" width="400px">

   15             <tr style="height: 30px" valign="middle">

   16                 <td style="width: 100%; font-size: 11pt; color: White;" align="center" colspan="3">

   17                     Calendar Control

   18                 </td>

   19             </tr>

   20             <tr style="height: 30px" valign="middle">

   21                 <td style="width: 1%">

   22                 </td>

   23                 <td style="width: 98%; background-color: White; font-size: 9pt;" align="center">

   24 

   25                 </td>

   26                 <td style="width: 1%">

   27                 </td>

   28             </tr>

   29             <tr style="height: 2px" valign="middle">

   30                 <td style="width: 100%;" align="center" colspan="3">

   31                 </td>

   32             </tr>

   33         </table>

   34     </form>

   35 </body>

   36 </html>



24번째 라인에 텍스트 박스를 도구상자에서 드래그 앤 드랍으로 위치시킵니다. 그리고, AJAX Control ToolKit에 있는 CalendarExtender 컨트롤을 마찬가지로 드래그 앤 드랍으로 웹 폼에 위치시킵니다. 그 후 CalendarExtender 컨트롤의 속성 중 TargetControlID의 값을 "TextBox1"으로 설정합니다. 수정된 소스는 다음과 같습니다.

   24                     <asp:TextBox ID="TextBox1" runat="server" Width="300px"></asp:TextBox>

   25                     <cc1:CalendarExtender

   26                         ID="CalendarExtender1" runat="server">

   27                     </cc1:CalendarExtender>



이제, 브라우저에서 위의 코드를 실행한 후 화면의 텍스트 박스를 클릭하면 CalendarExtender 컨트롤이 표시되며, 달력 컨트롤의 날짜를 선택하면, 텍스트 박스에 선택한 일자가 자동적으로 입력되게 됩니다.


그림1. 텍스트박스에 CalendarExtender 컨트롤에서 선택된 값이 들어가게 되는 화면

그러면, 그림 1에서 본 CalendarExtender 컨트롤에 스타일을 주도록 하겠습니다. 아래와 같은 style 코드를 title 태그 밑인 9번째 라인에 삽입합니다. 그리고, CalendarExtender 컨트롤의 CssClass 속성의 값을 "MyCalendar"로 설정합니다.

    <style type="text/css">

        TD {

            font-family : 맑은 고딕;

            font-size : 9pt;

        }

 

        .MyCalendar .ajax__calendar_container {

            border:1px solid #000000;

            background-color: #EEEEEE;

            color: #000000;

        }

 

        .MyCalendar .ajax__calendar_other .ajax__calendar_day,

        .MyCalendar .ajax__calendar_other .ajax__calendar_year {

            color: blue;

        }

 

        .MyCalendar .ajax__calendar_hover .ajax__calendar_day,

        .MyCalendar .ajax__calendar_hover .ajax__calendar_month,

        .MyCalendar .ajax__calendar_hover .ajax__calendar_year {

            color: black;

        }

 

        .MyCalendar .ajax__calendar_active .ajax__calendar_day,

        .MyCalendar .ajax__calendar_active .ajax__calendar_month,

        .MyCalendar .ajax__calendar_active .ajax__calendar_year {

            color: #008000;

            font-weight:bold;

        }

    </style>



스타일을 적용한 후에 다시 브라우저를 실행해보면 스타일이 적용된 CalendarExtender 컨트롤을 확인할 수 있습니다.


그림 2. 스타일이 적용된 CalendarExtender 컨트롤

마지막으로, 웹 페이지에서 많이 사용되는 방법인 어떤 이미지를 클릭했을 때 CalendarExtender 컨트롤이 나오는 것을 보도록 하겠습니다. 텍스트 박스 옆으로 도구 상자에서 이미지 컨트롤을 드래그 앤 드랍으로 위치시킵니다. 화면에서 보여줄 이미지를 웹 사이트의 적당한 위치에 위치시킨 후 ImageUrl 속성을 이용하여 경로를 지정해 줍니다. 그리고 나서, CalendarExtender 컨트롤의 속성에 PopupButtonID의 속성을 "Image1"으로 설정합니다. 작성한 코드는 다음과 같습니다.

                    <asp:TextBox ID="TextBox1" runat="server" Width="300px"></asp:TextBox>

                    <asp:Image ID="Image1" runat="server" ImageUrl="~/Image/feed-icon-16x16.png" />

                    <cc1:CalendarExtender

                        ID="CalendarExtender1" runat="server" TargetControlID="TextBox1" CssClass="MyCalendar" PopupButtonID="Image1" >

                    </cc1:CalendarExtender>



브라우저에서 확인해 보면, 이미지를 눌렀을 경우에만 CalendarExtender 컨트롤이 보이게 되고, 날짜를 클릭하면 텍스트 박스로 선택한 요일이 들어가게 됩니다.


그림 3. 이미지를 이용하여 CalendarExtender 컨트롤의 값을 텍스트 박스로 추가

이 외에 CalendarExtender 컨트롤은 기존의 ASP.NET 2.0에서 제공하는 Calendar 컨트롤이 가진 속성을 모두 이용할 수 있으며, 텍스트 박스에 선택된 날짜가 표현되는 형식을 CalendarExtender 컨트롤의 Format 속성을 이용하여 변경할 수 있습니다. 다음 그림은 Format 속성에 지정한 값대로 텍스트 박스에 선택된 날짜가 표시된 화면입니다.


그림 4. Format 속성에 지정된 형식으로 텍스트 박스에 들어가는 날짜

이상으로 CalendarExtender 컨트롤에 대해서 알아보았습니다. 실무에 유용하게 사용하시기 바랍니다.


포스팅을 마치며... ----------------------------------------------------------------------------
참으로 오랜만에 올리는 AJAX 컨트롤에 대한 포스팅이 아닌가 합니다. 제 나름대로 시간이 없어서, CalendarExtender 컨트롤에 대해서는 이전에 자료를 준비했으나 실제적으로 글로 옮기지 못했습니다. 이후로는 일주일에 적어도 2개의 AJAX 컨트롤에 대한 포스팅을 하도록 하겠습니다.




Creative Commons License
저작물크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
border border
border border
  이전 포스트 :: #8. [AjaxControlToolkit] DragPanel 컨트롤
  다음 포스트 :: #10. [AjaxControlToolkit] CollapsiblePanel 컨트롤
border border
border border
  
# Commented By :: 조재문 At 10/7/2007 6:57:08 PM [M] [D]
참 유익한 컨트롤 이군요... 당장 활용할 수 있겠어요...

초짜 질문... 연도를 변경하려면 어떻게 하나요???
컨트롤에 연도를 바꾸는 방법이 없는 것 같아....
# Commented By :: 최지훈 At 10/8/2007 11:41:18 AM [M] [D]
넵, 칼렌더 컨트롤은 제일 많이 사용될 수 있는 AJAX 컨트롤 중의 하나이지요...

연도를 변경하려면, 이전 다음 달로 이동하는 버튼 가운데에 있는 연도와 달이 표시되어 있는 텍스트를 눌러주시면 됩니다. 한번 눌러주시면 해당 년도의 달이 쭈루룩 표시되고, 한번 더 눌러주시면, 연도목록이 쭈루룩 표시됩니다. ^^;;
# Commented By :: 조재문 At 10/8/2007 11:55:07 AM [M] [D]
아! 답변 감사 드립니다.
# Commented By :: 최지훈 At 10/9/2007 12:10:30 AM [M] [D]
넵, 열심히 하세요. ^^;;
# Commented By :: 유명규 At 1/23/2008 11:24:03 AM [M] [D]
예제에 나온 내용을 보면 달력이 영문으로 되어 있는데 한글로도 표현이 가능합니다
초기 ScriptManager의 속성중 EnableScriptGlobalization과 EnableScriptLocalization 속성을
true로 설정하면 달력이 한글로 나와요 ^^
# Commented By :: 최지훈 At 1/23/2008 11:42:50 AM [M] [D]
아. 넵 그렇군요. ^^;;
AJAX 사이트에 있는 내용만을 가지고 예제를 꾸미다 보니 그렇게 되었네요. ^^;;
좋은 정보 감사합니다.
# Commented By :: 공쥬랑놀쟈 At 1/23/2008 2:27:05 PM [D]
비쥬얼 스튜디오에선 오류가 않뜨는데요 브라우저에서 보면
The TargetControlID of 'CalendarExtender1' is not valid. The value cannot be null or empty.
이런 오류가 떠요 왜그런걸까요ㅠㅠ
# Commented By :: 공쥬랑놀쟈 At 1/23/2008 4:38:57 PM [D]
해결했어요 TargetControlID에 값을 않넣어가꼬 않나오는거였네요^^;;
저~기 소스에 TargetControlID 값이 없어서 따로 설정을 않해났었네요~ㅎ
# Commented By :: 최지훈 At 1/23/2008 5:21:14 PM [M] [D]
네. 다행이네요. ^^;;
오류메세지에 문제 해결에 대한 방법이 나와있었는데, 그걸 빨리 못보신듯 하네요. ^^;;
ASP.NET AJAX 컨트롤 툴킷은 모두 TargetControlID 속성에 값을 할당해야 한답니다.
아, 그러고보니 소스에 TargetControlID가 없었네요. ㅡㅡ;; 제 실수입니다. ㅠㅠ;;
# Commented By :: 박석민 At 3/17/2008 9:06:07 AM [M] [D]
혹시 이 컨트롤을 쓰면.. 다른 컨트롤과 겹칠때 뒤로 숨지 않나요??
# Commented By :: 최지훈 At 3/17/2008 9:32:37 AM [M] [D]
네, 다른 컨트롤과 제가 사용을 해보지 않아서 잘 모르겠지만,
만약 겹친다면 스타일의 z-index를 잘 조정해서 사용하면 다른 컨트롤 위에 보여지는 게 가능할 것이라 보여지네요. ^^;;
# Commented By :: timeof At 6/30/2008 9:59:47 PM [D]
전에 한번은 ToolBox에 있는 Calendar를 사용해서 AJAX연동을 했었는데요... 비슷하긴 한데.. Calendar Extender 가 좀 이쁘긴 하네요...^^
# Commented By :: 최지훈 At 7/2/2008 10:59:28 AM [M] [D]
다음달, 다음년, 이전달, 이전년으로 움직일 때 애니메이션이 꽤 괜찮습니다. 사용하기도 편리한 것 같구요. ^^;;
# Commented By :: 푸하하3 At 7/31/2008 3:03:34 PM [M] [D]
질문이 있습니다. 연월만 골라서 선택하고 싶어합니다.
http://tonesdotnetblog.wordpress.com/2007/08/26/how-to-patch-the-ajax-control-toolkit-to-return-a-month-or-year-from-the-calendar-extender-control/
이 링크에서 시키는 대로 했는데, 에러없이 속성까지 설정했는데 실행하면,
아무것도 안뜨네요. 시간 되시면 이것도 포스팅 한번 부탁드립니다. 꾸벅~

# Commented By :: 최지훈 At 8/25/2008 9:57:18 AM [M] [D]
넹... 시간이 된다면... 아마도 9월 말쯤에????
해보도록 하겠습니다. 흥미로울 것 같네요. ^^;;
# Commented By :: 김동훈 At 4/16/2009 3:37:58 PM [M] [D]
web.config 오류가 나타나요..ㅠㅠ
# Commented By :: 따시꿍 At 12/3/2009 6:22:51 PM [M] [D]
안녕하세요.. ScriptManager의 속성중 EnableScriptGlobalization과 EnableScriptLocalization 속성을 true로 설정하면 달력이 한글로 나온다는데...저는 여전히 영문으로 나오는데요, 왜 그런거죠?
# Commented By :: 최지훈 At 12/4/2009 12:32:49 AM [M] [D]
제가 AJAX를 안한지 꽤 돼서요. ^^;;
충분한 조언이 될련지는 모르겠네요...

확인해볼 사항은 2가지입니다.
1. 웹 브라우저의 언어 설정이 "영어"로 되어 있는지 확인하시기 바랍니다. (테스트 하느라 변경하셨을 수도 있으니까요..)
2. Page 지시문의 어트리뷰트 중, Culture와 UICulture가 "auto"로 지정되었는지 확인하시기 바랍니다. 이 어트리뷰트 설정으로 인해, 웹 브라우저의 언어 설정이 적용됩니다.

특별한 이유가 없는 한, 언어 설정이 제대로 되는것으로 알고 있습니다.
즐프하세요~!!!
# Commented By :: 따시쿵~~` At 12/4/2009 2:53:00 PM [M] [D]
답변 감사합니다. 말씀 하신데로 확인하고 작업했는데도 안 되네요.. 좀 더 자료 찾아봐야겠네요. 즐거운 하루 되세요~~~
  NAME ::   PASSWORD ::
  MAIL ::   HOMEPAGE ::
  COMMENT ::
border border
border border
COPYLEFT NX Blogs.   opml

LogIn ]  [ Join NX Blog's ]
border border
border border
mvp
border border
border border
  border
   Personal Thought
   ASP.NET
   ASP.NET AJAX
   ASP.NET MVC Framework
   Dev Story(Etc.)
   Reading the Articles
   About Microsoft / MSDN
   Certification Talk
   Useful Dev Tools
border border
border border
  border
   2010 년 09 월 (2)
   2010 년 06 월 (1)
   2010 년 05 월 (1)
   2010 년 04 월 (1)
   2010 년 03 월 (1)
   2010 년 02 월 (5)
   2010 년 01 월 (1)
   2009 년 04 월 (2)
   2009 년 03 월 (3)
   2009 년 02 월 (6)
   2009 년 01 월 (1)
   2008 년 10 월 (1)
   2008 년 06 월 (8)
   2008 년 05 월 (10)
   2008 년 04 월 (13)
   2008 년 03 월 (9)
   2008 년 02 월 (17)
   2008 년 01 월 (5)
   2007 년 12 월 (8)
   2007 년 11 월 (15)
   2007 년 10 월 (36)
   2007 년 09 월 (33)
   2007 년 08 월 (17)
   2007 년 07 월 (23)
   2007 년 06 월 (4)
   2007 년 05 월 (16)
   2007 년 04 월 (26)
   2007 년 03 월 (14)
   2007 년 02 월 (25)
   2007 년 01 월 (41)
   2006 년 12 월 (38)
   2006 년 11 월 (0)
   2006 년 10 월 (0)
   2006 년 09 월 (1)
   2006 년 08 월 (9)
   2006 년 07 월 (1)
border border
border border
  border
   #129. 無題(2)
    By 최지훈 At 9/6/2010
   #128. 無題
    By 최지훈 At 9/3/2010
   127. [예약구매] 실전. jQ...
    By 최지훈 At 6/13/2010
   #126. 무제
    By 최지훈 At 5/23/2010
   #125. 요즘 근황?
    By 최지훈 At 4/15/2010
   #124. ASP.NET 4 책을...
    By 최지훈 At 3/12/2010
   #97. ASP.NET 4 New...
    By 최지훈 At 2/12/2010
   #96. ASP.NET 4 New...
    By 최지훈 At 2/10/2010
   #95. ASP.NET 4 New...
    By 최지훈 At 2/9/2010
   #94. ASP.NET 4 New...
    By 최지훈 At 2/2/2010
border border
border border
  border
   태풍의 끝자락이 대지를 쓸고 지나...
    By 조재문 At 9/7/2010
   배는숨겨야지 에서 나도 모르게 빵...
    By ㅋㅋ At 8/17/2010
   Sorry. I don't hav...
    By 최지훈 At 8/16/2010
   내 생애 번역서는 이걸루 끝이다....
    By 최지훈 At 8/16/2010
   네..^^;; 저도 감사합니다.
    By 최지훈 At 8/16/2010
   IIS 버전이 업그레이드되면서 해...
    By 최지훈 At 8/16/2010
   나중에 비슷한 차로 태워는 줄께~...
    By 최지훈 At 8/16/2010
   나도 사주세요 저 차
    By ㅋㅋ At 8/12/2010
   저도 URL Rewriting 이...
    By 초보 At 8/7/2010
   감사드립니다^^
    By 이한철 At 7/28/2010
border border