Javascript FullCalendar计划程序滚动到当前日期_Javascript_Jquery_Scroll_Fullcalendar

Javascript FullCalendar计划程序滚动到当前日期

javascript jquery scroll fullcalendar

Javascript FullCalendar计划程序滚动到当前日期,javascript,jquery,scroll,fullcalendar,Javascript,Jquery,Scroll,Fullcalendar,我正在使用具有1年视图的调度程序。所以我可以通过水平滚动查看从1月1日到12月31日的每一天小问题是，水平滚动始终在初始位置一直向左，所以它总是显示1月1日。有没有办法让它滚动到初始加载时的当前日期或月份我想通过jQuery查找当前日期并向左滚动到元素来浏览它。但是，标题似乎与滚动容器是分开的，因此不确定该如何工作。我昨天遇到了同样的问题，并发现以下解决方案适用于fullCalendar 2.6.1： // Scroll the calendar to a specific event sc

我正在使用具有1年视图的调度程序。所以我可以通过水平滚动查看从1月1日到12月31日的每一天

小问题是，水平滚动始终在初始位置一直向左，所以它总是显示1月1日。有没有办法让它滚动到初始加载时的当前日期或月份

我想通过jQuery查找当前日期并向左滚动到元素来浏览它。但是，标题似乎与滚动容器是分开的，因此不确定该如何工作。

我昨天遇到了同样的问题，并发现以下解决方案适用于fullCalendar 2.6.1：

// Scroll the calendar to a specific event
scrollToEvent: function(event) {
    // Get the "scroller" divs for header and content
    var headerScroller = $('.fc-time-area.fc-widget-header > .fc-scrollpane > div');
    var contentScroller = $('.fc-time-area.fc-widget-content > .fc-scrollpane > div');

    // Get the destination date
    // For some reason event.start.format('YYYY-MM-DDTHH:mm:ss') will be formatted 
    // as 'YYYY-MM-DDAHH:mm:ss', hence the "replace" hack.
    // Maybe I have to dig more into moment js...
    var dateSelector = 'th[data-date="' + event.start.format('YYYY-MM-DDTHH:mm:ss').replace('A', 'T') + '"]';
    var date = $(dateSelector).last()[0];

    // Scroll to date
    headerScroller.scrollLeft(date.offsetLeft);
    contentScroller.scrollLeft(date.offsetLeft);

    // To scroll vertically to a specific resource (if any)...
    // Get the destination resource
    var resourceSelector = 'tr[data-resource-id="' + event.resourceId + '"]';
    var resource = $(resourceSelector).last()[0];

    // Scroll to resource
    contentScroller.scrollTop(resource.offsetTop);
}

我已经从FullCalendar的eventAfterAllRender函数调用了上述函数，使用一个标志只检查第一次渲染。不知道有没有更好的方法

只需滚动到日期的更简单代码：

scrollToDate: function(date) {
    // Get the "scroller" (no need to distinguish between header and content so get both)
    var scroller = $('.fc-time-area > .fc-scrollpane > div');

    // Get the destination date
    var selector = 'th[data-date="' + date.format('YYYY-MM-DDTHH:mm:ss') + '"]';
    var date = $(selector).last()[0];

    // Scroll to date
    scroller.scrollLeft(date.offsetLeft);
}

希望这有帮助这是我关于堆栈溢出的第一篇文章。

就在昨天，我遇到了同样的问题，并发现以下解决方案适用于fullCalendar 2.6.1：

// Scroll the calendar to a specific event
scrollToEvent: function(event) {
    // Get the "scroller" divs for header and content
    var headerScroller = $('.fc-time-area.fc-widget-header > .fc-scrollpane > div');
    var contentScroller = $('.fc-time-area.fc-widget-content > .fc-scrollpane > div');

    // Get the destination date
    // For some reason event.start.format('YYYY-MM-DDTHH:mm:ss') will be formatted 
    // as 'YYYY-MM-DDAHH:mm:ss', hence the "replace" hack.
    // Maybe I have to dig more into moment js...
    var dateSelector = 'th[data-date="' + event.start.format('YYYY-MM-DDTHH:mm:ss').replace('A', 'T') + '"]';
    var date = $(dateSelector).last()[0];

    // Scroll to date
    headerScroller.scrollLeft(date.offsetLeft);
    contentScroller.scrollLeft(date.offsetLeft);

    // To scroll vertically to a specific resource (if any)...
    // Get the destination resource
    var resourceSelector = 'tr[data-resource-id="' + event.resourceId + '"]';
    var resource = $(resourceSelector).last()[0];

    // Scroll to resource
    contentScroller.scrollTop(resource.offsetTop);
}

