Question

我在一个页面上有多个日历Web部件，我使用tabbed web part zone将每个日历放在一个标签中。

问题是日历Web部件呈现，然后使用AJAX来获取日历事件。数据从服务器返回后，会创建position:absolute个DOM元素，将它们放在日历上。

第一个标签中的日历很好（因为它可见），但其他标签有问题。事件都在日历的左上角（可能是因为隐藏了DOM元素，因此无法正确计算事件的位置。）

我最接近解决此问题的方法是使用以下javascript：

SP.UI.ApplicationPages.CalendarInstanceRepository.lookupInstance(instanceId).refreshItems();

这有两个问题：1）这是一个ajax调用，因此有一些延迟，用户在日历上看到事件“快照”到位; 2）日历本身的布局看起来很奇怪，因为出于某种原因，在其中发生事件的周数被渲染为不到日历上其他周的高度的一半。

我也尝试过在初始加载过程中没有隐藏日历（将它们移出屏幕），我也遇到了同样的问题，但即使有效，我仍然会遇到隐藏的日历问题用户调整浏览器的大小。

我真正需要的是在CalendarInstance上有一个方法可以重绘/重新计算所有内容，但只在客户端进行。

Answer 1

对于那些感兴趣的人，我找到了一个解决方法。

基本上，我没有显示/隐藏标签，而是更像是旋转木马（或滑块）。我基本上允许所有选项卡都可见，并用容器包装它们。我设置容器的高度并隐藏溢出，所以你实际上只能一次看到一个。根据我在问题中描述的内容，这是一个不那么极端的想法。我不能说为什么这不起作用，但是这个解决方案确实如此，但是这个想法基本上是相同的：不要隐藏DOM中的日历，只是让其中一个日历对用户可见;这样做可以让SP JavaScript对事件项进行正确的计算。

我写了一个快速的fiddle，它显示了我所做的简单版本（我的代码有点复杂）。这是基本的DOM结构：

<body>
    <ul>
        <li data-tabid="tab1">Tab One</li>
        <li data-tabid="tab2">Tab Two</li>
        <li data-tabid="tab3">Tab Three</li>
    </ul>
    <div id="container">
        <div id="slider">
            <div id="tab1">Tab 1</div>
            <div id="tab2">Tab 2</div>
            <div id="tab3">Tab 3</div>
        </div>
    </div>
</body>

隐藏时加载日历Web部件导致事件无法正确呈现

1 个答案: