PageRenderTime 45ms CodeModel.GetById 18ms RepoModel.GetById 1ms app.codeStats 0ms

/AjaxToolkit/Calendar/Calendar.aspx

http://github.com/simonbegg/Invoicing
ASP.NET | 195 lines | 193 code | 2 blank | 0 comment | 10 complexity | ba9230c87a37f2f9b80fbc2a4a27cfcc MD5 | raw file
  1. <%@ Page Language="C#" MasterPageFile="~/DefaultMaster.master" Title="Calendar Sample"
  2. Culture="auto" UICulture="auto" Theme="SampleSiteTheme" %>
  3. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
  4. <asp:Content ContentPlaceHolderID="SampleContent" runat="Server">
  5. <ajaxToolkit:ToolkitScriptManager runat="Server" EnableScriptGlobalization="true"
  6. EnableScriptLocalization="true" ID="ScriptManager1" />
  7. <div class="demoarea">
  8. <div class="demoheading">
  9. Calendar Demonstration</div>
  10. <br />
  11. <b>Default calendar: </b>
  12. <br />
  13. <asp:TextBox runat="server" ID="Date1" autocomplete="off" /><br />
  14. <ajaxToolkit:CalendarExtender ID="defaultCalendarExtender" runat="server" TargetControlID="Date1" />
  15. <div style="font-size: 90%">
  16. <em>(Set the focus to the textbox to show the calendar)</em></div>
  17. <br />
  18. <br />
  19. <b>Calendar with a custom style and formatted date (opening on left):</b><br />
  20. <asp:TextBox runat="server" ID="Date2" autocomplete="off" /><br />
  21. <ajaxToolkit:CalendarExtender ID="customCalendarExtender" runat="server" TargetControlID="Date2"
  22. CssClass="MyCalendar" Format="MMMM d, yyyy" SelectedDate="April 28, 1906" PopupPosition="Left"/>
  23. <div style="font-size: 90%">
  24. <em>(Set the focus to the textbox to show the calendar)</em></div>
  25. <br />
  26. <br />
  27. <b>Calendar with an associated button:</b><br />
  28. <asp:TextBox runat="server" ID="Date5" />
  29. <asp:ImageButton runat="Server" ID="Image1" ImageUrl="~/images/Calendar_scheduleHS.png" AlternateText="Click to show calendar" /><br />
  30. <ajaxToolkit:CalendarExtender ID="calendarButtonExtender" runat="server" TargetControlID="Date5"
  31. PopupButtonID="Image1" />
  32. <div style="font-size: 90%">
  33. <em>(Click the image button to show the calendar; this calendar dismisses automatically
  34. when you choose a date)</em></div>
  35. </div>
  36. <div class="demobottom">
  37. </div>
  38. <asp:Panel ID="Description_HeaderPanel" runat="server" Style="cursor: pointer;">
  39. <div class="heading">
  40. <asp:ImageButton ID="Description_ToggleImage" runat="server" ImageUrl="~/images/collapse.jpg"
  41. AlternateText="collapse" />
  42. Calendar Description
  43. </div>
  44. </asp:Panel>
  45. <asp:Panel ID="Description_ContentPanel" runat="server" Style="overflow: hidden;">
  46. <p>
  47. Calendar is an ASP.NET AJAX extender that can be attached to any ASP.NET TextBox
  48. control. It provides client-side date-picking functionality with customizable date
  49. format and UI in a popup control. You can interact with the calendar by clicking
  50. on a day to set the date, or the "Today" link to set the current date.
  51. </p>
  52. <br />
  53. <p>
  54. In addition, the left and right arrows can be used to move forward or back a month.
  55. By clicking on the title of the calendar you can change the view from Days in the
  56. current month, to Months in the current year. Another click will switch to Years
  57. in the current Decade. This action allows you to easily jump to dates in the past
  58. or the future from within the calendar control.
  59. </p>
  60. <br />
  61. <p>
  62. The page uses the culture setting <strong><%= System.Globalization.CultureInfo.CurrentCulture.NativeName %></strong>
  63. which was specified by the browser. The page properties have Culture="auto" and
  64. UICulture="auto" set to enable the same. See this
  65. <a href="http://msdn2.microsoft.com/en-us/library/bz9tc508.aspx">MSDN article</a>
  66. for more information. The ScriptManager on this Calendar demo page has EnableScriptGlobalization="true"
  67. and EnableScriptLocalization="true".
  68. </p>
  69. </asp:Panel>
  70. <asp:Panel ID="Properties_HeaderPanel" runat="server" Style="cursor: pointer;">
  71. <div class="heading">
  72. <asp:ImageButton ID="Properties_ToggleImage" runat="server" ImageUrl="~/images/expand.jpg"
  73. AlternateText="expand" />
  74. Calendar Properties
  75. </div>
  76. </asp:Panel>
  77. <asp:Panel ID="Properties_ContentPanel" runat="server" Style="overflow: hidden;"
  78. Height="0px">
  79. <p>
  80. The calendar associated with a button has been initialized with this code. The properties
  81. in <em>italic</em> are optional:
  82. </p>
  83. <pre>&lt;ajaxToolkit:Calendar runat="server"
  84. TargetControlID="Date1"
  85. <em>CssClass</em>="ClassName"
  86. <em>Format</em>="MMMM d, yyyy"
  87. <em>PopupButtonID</em>="Image1" /&gt;</pre>
  88. <ul>
  89. <li><strong>TargetControlID</strong> - The ID of the TextBox to extend with the calendar.</li>
  90. <li><strong>CssClass</strong> - Name of the CSS class used to style the calendar. See
  91. the Calendar Theming section for more information.</li>
  92. <li><strong>Format</strong> - <a href="http://msdn2.microsoft.com/en-us/library/bb79761a-ca08-44ee-b142-b06b3e2fc22b.aspx">
  93. Format string</a> used to display the selected date.</li>
  94. <li><strong>PopupButtonID</strong> - The ID of a control to show the calendar popup
  95. when clicked. If this value is not set, the calendar will pop up when the textbox
  96. receives focus.</li>
  97. <li><strong>PopupPosition</strong> - Indicates where the calendar popup should appear
  98. at the BottomLeft(default), BottomRight, TopLeft, TopRight, Left or Right of the TextBox.</li>
  99. <li><strong>SelectedDate</strong> - Indicates the date the Calendar extender is
  100. initialized with.</li>
  101. </ul>
  102. </asp:Panel>
  103. <asp:Panel runat="server" ID="CalendarCSS_HeaderPanel" Style="cursor: pointer;">
  104. <div class="heading">
  105. <asp:ImageButton ID="CalendarCSS_ToggleImage" runat="server" ImageUrl="~/images/collapse.jpg"
  106. AlternateText="collapse" />
  107. Calendar Theming
  108. </div>
  109. </asp:Panel>
  110. <asp:Panel runat="server" ID="CalendarCSS_ContentPanel" Style="overflow: hidden;"
  111. Height="0px">
  112. You can change the look and feel of Calendar using the Calendar CssClass property.
  113. Calendar has a predefined set of CSS classes that can be overridden. It has a default
  114. style which is embedded as a WebResource and is a part of the Toolkit assembly that
  115. has styles set for all the sub-classes. You can find them in the Toolkit solution,
  116. in the <strong>"AjaxControlToolkit\Calendar\Calendar.css"</strong> file. If your
  117. CssClass does not provide values for any of those then it falls back to the default
  118. value. To customize the same the user would have to set the CssClass property to
  119. the name of the CSS style and define the styles for the individual classes so that
  120. the various elements in a Calendar control can be styled accordingly. The second
  121. calendar in the demo above uses the "MyCalendar" style. which sets the Calendar
  122. container style as follows.
  123. <pre>
  124. .MyCalendar .ajax__calendar_container {
  125. border:1px solid #646464;
  126. background-color: lemonchiffon;
  127. color: red;
  128. }</pre>
  129. <strong>Calendar Css Classes</strong>
  130. <br />
  131. <ul>
  132. <li><strong>.ajax__calendar_container </strong>: The outer rectangular container that
  133. supplies the border around the calendar element. Child Css classes: .ajax__calendar_header,.ajax__calendar_body,.ajax__calendar_footer.
  134. </li>
  135. <li><strong>.ajax__calendar_header </strong>: A container element that holds the next
  136. and previous arrows and the title of the current view. Child Css classes: .ajax__calendar_prev,
  137. .ajax__calendar_title, .ajax__calendar_next. </li>
  138. <li><strong>.ajax__calendar_prev </strong>: An element that displays the arrow to view
  139. the previous set of data in the view(previous month/year/decade). Child Css classes:
  140. none. </li>
  141. <li><strong>.ajax__calendar_title </strong>: An element that displays the title of the
  142. current view (month name, year, decade). Child Css classes: none. </li>
  143. <li><strong>.ajax__calendar_next </strong>: An element that displays the arrow to view
  144. the previous set of data in the view (previous month/year/decade). Child Css classes:
  145. none. </li>
  146. <li><strong>.ajax__calendar_body </strong>: A container element that holds the days,
  147. months, and years panes. Also provides a fixed rectangle with hidden overflow that
  148. is used for transitioning between views (next/previous month, or days/months/years).Child
  149. Css class: .ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years.
  150. </li>
  151. <li><strong>.ajax__calendar_days </strong>: A container element that holds the layout for
  152. the days in a month. Child Css classes: .ajax__calendar_dayname, .ajax__calendar_day
  153. </li>
  154. <li><strong>.ajax__calendar_dayname </strong>: An element that displays the short name of the
  155. day of the week. Child Css classes: none.</li>
  156. <li><strong>.ajax__calendar_day </strong>: An element that displays the day of the month.
  157. Child Css classes: none </li>
  158. <li><strong>.ajax__calendar_months </strong>: A container element that holds the layout for the months
  159. in a year. Child Css classes: .ajax__calendar_month.
  160. </li>
  161. <li><strong>.ajax__calendar_month </strong>: An element that displays the month of the year.
  162. Child Css classes: none </li>
  163. <li><strong>.ajax__calendar_years </strong>: A container element that holds the layout for the
  164. years in a decade. Child Css classes: .ajax__calendar_year.
  165. </li>
  166. <li><strong>.ajax__calendar_year </strong>: An element that displays the year in a decade.
  167. Child Css classes: none </li>
  168. <li><strong>.ajax__calendar_footer </strong>: A container element that holds the current date.
  169. Child Css classes: .ajax__calendar_today.</li>
  170. <li><strong>.ajax__calendar_today </strong>: An element that displays the current date.
  171. Child Css classes: none.</li>
  172. <li><strong>.ajax__calendar_hover </strong>: This is applied to an element in the DOM above a day,
  173. month or year and is used
  174. to apply CSS attributes that show a hover state. Child Css classes: .ajax__calendar_day,
  175. .ajax__calendar_month, .ajax__calendar_year </li>
  176. <li><strong>.ajax__calendar_active </strong>: This is applied to an element in the DOM above a day, month or year and is used
  177. to apply CSS attributes that show the currently selected value. Child Css classes: .ajax__calendar_day,
  178. .ajax__calendar_month, .ajax__calendar_year.</li>
  179. <li><strong>.ajax__calendar_other </strong>: This is applied to an element in the DOM above a day or year that is outside of
  180. the current view (day not in the visible month, year not in the visible decade).
  181. Child Css classes: .ajax__calendar_day, .ajax__calendar_year.</li>
  182. </ul>
  183. </asp:Panel>
  184. <ajaxToolkit:CollapsiblePanelExtender ID="cpeDescription" runat="Server" TargetControlID="Description_ContentPanel"
  185. ExpandControlID="Description_HeaderPanel" CollapseControlID="Description_HeaderPanel"
  186. Collapsed="False" ImageControlID="Description_ToggleImage" />
  187. <ajaxToolkit:CollapsiblePanelExtender ID="cpeProperties" runat="Server" TargetControlID="Properties_ContentPanel"
  188. ExpandControlID="Properties_HeaderPanel" CollapseControlID="Properties_HeaderPanel"
  189. Collapsed="True" ImageControlID="Properties_ToggleImage" />
  190. <ajaxToolkit:CollapsiblePanelExtender ID="cpeCalendarCSS" runat="Server" TargetControlID="CalendarCSS_ContentPanel"
  191. ExpandControlID="CalendarCSS_HeaderPanel" CollapseControlID="CalendarCSS_HeaderPanel"
  192. Collapsed="True" ImageControlID="CalendarCSS_ToggleImage" />
  193. </asp:Content>