Jquery 周视图和日视图上的完整日历当前时间行

据我所知，根据谷歌代码上的这张发行票，有一个soloution漂浮在周围，但我似乎找不到它

我想知道是否有人知道如何在日历上显示

function setTimeline(view) {
    var parentDiv = jQuery(".fc-agenda-slots:visible").parent();
    var timeline = parentDiv.children(".timeline");
    if (timeline.length == 0) { //if timeline isn't there, add it
        timeline = jQuery("<hr>").addClass("timeline");
        parentDiv.prepend(timeline);
    }

    var curTime = new Date();

    var curCalView = jQuery("#calendar").fullCalendar('getView');
    if (curCalView.visStart < curTime && curCalView.visEnd > curTime) {
        timeline.show();
    } else {
        timeline.hide();
        return;
    }

    var curSeconds = (curTime.getHours() * 60 * 60) + (curTime.getMinutes() * 60) + curTime.getSeconds();
    var percentOfDay = curSeconds / 86400; //24 * 60 * 60 = 86400, # of seconds in a day
    var topLoc = Math.floor(parentDiv.height() * percentOfDay);

    timeline.css("top", topLoc + "px");

    if (curCalView.name == "agendaWeek") { //week view, don't want the timeline to go the whole way across
        var dayCol = jQuery(".fc-today:visible");
        var left = dayCol.position().left + 1;
        var width = dayCol.width()-2;
        timeline.css({
            left: left + "px",
            width: width + "px"
        });
    }

}

在css中：

.timeline {
    position: absolute;
    left: 59px;
    border: none;
    border-top: 1px solid red;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 999;
}

只在“周视图”上尝试了这个，因为我只使用了它

祝你好运

编辑：

要在白天更新时间线，您可以在viewDisplay中尝试以下操作：

viewDisplay: function(view) {
            if(first){
                first = false;
            }else {
                window.clearInterval(timelineInterval);
            }
            timelineInterval = window.setInterval(setTimeline, 300000);
            try {
                setTimeline();
            } catch(err) {}
        },

---

您需要在标记顶部设置first=true。这将每300秒=5分钟移动一次时间线。你可以降低它，如果你需要它更平滑..

ManguestWesty的解决方案工作得很好，但是它不考虑MultCalpand选项MimTimes和Max Times。如果设置了时间线，则时间线放错了位置

要解决此问题，请将Magnus Winter代码中的curSeconds和percentOfDay定义替换为：

var curSeconds = ((curTime.getHours() - curCalView.opt("minTime")) * 60 * 60) + (curTime.getMinutes() * 60) + curTime.getSeconds();
var percentOfDay = curSeconds / ((curCalView.opt("maxTime") - curCalView.opt("minTime")) * 3600); // 60 * 60 = 3600, # of seconds in a hour

---

Martin Pabst提出了一个很好的观点，但如果将min和max time设置为字符串（例如“07:30”），则不起作用

要解决这个问题：

function strTimeToMinutes(str_time) {
  var arr_time = str_time.split(":");
  var hour = parseInt(arr_time[0]);
  var minutes = parseInt(arr_time[1]);
  return((hour * 60) + minutes);
}

并将其定义替换为：

var calMinTimeInMinutes = strTimeToMinutes(curCalView.opt("minTime"));
var calMaxTimeInMinutes = strTimeToMinutes(curCalView.opt("maxTime"));

var curSeconds = (( ((curTime.getHours() * 60) + curTime.getMinutes()) - calMinTimeInMinutes) * 60) + curTime.getSeconds();                       
var percentOfDay = curSeconds / ((calMaxTimeInMinutes - calMinTimeInMinutes) * 60);

---

很棒的解决方案，帮了我很大的忙，谢谢大家！这些是使此解决方案与新的FullCalendar v2配合使用所需的更改

更改行：

