65.9K
CodeProject 正在变化。 阅读更多。
Home

事件日历列表 Web 部件 (SharePoint 2013)

Stephen Huen
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.75/5 (17投票s)

2014年3月29日

CPOL

5分钟阅读

viewsIcon

127112

downloadIcon

3746

一个 SharePoint 紧凑小部件样式日历

 

引言

适用于 Microsoft SharePoint 2013，此 Event Calendar Listing Web Part 以紧凑的组件样式日历显示事件（或任何日历列表）。它支持视图并提供带悬停工具提示的 ajax 支持。

背景

在构建此 Web Part 时，我受到了 CodeProject 文章 Calendar Web Part for Sharepoint that Displays & Gives Details of Events from an Event List 的启发。它的基本思想与 SharePoint 日历事件显示在自定义日历 Web 控件中相同，该控件继承自标准的 ASP.NET Calendar Web 控件。我的设计目标是使 Web Part 更灵活、高效且在视觉上更具吸引力。

描述

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>

上面的查询检索当前日历视图中显示的所有日期发生的事件，而不仅仅是当前或选定的月份。因此，它可能包括上个月的最后几天和/或下个月的几天。当指定自定义日历视图时，将使用该视图的查询。此自定义视图应基于 Calendar 视图类型。在重写的 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 Part 具有以下 public 属性：

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

所有 JavaScript 文件都通过使用 ScriptLink 进行引用，而所有 CSS 文件都通过使用 CssRegistration 进行引用。

该 Web Part 附带以下默认属性值，这些值反映了预览截图所示的外观和感觉：

  • 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 的自定义类，并从您自己的 Resource Manager 返回本地化的 string。

示例 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 应用程序。在部署了解决方案的网站集（site collection）中，激活 Site Collection Feature "Questech Systems Event Calendar Listing Web Part"。之后，Event Calendar Listing Web Part (列在 Questech Systems 下) 应该可以添加到页面中。

提示：要控制日历的宽度，请在 Web Part 属性的 Appearance 下为 Web Part 指定固定宽度。

请注意，尽管此 Web Part 在 The Code Project Open License 下获得许可，但 JavaScript Tooltips 是根据其自身的 使用条款单独许可的。

历史

  • V1.2 - 2014.07.05 - 切换到 Dynamic Web Coding 的 JavaScript Tooltips，以获得更好的工具提示放置。
  • V1.1 - 2014.05.18 - 添加了打开/关闭 Ajax 支持的选项。
  • V1.0 - 2014.03.29 - 基础版本
© . All rights reserved.