自定义SharePoint日历控件

本文将介绍一种自定义的SharePoint日历控件,该控件以紧凑的Widget风格展示事件,并提供视图支持和Ajax支持。这种控件的设计目标是提高灵活性、效率和视觉吸引力。

受到CodeProject上的文章《Calendar Web Part for Sharepoint that Displays & Gives Details of Events from an Event List》的启发,构建了这个Web Part。它基于SharePoint日历事件在自定义日历Web控件中展示的想法,该控件继承自标准的ASP.NET Calendar Web控件。

描述

EventCalendarListWebPart Web Part调用两个自定义Web控件EventCalendar和EventListing来渲染事件。EventCalendar是一个自定义Web控件,继承自System.Web.UI.WebControls.Calendar。有事件的日期以Selected样式呈现,鼠标悬停时显示一个包含当天事件列表的提示工具。该提示工具使用了Dynamic Web Coding的JavaScript Tooltips。当用户将鼠标悬停在事件标题上时,会显示一个显示事件开始和结束时间的提示工具。

在EventCalendar中,使用SPQuery从日历列表中检索事件,如下所示: <Where> <DateRangesOverlap> <FieldRef Name="EventDate" /> <FieldRef Name="EndDate" /> <FieldRef Name="RecurrenceID" /> <Value Type="DateTime"> <Month /> </Value> </DateRangesOverlap> </Where> 上述查询检索当前日历视图中显示的所有日期的事件,不仅仅是当前或选定的月份。因此,它可能包括上个月的最后几天和/或下个月的头几天。当指定自定义日历视图时,将使用该视图的查询。这个自定义视图应该基于日历视图类型。在重写的OnDayRender事件中,控件将检查检索到的事件是否落在当天,并相应地渲染必要的子控件。

EventListing是一个自定义Web控件,以列表格式显示即将发生的事件。它使用SPQuery从日历列表中检索事件,如下所示: <Where> <DateRangesOverlap> <FieldRef Name="EventDate" /> <FieldRef Name="EndDate" /> <FieldRef Name="RecurrenceID" /> <Value Type="DateTime"> <Now /> </Value> </DateRangesOverlap> </Where> <OrderBy> <FieldRef Name="EventDate" /> </OrderBy> 再次,当指定自定义列表视图时,将使用该视图的查询。这个自定义视图应该基于OOTB "Current Events"视图创建。

EventCalendarListWebPart作为EventCalendar和EventListing的包装器。它还在EventCalendar周围包装了一个UpdatePanel,以便点击上一个月或下一个月时不会导致整个页面刷新。该Web部件具有以下公共属性:

  • SiteUrl - (站点URL)站点的服务器相对URL。如果留空,将使用当前站点。
  • ListTitle - (列表标题)日历列表的名称。默认为Calendar。
  • SiteRelativeEventItemUrl - (站点相对URL用于事件详细页面)在某些情况下,例如在发布站点中,可能希望将用户定向到具有与发布站点其余部分一致的外观和感觉的自定义事件详细页面。如果提供,当用户点击事件标题时,用户将被重定向到此自定义页面,事件项ID将自动附加到URL作为查询字符串。
  • EnableAsyncUpdate - (启用异步更新)启用此选项将使月份导航无需完全刷新页面即可工作。实验性,可能不适用于所有页面或浏览器。默认为false。
  • ShowCalendar - (显示日历?)默认为true。
  • CalendarViewTitle - (日历视图名称)基于日历视图类型的视图名称。
  • FirstDayOfWeek - (一周的第一天)默认为Default,即系统设置中指定的。
  • CssClassCalendar - (日历控件的CSS类名)这是最外层日历表格的CSS类。
  • CssClassTitle - (标题标题的CSS类名)这是显示2014年3月的部分的CSS类。
  • CssClassHeader - (显示一周中的一天的部分的CSS类名)
  • CssClassNextPrev - (下一个月和上一个月导航元素的CSS类名)
  • CssClassDay - (显示月份中的日子的CSS类名)
  • CssClassEvent - (有事件的日子的CSS类名)
  • CssClassToday - (今天日期的CSS类名)
  • CssClassWeekend - (周末日期的CSS类名)
  • CssClassOtherMonth - (不在显示月份中的日子的CSS类名)
  • ShowListing - (显示列表?)默认为true。
  • ListingViewTitle - (列表视图名称)基于当前事件视图的视图名称。
  • NumDaysInEventListing - (在事件列表中显示的天数)默认为3。请注意,没有事件的日子不计入。
  • CssClassEventListing - (事件列表的CSS类名)

所有JavaScript文件都通过ScriptLink引用,所有CSS文件都通过CssRegistration引用。该Web部件具有以下默认属性值,反映了顶部预览屏幕截图中显示的相同外观和感觉:

  • CssClassCalendar - ecl-calendar
  • CssClassDay - ecl-day
  • CssClassEvent - ecl-event
  • CssClassToday - ecl-today
  • CssClassWeekend - ecl-weekend
  • CssClassOtherMonth - ecl-other-month
  • CssClassEventListing - ecl-listing

Web Part还使用资源文件存储所有消息和属性UI字符串。它调用一个自定义类,该类继承自WebDescriptionAttribute、WebDisplayNameAttribute或CategoryAttribute,并从自己的资源管理器返回本地化的字符串。

样本Visual Studio 2013 Update 1解决方案包括构建和部署此Web Part所需的所有支持文件,不包括强名称密钥文件。它充分利用了内置的SharePoint集成。不再需要第三方工具或自定义预构建和后构建脚本来构建SharePoint解决方案文件。

安装

如果是从以前的版本升级,请参考版本历史记录以获取任何特殊的升级说明。

打开SharePoint 2013 Management Shell,使用Add-SPSolution添加解决方案文件QuestechSystems.SharePoint.EventCalendarList.wsp,如下所示: Add-SPSolution "C:\_deployment\QuestechSystems.SharePoint.EventCalendarList.wsp" 转到SharePoint 2013 Central Administration/System Settings/Manage farm solutions。将安装的解决方案部署到选定的Web应用程序。在部署解决方案的站点集合中,激活站点集合功能Questech Systems Event Calendar Listing Web Part。之后,Event Calendar Listing Web Part(列在Questech Systems下)应该可供添加到页面。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485