调整包含事件而不是事件的DIV事件段"调整大小"

时间:2012-05-15 16:57:19

标签: fullcalendar

快速背景:

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

现在,所有上述工作都已成功。

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

我的多层问题

  1. 重新呈现日历上的所有事件,以便无论点击的“级别3”如何,周和事件都可见。
  2. 一旦被重新渲染而没有丢失“3级”。单击动作,如果我使用$('#calendar1')就会消失.fulcCalendar('rerenderEvents');并且不会丢失在尝试重新报告事件之前显示的“3级”数据。

  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函数来推动自上而下应该可以工作但是现在我不知道如何做到这一点,更不用说优雅了。

    任何想法都会受到欢迎 感谢

1 个答案:

答案 0 :(得分:0)

所以有了很多帮助,这就是我提出来的,它就像一个魅力。我将此添加到日历初始化

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.');
            }
      });
    }                
}