周视图和日视图中的fullcalendar当前时间线

时间：2012-01-11 02:32:52

标签： jquery html css fullcalendar

据我所知，根据谷歌代码http://code.google.com/p/fullcalendar/issues/detail?id=143上的这个问题票，有一个浮动的解决方案，但我似乎无法找到它。

我想知道是否有人知道如何在日历上显示red solid line on the current time

8 个答案:

答案 0 :(得分：24)

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

}

然后在设置中：

viewDisplay: function(view) {
        try {
            setTimeline();
        } catch(err) {}
    },

并在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分钟移动时间线。如果你需要它更平滑，你可以降低它..

答案 1 :(得分：14)

已在FullCalendar（2.6.0）的新版本

中解决

http://fullcalendar.io/docs/current_date/nowIndicator/ 

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

nowIndicator

答案 2 :(得分：12)

Magnus Winter的解决方案非常有效，但它没有考虑fullcalender选项minTime和maxTime。如果设置了它们，则时间轴放错了位置。

要解决此问题，请将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

答案 3 :(得分：7)

很好的解决方案，累积了线程中的所有更改，以使其适用于 fullcalendar-2.1.0-beta1 并进行了一些小的更改，因此它对我有用。 

var timelineInterval;

$calendar.fullCalendar({
  ...,
  viewRender: function(view) {              
    if(typeof(timelineInterval) != 'undefined'){
      window.clearInterval(timelineInterval); 
    }
    timelineInterval = window.setInterval(setTimeline, 300000);
    try {
      setTimeline();
    } catch(err) {}
  },
  ...
});

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

  var curTime = new Date();

  var curCalView = $("#calendar").fullCalendar('getView');
  if (curCalView.intervalStart < curTime && curCalView.intervalEnd > curTime) {
    timeline.show();
  } else {
    timeline.hide();
    return;
  }
  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);

  var topLoc = Math.floor(parentDiv.height() * percentOfDay);
  var timeCol = $('.fc-time:visible');
  timeline.css({top: topLoc + "px", left: (timeCol.outerWidth(true))+"px"});

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

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 parentDiv = jQuery(".fc-agenda-slots:visible").parent();

到

var parentDiv = jQuery(".fc-slats:visible").parent();

否则根本不会呈现时间轴。猜全日历改变了这一点。

然后我在日视图中遇到了该行左侧pos的问题，所以我改变了

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

到

var timeCol = $('.fc-time:visible');
timeline.css({top: topLoc + "px", left: (timeCol.outerWidth(true))+"px"});

此议程周刊的时间轴宽度出错了所以我改变了

var width = dayCol.width() - 2;

到

var width = dayCol.width() + 1;

没有说明为什么会这样，只是改变它以使它看起来正确。

答案 4 :(得分：6)

Martin Pabst提出了一个很好的观点，但是如果你将最小和最大时间设置为字符串（例如“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);

答案 5 :(得分：3)

很棒的解决方案，给了我很多帮助，谢谢大家！这些是使此解决方案与新的FullCalendar v2一起使用所需的更改。

更改行：if (curCalView.visStart < curTime && curCalView.visEnd > curTime) {

收件人：if (curCalView.intervalStart < curTime && curCalView.intervalEnd > curTime) {

更喜欢使用：viewRender: function(view) {

代替：viewDisplay: function(view) {

答案 6 :(得分：2)

我想出了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);
    };

答案 7 :(得分：0)

在使用自定义最小和最长时间时，为了使其适用于2.2.7版本，我添加了

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

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

并更改了行

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

到

div

这样，函数使用正确的div高度来计算时间轴位置。

相关问题
最新问题