完整的日历议程每天滚动到第一个事件

Question

我使用的是fullcalendar v2.4，我知道选项scrollTime可以用来滚动，让议程滚动到一定的时间，像这样:

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

现在我想滚动到第一个事件的一天:这意味着我动态获取第一个事件的开始时间在议程与jquery:

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

查找第一个div "fc-time"，然后在内部span中选择开始时间(格式为H:mm)。

但是将firstEventTime放入滚动

是行不通的

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

这是可能的吗?

Answer 1

通过使用eventAfterAllRender选项，我可以在议程视图中滚动到一天的第一个事件。

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

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

jQuery scrollTo插件URL

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

既然已经有了entries数组，那么就只使用该数组中的第一个事件。

    //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});
            }
        }          
    }