if（curCalView.visStartcurTime）{

至：

if（curCalView.intervalStartcurTime）{

并且更喜欢使用：

viewRender:function（view）{

---

伟大的解决方案不是：

viewsdisplay:function（view）{

而是将线程中的所有更改累积起来，以使其在fullcalendar-2.1.0-beta1中正常工作，并进行了一些小的更改，使其适合我

到

否则根本不会呈现任何时间线。我猜完整日历更改了这一点

---

然后，我有一个问题，在日间视图行左位置，所以我改变了

timeline.css("top", topLoc + "px");

到

---

此外，agendaWeek中的时间线宽度出现错误，因此我进行了更改

var width = dayCol.width() - 2;

到

---

我没有解释为什么会这样，只是修改了它，使它看起来合适。

在使用我添加的自定义最小和最大时间时，使其与2.2.7版兼容

var slotsDiv  = $('.fc-slats:visible');

排队前

var parentDiv = $('.fc-slats:visible').parent();

然后换了线

var topLoc = Math.floor(parentDiv.height() * percentOfDay);

到

---

通过这种方式，函数使用正确的div height来计算时间线位置。

我为2.3.2版提出了这个解决方案。它基于前面的示例

    var timelineIntervalPromise;
    var renderCurrentTimeline = function(view, element, anchor) {
      var currentDate = moment().tz(security.currentUser.timeZone.id);
      var intervalStart = view.intervalStart.clone().tz(security.currentUser.timeZone.id)
        .year(view.intervalStart.year())
        .month(view.intervalStart.month())
        .day(view.intervalStart.day())
        .time('00:00:00');
      var intervalEnd = view.intervalEnd.clone().tz(security.currentUser.timeZone.id)
        .year(view.intervalEnd.year())
        .month(view.intervalEnd.month())
        .day(view.intervalEnd.day())
        .time('00:00:00');

      if (view.name === 'month' || !currentDate.isBetween(intervalStart, intervalEnd)) {
        return;
      }

      var timeGrid = element.find('.fc-time-grid');
      var timeline = angular.element('<hr class="timeline" />');
      timeGrid.find('hr.timeline').remove();
      timeGrid.prepend(timeline);

      var calMinTimeInMinutes = moment.duration(view.opt('minTime')).asMinutes();
      var calMaxTimeInMinutes = moment.duration(view.opt('maxTime')).asMinutes();
      var curSeconds = (( ((currentDate.hours() * 60) + currentDate.minutes()) - calMinTimeInMinutes) * 60) + currentDate.seconds();
      var percentOfDay = curSeconds / ((calMaxTimeInMinutes - calMinTimeInMinutes) * 60);
      var topLoc = Math.floor(timeGrid.height() * percentOfDay);
      var timeCol = element.find('.fc-time:visible');
      timeline.css({top: topLoc, left: timeCol.outerWidth(true)});
      if (angular.isUndefined(anchor) || anchor === true) {
        timeGrid.parent().scrollTop(timeline.offset().top);
      }

      if (view.name === 'agendaWeek') { // Week view, don't want the timeline to go the whole way across.
        var dayCol = element.find('.fc-time-grid .fc-bg .fc-today');
        var left = dayCol.position().left + 1;
        var width = dayCol.width() + 1;
        timeline.css({left: left, width: width});
      }

      if (angular.isDefined(timelineIntervalPromise)) {
        $interval.cancel(timelineIntervalPromise);
      }
      timelineIntervalPromise = $interval(function() {
        var view = uiCalendarConfig.calendars.eventCalendar.fullCalendar('getView');
        renderCurrentTimeline(view, view.el, false);
      }, 300000);
    };

var时间间隔承诺；
var renderCurrentTimeline=函数（视图、元素、锚定）{
var currentDate=moment（）.tz（security.currentUser.timeZone.id）；
var intervalStart=view.intervalStart.clone（）.tz（security.currentUser.timeZone.id）
.year（view.intervalStart.year（））
.month（view.intervalStart.month（））
.day（view.intervalStart.day（））
.时间（'00:00:00'）；
var intervalEnd=view.intervalEnd.clone（）.tz（security.currentUser.timeZone.id）
.year（view.intervalEnd.year（））
.month（view.intervalEnd.month（））
.day（view.intervalEnd.day（））
.时间（'00:00:00'）；
if（view.name=='month'| |！currentDate.isBevering（intervalStart，intervalEnd））{
返回；
}
var timeGrid=element.find（'.fc timeGrid'）；
var timeline=angular.element（“
”）；
timeGrid.find（'hr.timeline'）.remove（）；
时间网格。预结束（时间线）；
var calMinTimeInMinutes=moment.duration（view.opt（'minTime'））.asMinutes（）；
var calMaxTimeInMinutes=moment.duration（view.opt（'maxTime'））.asMinutes（）；
var curSeconds=（（（currentDate.hours（）*60）+currentDate.minutes（））-calMinTimeInMinutes）*60）+currentDate.seconds（）；
var percentOfDay=游标秒/（（calMaxTimeInMinutes-calMinTimeInMinutes）*60）；
var topLoc=数学地板（timeGrid.height（）*日百分比）；
var timeCol=element.find（'.fc time:visible'）；
css（{top:topLoc，left:timeCol.outerWidth（true）}）；
如果（角度.isUndefined（锚定）| |锚定===真）{
timeGrid.parent（）.scrollTop（timeline.offset（）.top）；
}
如果（view.name==='agendaWeek'）{//Week视图，则不希望时间线贯穿整个过程。
var dayCol=element.find（'.fc time grid.fc bg.fc today'）；
var left=dayCol.position（）.left+1；
变量宽度=dayCol.width（）+1；
css（{left:left，width:width}）；
}
if（角度定义（时间间隔承诺））{
$interval.cancel（timelineIntervalPromise）；
}
timelineIntervalPromise=$interval（函数（）{
var view=uiCalendarConfig.calendars.eventCalendar.fullCalendar（'getView'）；
renderCurrentTimeline（view、view.el、false）；
}, 300000);
};

它已在新版FullCalendar（2.6.0）中解决

---

谢谢，这很有魅力，如果用户停留在同一页面上，这会随着时间的推移而更新吗？还是只停留在当前加载的时间。唯一不起作用的是时区，它认为现在是下午3:22，而现在是4:22。如果新日期（）给你正确的时间我想你应该没事吧？！工作得很好。但是时区有个问题：（不知道如何解决这个问题，在2.6.0版中已经解决了。我想使用你的解决方案，但我是angular的新手，你能在这里粘贴一些简单的用法示例吗？谢谢。首先，我用当前代码更新了时间线生成。很抱歉，Dragomir没有简单的用法示例。我必须粘贴整个指令，这是正确的。）ry软件，所以我不能这样做。简单地说，你必须将此函数使用的所有需求注入控制器，例如，矩、$interval和其他。然后在fullcalendar viewRender事件中，只调用此函数。好的，明白了。非常感谢Vladimir。对于angular用户，这是最好的解决方案。@VladimírGorej我不得不说通用电气

var width = dayCol.width() - 2;

var width = dayCol.width() + 1;

var slotsDiv  = $('.fc-slats:visible');

var parentDiv = $('.fc-slats:visible').parent();

var topLoc = Math.floor(parentDiv.height() * percentOfDay);

var topLoc = Math.floor(slotsDiv.height() * percentOfDay);

    var timelineIntervalPromise;
    var renderCurrentTimeline = function(view, element, anchor) {
      var currentDate = moment().tz(security.currentUser.timeZone.id);
      var intervalStart = view.intervalStart.clone().tz(security.currentUser.timeZone.id)
        .year(view.intervalStart.year())
        .month(view.intervalStart.month())
        .day(view.intervalStart.day())
        .time('00:00:00');
      var intervalEnd = view.intervalEnd.clone().tz(security.currentUser.timeZone.id)
        .year(view.intervalEnd.year())
        .month(view.intervalEnd.month())
        .day(view.intervalEnd.day())
        .time('00:00:00');

      if (view.name === 'month' || !currentDate.isBetween(intervalStart, intervalEnd)) {
        return;
      }

      var timeGrid = element.find('.fc-time-grid');
      var timeline = angular.element('<hr class="timeline" />');
      timeGrid.find('hr.timeline').remove();
      timeGrid.prepend(timeline);

      var calMinTimeInMinutes = moment.duration(view.opt('minTime')).asMinutes();
      var calMaxTimeInMinutes = moment.duration(view.opt('maxTime')).asMinutes();
      var curSeconds = (( ((currentDate.hours() * 60) + currentDate.minutes()) - calMinTimeInMinutes) * 60) + currentDate.seconds();
      var percentOfDay = curSeconds / ((calMaxTimeInMinutes - calMinTimeInMinutes) * 60);
      var topLoc = Math.floor(timeGrid.height() * percentOfDay);
      var timeCol = element.find('.fc-time:visible');
      timeline.css({top: topLoc, left: timeCol.outerWidth(true)});
      if (angular.isUndefined(anchor) || anchor === true) {
        timeGrid.parent().scrollTop(timeline.offset().top);
      }

      if (view.name === 'agendaWeek') { // Week view, don't want the timeline to go the whole way across.
        var dayCol = element.find('.fc-time-grid .fc-bg .fc-today');
        var left = dayCol.position().left + 1;
        var width = dayCol.width() + 1;
        timeline.css({left: left, width: width});
      }

      if (angular.isDefined(timelineIntervalPromise)) {
        $interval.cancel(timelineIntervalPromise);
      }
      timelineIntervalPromise = $interval(function() {
        var view = uiCalendarConfig.calendars.eventCalendar.fullCalendar('getView');
        renderCurrentTimeline(view, view.el, false);
      }, 300000);
    };

$('#calendar').fullCalendar({       
    nowIndicator: true
});