2月历雅虎的WebControl
![](src="/KB/webforms/2MonthCalendar/cal.JPG")
简介
我最近有一个著名的法国网球公司工作，并为网站应用程序的特定需要。本次比赛的beginsnbsp在5月和六月中旬完成年底。我的客户希望看到月和6月，在同一时间选择他的日期。对于某些用户类别，他想，让他们选择的日期（例如:在整个比赛期间3天）为A类用户的最大数量。并防止他们预订了一些特殊的日子（所以，把禁止在日历上的日期）的可能性。最后重要的一点是要选择一个开始日期和结束日期（日历视图必须与初始化之日起一个月）的日期间隔期间与这些日期。这是不可能找到所有这些选项，但看起来好2个月的日历部件。我发现几乎所有的选项之一:优秀的雅虎日历（{A}，我看到在场的要领功能，但2功能人失踪。设置禁止日期，并设置一个最大日期数Sonbsp的可能性，我深入分析大"; calendar.jsquot;文件，因为代码的设计非常出色，非常干净，非常好评论的， 我设法执行这个JavaScript文件中的这2个功能。）
在这篇文章中，NBSP中，我不会解释我在calendar.js变化，而是有趣的点，做Web控件的执行情况。背景
在本节中，我将解释如何使用的控制和属性是什么。守则
实例化一个日历，很容易://server side code :
YuiExtCalendar.MinDateSelectable = new DateTime(2011, 6, 1);
YuiExtCalendar.MaxDateSelectable = new DateTime(2011, 10, 1);
YuiExtCalendar.InitialSelectedDates = new List<datetime />()
{ new DateTime(2011, 6, 24), new DateTime(2011, 6, 25) } ;
YuiExtCalendar.ForbiddenDates = new List<datetime />()
{ new DateTime(2011, 7, 10), new DateTime(2011, 7, 11) };
YuiExtCalendar.NumberOfSelectableDates = 5;
YuiExtCalendar.HeaderTitle = "Title of Calendar :";
YuiExtCalendar.DataBind();
模式:Mode属性是3个可能的值的一个枚举。平值显示像任何经典的widget日历。 CollapsibleCalendarWithDateSummury值显示日历，当你点击ImageCalendarUrl财产的形象。因此，如果您使用CollapsibleCalendarWithDateSummury或CollapsibleCalendarWithNoDateSummury，您必须提供ImageCalendarUrl财产。 CollapsibleCalendarWithDateSummury生成一个您选择的日期迷你总结，它是非常有用的，当您关闭日历。 CollapsibleCalendarWithNoDateSummury值是完全相同摘要没有像CollapsibleCalendarWithDateSummury的。
MinDateSelectable和MaxDateSelectable的DateTime属性，必须设置在一起。它可以让你限制你的日期在日历上选择间隔。例如，如果您希望您的日历允许选择日期19/09/2012和2012年9月12日之间。 （您必须设置MinDateSelectable = 19/09/2012和MaxDateSelectable = 2012年9月12日。）设置这个变量的服务器端。
InitialSelectedDates属性是一个列表，它可以让你选择一些在页面加载的日期时间。设置这个变量的服务器端。
ForbiddenDates属性是一个列表，它可以让你设置了禁止日期的清单:这些日期将无法选择。您可以自定义calendar.css的UI风格，这些被禁止的日期:。/ *故宫的样式* / YUI皮肤SAM YUI日历td.calcell.forbidden {＃customize_here＃}。设置这个变量的服务器端。
NumberOfSelectableDates是一个整数属性，它允许您控制在选定的日期，例如:如果你想使一个用户选择4日期在日历最大，将此变量设置为4。这个变量设置为服务器端或客户端。
HeaderTitle是一个字符串属性，它可以让你设置的日历头的标题。这个变量设置为服务器端或客户端。
ImageCalendarUrl是一个字符串属性。它的模式CollapsibleCalendarWithNoDateSummury或CollapsibleCalendarWithNoDateSummury图片的URL。我建议你设置这个变量的客户端。
SelectedValues财产是一个列表，它可以让您获得由用户选择的日期，回发时会出现一个按钮。
如果你点击在日历上写了2个月，你可以选择你想看到的一个月:
使用代码
我作出的选择来实现继承CompositeControl类widget的日历。为什么呢？因为，当你要生成分层HTML标记，子控件的ID是自动命名是这样的:'ControlId_childrenControlId_subchildrenControlId_subsubchildrenControlId"等..这是一个有趣的属性，andnbsp;我首先使用在JavaScript（_ID_更换）。当您测试程序Defaut.aspx页，观看的HTML源代码生成的客户端。的CreateChildControls是一个覆盖方法，让我产生HTML。的OnPreRender方法允许menbsp是一个覆盖追加头JavaScript文件引用andnbsp; CSS文件的引用ID需要，andnbsp;生成JavaScript来执行，以建立和显示日历。每个JavaScript文件， CSS文件和图片文件必须在AssemblyInfo.cs中注册，每个文件是一个quot;嵌入式Resourcesquot;在装载目录必须动态加载。 Hownbsp;可以Inbsp动态读取一个文件里面的日历大会？我用的Assembly.GetExecutingAssembly（）。GetManifestResourceStream（）方法来读取文件的内容。//Build CalendarLoader.js Constructor
System.IO.Stream streamScriptLoader =
Assembly.GetExecutingAssembly().GetManifestResourceStream
("YuiExtAspNetCalendar.Loading.calendarLoader.js");
System.IO.StreamReader readerScriptLoader =
new System.IO.StreamReader(streamScriptLoader);
string scriptLoader = readerScriptLoader.ReadToEnd();
readerScriptLoader.Close();
日历有几个按钮（右导航，左侧导航，关闭按钮等）... ...所有这些按钮绘制在一个文件中（奇怪的设计），这个文件是sprite.png。它并不足以把目录中的sprint.png，ASP.NET无法找到它在执行过程中。要找到它在大会上，ASP.NET需要得到AssemblyUrl，你会得到Page.ClientScript.GetWebResourceUrl（）方法。string urlImageSprite = Page.ClientScript.GetWebResourceUrl(this.GetType(),
"YuiExtAspNetCalendar.resources.sprite.png");
后果:由于calendar.css需要此sprite.png，我们提取所有的CSS行包含背景:网址（'sprite.png"）服务器端，我们用良好的URL（AssemblyUrl）://Add style for registering sprite.png
//We extract all css lines from calendar.css whose contain url(sprite.png)
string urlImageSprite = Page.ClientScript.GetWebResourceUrl(this.GetType(),
"YuiExtAspNetCalendar.resources.sprite.png");
StringBuilder stylesExtracted = new StringBuilder();
stylesExtracted.Append(" \r\n .yui-skin-sam .yui-calcontainer
.title{background:url(\"[SPRITE_IMG_URL]\") repeat-x 0 0;
border-bottom:1px solid #ccc;font:100% sans-serif;color:#000;
font-weight:bold;height:auto;padding:.4em;
margin:0 -10px 10px -10px;top:0;left:0;text-align:left;} \r\n")
.Append(" .yui-skin-sam .yui-calcontainer .calclose{background:url
(\"[SPRITE_IMG_URL]\") no-repeat 0 -300px;width:25px;
height:15px;top:.4em;right:.4em;cursor:pointer;} \r\n")
.Append(" .yui-skin-sam .yui-calendar .calnavleft{background:url
(\"[SPRITE_IMG_URL]\") no-repeat 0 -450px;width:25px;height:15px;
top:0;bottom:0;left:-10px;margin-left:.4em;cursor:pointer;} \r\n")
.Append(" .yui-skin-sam .yui-calendar .calnavright{background:url
(\"[SPRITE_IMG_URL]\") no-repeat 0 -500px;width:25px;height:15px;
top:0;bottom:0;right:-10px;margin-right:.4em;cursor:pointer;} \r\n")
.Append(" .yui-skin-sam .yui-calendar a.calnav:hover{background:url
(\"[SPRITE_IMG_URL]\") repeat-x 0 0;border-color:#A0A0A0;cursor:pointer;} \r\n")
.Append(" .yui-skin-sam .yui-calcontainer .yui-cal-nav .yui-cal-nav-btn
{border:1px solid #808080;background:url(\"[SPRITE_IMG_URL]\")
repeat-x 0 0;background-color:#ccc;margin:auto .15em;} \r\n")
.Append(" .yui-skin-sam .yui-calcontainer .yui-cal-nav
.yui-cal-nav-btn.yui-default{border:1px solid #304369;
background-color:#426fd9;background:url
(\"[SPRITE_IMG_URL]\") repeat-x 0 -1400px;} \r\n");
stylesExtracted = stylesExtracted.Replace("[SPRITE_IMG_URL]", urlImageSprite);
最后一点是，如果我们把在同一页的多个日历，包括几次JS文件andnbsp; CSS文件库也没用。所以我用Page.Items收集这是持久性是一个HttpRequest的生命周期。
后果:如果您在同一页上，NBSP多个日历，我做了治疗一次加载脚本。兴趣点
我提高我对知识的JavaScript封装在ASP.NET组件。我想在一个公司whosenbsp的工作;，业务是工具箱ASP.NET组件设计。历史
我测试此组件的几倍，在很多情况。其行为看起来是正确的的。不要犹豫tonbsp;问ifnbsp;您有任何问题。|大卫Zenou