Question

我正在使用fullcalendar v2.4，我知道选项scrollTime可用于滚动以使agendaDay滚动到某个时间，如下所示：

$('#calendarday').fullCalendar({
    header: {
  },
   weekends: true, //  show Saturdays and Sundays
   defaultView: 'agendaDay',
   events: entries, 
   scrollTime: "15:00:00",
});

现在我想滚动到当天的第一个事件：这意味着我使用jquery在agendaDay中动态获取第一个事件的开始时间：

var firstEventTime = $("div.fc-time:first> span:nth-child(1)").text() + ":00";

这找到第一个div＆＃34; fc-time＆＃34;然后选择内部跨度中的开始时间（格式为H：mm）。

但是将firstEventTime放入滚动

是行不通的

$('#calendarday').fullCalendar({
    header: {
  },
   weekends: true, //  show Saturdays and Sundays
   defaultView: 'agendaDay',
   events: entries, 
   scrollTime: firstEventTime,
 });

这有可能吗？

Answer 1

我可以使用eventAfterAllRender选项在agendaDay视图中滚动到第一天的第一个事件。

请注意，这是查看插件生成的内部元素，因此如果作者在下一版本中更改它们，则可能必须更新此方法。

我还使用了一个快捷方式并使用了Ariel Flesler的jQuery scrollTo插件，因为我已经在使用它了。如果您愿意，可以使用自己的javascript获得相同的结果。

jQuery scrollTo插件网址

eventAfterAllRender: function(view){
    if('agendaDay'===view.name){
            if($('.fc-time-grid-event').length>0){
                var renderedEvents = $('div.fc-event-container a');
                var firstEventOffsetTop = renderedEvents&&renderedEvents.length>0?renderedEvents[0].offsetTop:0;
                $('div.fc-scroller').scrollTo(firstEventOffsetTop+'px');
            }
        }            
    },

Answer 2

由于您有条目数组，只需使用该数组中的第一个事件。

    //First we get todays events, this is not very detailed but should work

    var events = entries;
    var today = new Date().toJSON().slice(0,10);


    events
    .filter(function (el) {  
        return el.start.split('T')[0] == today;
    })
    .sort(function(a, b) {return new Date(a.start) - new Date(b.start)});


    /*then we initialize the */

    $('#calendarday').fullCalendar({
        header: {
      },
       weekends: true, //  show Saturdays and Sundays
       defaultView: 'agendaDay',
       events: entries, 
       scrollTime: events[0].start.split('T')[1]
     });

假设您的start时间为2010-01-09T12:30:00格式

Answer 3

这适用于星期和日视图：

eventAfterAllRender: function(view){
            if ($("#calendar .fc-event").length > 0) {
                var op = 999999;
                $("#calendar .fc-content-col").each(function(index){
                    if($(this).find('.fc-event:first').length > 0){
                        var ot = $(this).find('.fc-event:first').position().top;
                        if(ot < op){
                            op=ot;
                        }
                    }
                });
                if( op < 999999){
                    $("#calendar .fc-scroller").animate({
                        scrollTop: op
                    }, 250);
                }
            }
        }

Answer 4

  this.scrollPrimerEvento = function () {
      window.setTimeout(function () {

          var renderedEvents = null;

          if (angular.element('.fc-time-grid-event').length > 0) {

              renderedEvents = angular.element('div.fc-event-container a');
              var firstEventOffsetTop = renderedEvents && renderedEvents.length > 0 ? angular.element('div.fc-event-container a').sort(function (a, b) { if (Number(angular.element(a).css('top').replace('px', '')) < Number(angular.element(b).css('top').replace('px', ''))) { return -1; } if (Number(angular.element(a).css('top').replace('px', '')) > Number(angular.element(b).css('top').replace('px', ''))) { return 1; } return 0; })[0].offsetTop - 25 : 0;

              angular.element('div.fc-scroller').animate({ scrollTop: firstEventOffsetTop }, 500);
          }

          if (angular.element('.fc-timeline-event').length > 0) {
              renderedEvents = angular.element('div.fc-event-container a');
              var firstEventOffsetLeft = renderedEvents && renderedEvents.length > 0 ? angular.element('div.fc-event-container a').sort(function (a, b) { if (Number(angular.element(a).css('left').replace('px', '')) < Number(angular.element(b).css('left').replace('px', ''))) { return -1; } if (Number(angular.element(a).css('left').replace('px', '')) > Number(angular.element(b).css('left').replace('px', ''))) { return 1; } return 0; })[0].offsetLeft - 25 : 0;

              angular.element(angular.element('div.fc-scroller')[3]).animate({ scrollLeft: firstEventOffsetLeft }, 500);
          }

      }, 1000);
  };

Answer 5

FullCalendar 3.2.0

eventAfterAllRender: function(view){
        if("agendaDay"===view.name){
            if($(".fc-event").length>0){
                var firstEvent = $(".fc-event:first");
                view.hardSetScroll({top:firstEvent.offset().top});
            }
        }          
    }

fullcalendar agendaDay滚动到第一个事件

5 个答案: