调整包含事件而不是事件“调整大小”的 DIV 事件段答案

【问题标题】：Adjusting the DIV event segments that hold the events and not an event "resize"调整包含事件而不是事件“调整大小”的 DIV 事件段
【发布时间】：2012-05-15 16:57:18
【问题描述】：

快速背景：

我正在为美国的几个地区制作带薪休假 (PTO) 日历。
我正在使用 Zend 框架、jquery、fullcalendar、www.adipalaz.com 的 Expand/All 以及自定义的“更多...”链接
我有 3 个不同的 jquery 选项卡，每个选项卡上都有一个新的日历实例（级别 1）
每个选项卡都有一个与 PTO 相关的不同主题，有 3 个手风琴部分
每个选项卡的一个折叠部分都有一个过滤器来过滤日历上的结果
每个选项卡的一个手风琴部分上有一个日历（第 2 级）
第一个日历通过 JSON 调用/提要从两个不同的事件源中提取
此日历根据地区拉取 PTO
区域显示为全天事件
每个“事件”都是使用 www.adipalaz.com 的展开/折叠（级别 3）
当使用 www.adipalaz.com 展开或折叠每个“事件”时，AJAX 调用会拉取与该区域相关的所有 PTO
每个扩展的 AJAX 调用都会隐藏有关额外信息的详细信息，除非单击自定义“更多...”链接（级别 4）
每个自定义更多链接也有一些操作（5 级）

现在，以上所有方法都有效。

我有一个处理“3 级”及以上的 .click 函数。这个 .click 函数的一部分是 AJAX 调用，另一部分获取并设置 z-index，以便我的“4 级”数据弹出所有其他未扩展的“3 级”数据。
到目前为止，该功能还不错。问题是我的所有基础数据仍然需要可见。

我的多层问题

重新渲染日历上的所有事件，以便无论单击“级别 3”如何，都可以看到周和事件
一旦重新渲染不会丢失“级别 3”.click 动作，如果我使用 $('#calendar1').fullCalendar('rerenderEvents');并且不会丢失在尝试重新呈现事件之前显示的“级别 3”数据。

我有图片可以直观地解释我的问题，但由于这是我的第一篇文章，我无法上传它们。如果您知道如何帮助我并且需要查看图片，请告诉我。

目前这就是我对这个问题的全部了解：

//POPS THE OPEN ITEM UP IN Z-INDEX
$(uniqueID).parent().parent().css('z-index',9);

//THIS FINDS OUT WHAT TO ADD
changeSizeOfDiv = $(uniqueID).next('.fc-event-names').html(data).outerHeight()
     + $('.fc-week' + level + ' .fc-sun').outerHeight();

//THIS ALTERS THE ROW SIZE
$('tr.fc-week' + level).css('height',changeSizeOfDiv);

我还没有弄清楚如何动态更新以下行“top：#px;”单击一个区域后。我认为通过使用 changeSizeOfDiv 函数将自上而下推下去应该可以工作，但目前我不知道如何做到这一点，更不用说优雅地做到这一点了。

欢迎提出任何想法。
谢谢

【问题讨论】：

要清除您的问题，您可以使用图片服务（例如 tinypic.com）或类似 jsfiddle.net 的代码游乐场。在帖子的编辑中提供您的图片，以便我们更好地理解任务。

标签： fullcalendar

【解决方案1】：

所以在很多帮助下，这就是我想出的，它就像一个魅力。我将此添加到日历初始化中

eventClick: function(event, element) {
    if (typeof event.originalTitle == 'undefined') {
        event.originalTitle = event.title;        
    }

    if (event.loaded) {
        event.title = event.originalTitle;
        event.loaded = false;
        $('#calendar1').fullCalendar('updateEvent',event);
    } else {
        $.ajax({
            url: regionNamesUrl + getFilterUrlPart(event.segmentDate,event.region),
            dataType: 'html',
            cache: false,
            success: function(data){                                
                event.title = event.originalTitle + '<br/><br/>' +data;
                event.loaded = true;

                $('#calendar1').fullCalendar('updateEvent',event);

                clicker(event,'approved');
                clicker(event,'cancelled');
            },
            error: function(data){
                alert('An error has occurred retrieving data from the server.  Try reloading the page.');
            }
      });
    }                
}

【讨论】：