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

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

Stephen Huen
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.80/5 (17投票s)

May 2, 2010

CPOL

6分钟阅读

viewsIcon

358175

downloadIcon

8479

以紧凑的小部件样式日历显示 SharePoint 事件（或任何日历列表）

引言

[SharePoint 2013 版本可在此处获得。]

此事件日历列表 Web 部件 (Event Calendar Listing Web Part) 用于 Microsoft SharePoint 2010，以紧凑的 widget 风格显示事件（或任何日历列表）。它支持视图并提供 AJAX 支持，带有鼠标悬停工具提示功能。

背景

在构建此 Web 部件时，我受到了 CodeProject 文章 Calendar Web Part for Sharepoint that Displays & Gives Details of Events from an Event List 的启发。它基于同一个理念，即 SharePoint 日历事件显示在一个自定义日历 Web 控件中，该控件继承自标准的 ASP.NET Calendar Web 控件。我的设计目标是使 Web 部件更加灵活、高效和美观。

描述

EventCalendarListWebPart Web 部件调用两个自定义 Web 控件 EventCalendar 和 EventListing 来渲染事件。

EventCalendar 是一个继承自 System.Web.UI.WebControls.Calendar 的自定义 Web 控件。有事件的日期将以 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 的包装器。它还将一个 UpdatePanel 包裹在 EventCalendar 周围，因此点击上一个月或下一个月不会导致整个页面刷新。该 Web 部件具有以下 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 部件带有以下默认属性值，这些值反映了顶部预览截图所示的外观和感觉：

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

该 Web 部件还使用资源文件来存储所有消息和属性 UI 字符串。它调用一个继承自 WebDescriptionAttribute、WebDisplayNameAttribute 或 CategoryAttribute 的自定义类，并从您自己的 Resource Manager 返回本地化的 string。

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

安装

如果您正在从以前的版本升级，请参阅版本历史记录以获取任何特殊的升级说明。

打开SharePoint 2010 Management Shell，使用 Add-SPSolution 命令添加解决方案文件QuestechSystems.SharePoint.EventCalendarList.wsp，如下所示：

Add-SPSolution 
"C:\_deployment\QuestechSystems.SharePoint.EventCalendarList.wsp"

转到SharePoint 2010 Central Administration/System Settings/Manage farm solutions。将已安装的解决方案部署到选定的 Web 应用程序。在部署了该解决方案的站点集合中，激活站点集合功能Questech Systems Event Calendar Listing Web Part。之后，事件日历列表 Web 部件（在 Questech Systems 下列出）应该就可以添加到页面中了。

提示：要控制日历的宽度，请在 Web 部件属性的“外观”部分指定 Web 部件的固定宽度。

请注意，虽然此 Web 部件已获得 The Code Project Open License 的许可，但 JavaScript Tooltips 根据其自己的 使用条款单独许可。

历史

  • V2.0 - 2014.07.04
    • 从 V1.1 升级说明
      1. 删除旧 Web 部件的所有实例。
      2. 使用 PowerShell 或通过 SharePoint 2010 中央管理撤销旧解决方案。
      3. 按照安装部分所述的安装说明进行操作。
    • 支持视图。
    • 实验性 Ajax 支持，因此点击上一个月或下一个月不会刷新整个页面。请打开“启用异步更新”来启用此功能。可能不适用于所有页面/浏览器。
    • 内置 CSS 用于样式和鼠标悬停工具提示行为，因此不再依赖外部 CSS。
    • 切换到 Dynamic Web Coding 的 JavaScript Tooltips，以获得更好的工具提示放置。
  • V1.1 - 2010.06.29
    • 使事件日历兼容 Ajax。（如果日历 Web 部件或 Web 控件被包裹在 UpdatePanel 中，则工具提示在异步回发后仍能正常工作。感谢 jules_anime 提供代码提示。）
  • V1.0 - 2010.05.02 - 基础版
© . All rights reserved.