我使用1年視圖的計劃程序。所以我可以從1月1日到12月31日每天通過水平滾動查看。FullCalendar計劃程序滾動到當前日期
小問題是水平滾動總是在初始位置(一直左),所以它總是顯示1月1日。有沒有辦法讓它滾動到當前日期或月初始加載?
我正在尋找通過查找當前日期和ScrollLeft
到元素的jQuery滾動。但看起來標題與滾動容器是分開的,所以不知道如何工作。
我使用1年視圖的計劃程序。所以我可以從1月1日到12月31日每天通過水平滾動查看。FullCalendar計劃程序滾動到當前日期
小問題是水平滾動總是在初始位置(一直左),所以它總是顯示1月1日。有沒有辦法讓它滾動到當前日期或月初始加載?
我正在尋找通過查找當前日期和ScrollLeft
到元素的jQuery滾動。但看起來標題與滾動容器是分開的,所以不知道如何工作。
對於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);
}
}
版這是在版本2.6.1
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)
這裏沒有任何事情發生,我的視圖名稱是timelineYear,所以我改變了。使用版本3.1.0。我可以看到,如果我手動更改viewStartDate值,則dateDiff值會更改。但似乎最後一行沒有找到任何東西 – fr0sty
@ fr0sty你安裝了jQuery和Moment.js?我使用的是2.6.1版本,不確定結構是否改變。但'.fc-scrollpane'裏的'div'是滾動的。單元格的大小是固定的'view.options.slotWidth'就是'80px'。我只計算從開始(1月1日)到今天的天數,並按寬度(即44天* 80px = 3520px)倍數並向左滾動該像素量。 – Jack
是的,但它看起來像他們改變了3.1.0版本中的所有類。無法找到正確的類以使用scrollLeft。 – fr0sty
我遇到了同樣的問題,就在昨天,發現如下解決方案(與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);
}
希望這有助於(這是我對堆棧溢出的第一篇文章)。
不能讓你的例子工作,簡單的代碼沒有任何反應。即使編輯了一下。 eventAfterAllRender: function(view){ var scroller = $('.fc-time-area > .fc-scrollpane > div'); // Get the destination date var selector = 'th[data-date="2017-02-12"]'; var date = $(selector).last()[0]; // Scroll to date scroller.scrollLeft(date.offsetLeft); }
–
fr0sty
你有沒有解決這個問題? – fr0sty
@ fr0sty是的,我只是寫了一些計算來獲得偏移量並設置它。讓我發佈它。 – Jack
@ fr0sty我發佈了答案。看起來像別人找到了另一種解決方案,所以你也可以嘗試。 – Jack