我已经从FullCalendar的eventAfterAllRender函数调用了上述函数，使用一个标志只检查第一次渲染。不知道有没有更好的方法

只需滚动到日期的更简单代码：

scrollToDate: function(date) {
    // Get the "scroller" (no need to distinguish between header and content so get both)
    var scroller = $('.fc-time-area > .fc-scrollpane > div');

    // Get the destination date
    var selector = 'th[data-date="' + date.format('YYYY-MM-DDTHH:mm:ss') + '"]';
    var date = $(selector).last()[0];

    // Scroll to date
    scroller.scrollLeft(date.offsetLeft);
}

希望这有帮助这是我关于堆栈溢出的第一篇文章。

针对2.6.1版

eventAfterAllRender: function (view) {
    var viewStartDate;
    if (view.name == 'yearView') {
        viewStartDate = new Date(new Date().getFullYear(), 0, 1);
    }
    else if (view.name == 'twoMonthView' || view.name == 'oneMonthView') {
        viewStartDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
    }

    if (view.name == 'oneWeekView') {
        $('.fc-body .fc-time-area .fc-scrollpane').children('div').scrollLeft(4 * 12 * (moment().weekday() - 1) * view.options.slotWidth);
    }
    else {
        var dateDiff = (new Date().setHours(0, 0, 0, 0) - viewStartDate) / (1000 * 60 * 60 * 24);

        $('.fc-body .fc-time-area .fc-scrollpane').children('div').scrollLeft(Math.round(dateDiff) * view.options.slotWidth);
    }
}

var dateDiff = (new Date().setHours(0, 0, 0, 0) - viewStartDate) / (1000 * 60 * 60 * 24);

$('.fc-body .fc-time-area .fc-scrollpane').children('div').scrollLeft(Math.round(dateDiff) * view.options.slotWidth);

这是版本2.6.1中的主要部分

eventAfterAllRender: function (view) {
    var viewStartDate;
    if (view.name == 'yearView') {
        viewStartDate = new Date(new Date().getFullYear(), 0, 1);
    }
    else if (view.name == 'twoMonthView' || view.name == 'oneMonthView') {
        viewStartDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
    }

    if (view.name == 'oneWeekView') {
        $('.fc-body .fc-time-area .fc-scrollpane').children('div').scrollLeft(4 * 12 * (moment().weekday() - 1) * view.options.slotWidth);
    }
    else {
        var dateDiff = (new Date().setHours(0, 0, 0, 0) - viewStartDate) / (1000 * 60 * 60 * 24);

        $('.fc-body .fc-time-area .fc-scrollpane').children('div').scrollLeft(Math.round(dateDiff) * view.options.slotWidth);
    }
}

var dateDiff = (new Date().setHours(0, 0, 0, 0) - viewStartDate) / (1000 * 60 * 60 * 24);

$('.fc-body .fc-time-area .fc-scrollpane').children('div').scrollLeft(Math.round(dateDiff) * view.options.slotWidth);

在版本3.0+中，HTML的结构不同。要滚动的元素已更改

$('.fc-body .fc-time-area .fc-scroller-clip .fc-scroller').scrollLeft(Math.round(dateDiff) * view.options.slotWidth)

也许可以把它减少到

$('.fc-scroller').scrollLeft(Math.round(dateDiff) * view.options.slotWidth)

对于版本2.6.1

eventAfterAllRender: function (view) {
    var viewStartDate;
    if (view.name == 'yearView') {
        viewStartDate = new Date(new Date().getFullYear(), 0, 1);
    }
    else if (view.name == 'twoMonthView' || view.name == 'oneMonthView') {
        viewStartDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
    }

    if (view.name == 'oneWeekView') {
        $('.fc-body .fc-time-area .fc-scrollpane').children('div').scrollLeft(4 * 12 * (moment().weekday() - 1) * view.options.slotWidth);
    }
    else {
        var dateDiff = (new Date().setHours(0, 0, 0, 0) - viewStartDate) / (1000 * 60 * 60 * 24);

        $('.fc-body .fc-time-area .fc-scrollpane').children('div').scrollLeft(Math.round(dateDiff) * view.options.slotWidth);
    }
}

var dateDiff = (new Date().setHours(0, 0, 0, 0) - viewStartDate) / (1000 * 60 * 60 * 24);

$('.fc-body .fc-time-area .fc-scrollpane').children('div').scrollLeft(Math.round(dateDiff) * view.options.slotWidth);

这是版本2.6.1中的主要部分

eventAfterAllRender: function (view) {
    var viewStartDate;
    if (view.name == 'yearView') {
        viewStartDate = new Date(new Date().getFullYear(), 0, 1);
    }
    else if (view.name == 'twoMonthView' || view.name == 'oneMonthView') {
        viewStartDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
    }

    if (view.name == 'oneWeekView') {
        $('.fc-body .fc-time-area .fc-scrollpane').children('div').scrollLeft(4 * 12 * (moment().weekday() - 1) * view.options.slotWidth);
    }
    else {
        var dateDiff = (new Date().setHours(0, 0, 0, 0) - viewStartDate) / (1000 * 60 * 60 * 24);

        $('.fc-body .fc-time-area .fc-scrollpane').children('div').scrollLeft(Math.round(dateDiff) * view.options.slotWidth);
    }
}

var dateDiff = (new Date().setHours(0, 0, 0, 0) - viewStartDate) / (1000 * 60 * 60 * 24);

$('.fc-body .fc-time-area .fc-scrollpane').children('div').scrollLeft(Math.round(dateDiff) * view.options.slotWidth);

在版本3.0+中，HTML的结构不同。要滚动的元素已更改

$('.fc-body .fc-time-area .fc-scroller-clip .fc-scroller').scrollLeft(Math.round(dateDiff) * view.options.slotWidth)

也许可以把它减少到

$('.fc-scroller').scrollLeft(Math.round(dateDiff) * view.options.slotWidth)

你解决过这个问题吗？@fr0sty是的，我只是写了一些计算来得到偏移量并设置它。让我贴出来。@fr0sty我贴出了答案。好像有人找到了另一个解决方案，你也可以试试。你解决过这个问题吗？@fr0sty是的，我只是写了一些计算来得到偏移量并设置它。让我贴出来。@fr0sty我贴出了答案。似乎其他人找到了另一个解决方案，所以您也可以尝试。无法让您的示例工作，使用简单的代码不会发生任何事情。即使编辑了一点。eventAfterAllRender:functionview{var scroller=$'.fc time area>.fc scrollpane>div'；//获取目标日期变量选择器='th[data date=2017-02-12]'；变量日期=$selector.last[0]；//滚动到日期滚动器.scrollLeftdate.offsetLeft；}无法使示例正常工作，使用简单的代码不会发生任何事情。即使编辑了一点。eventAfterAllRender:functionview{var scroller=$'.fc time area>.fc scrollpane>div'；//获取目标日期变量选择器='th[data date=2017-02-12]'；变量日期=$selector.last[0]；//滚动到日期滚动器.scrollLeftdate.offsetLeft；}这里没有发生任何事情，我的视图名是timelineYear，所以我更改了它。使用版本3.1.0。如果手动更改viewStartDate值，我可以看到dateDiff值会发生更改。但最后一行似乎没有找到anything@fr0sty您安装了jQuery和Moment.js吗？我使用的是2.6.1版，不确定结构是否更改。但是.fc滚动窗格中的div是滚动的。单元格的大小是固定的view.options.slotWidth是80px。我只是计算从1月1日开始到今天的天数，乘以宽度，即44天*80px=3520px，然后向左滚动该像素量。是的，但看起来他们改变了3.1.0版本中的所有类。找不到使用scrollLeft的正确类。@fr0sty您可以在Chrome浏览器的inspect元素中检查HTML以找出结构。我查了一下，它是$'.fc scroller'。ScrollLeft200感谢您再次查看它。我在你的代码行后面放了一个警报。调度程序很好地滚动到该位置。但当我关闭警报框时，它会再次滚动回1月1日。似乎在eventAfterAllRender进程之后调用了另一个进程。这里没有发生任何事情，我的视图名称是timelineYear，所以我更改了它。使用版本3.1.0。如果手动更改viewStartDate值，我可以看到dateDiff值会发生更改。但最后一行似乎没有找到anything@fr0sty您安装了jQuery和Moment.js吗？我使用的是2.6.1版，不确定结构是否更改。但是.fc滚动窗格中的div是滚动的。大小

e单元是固定的view.options.slotWidth是80px。我只是计算从1月1日开始到今天的天数，乘以宽度，即44天*80px=3520px，然后向左滚动该像素量。是的，但看起来他们改变了3.1.0版本中的所有类。找不到使用scrollLeft的正确类。@fr0sty您可以在Chrome浏览器的inspect元素中检查HTML以找出结构。我查了一下，它是$'.fc scroller'。ScrollLeft200感谢您再次查看它。我在你的代码行后面放了一个警报。调度程序很好地滚动到该位置。但当我关闭警报框时，它会再次滚动回1月1日。似乎在eventAfterAllRender进程之后调用了另一个进程。