web-dev-qa-db-ja.com

週ビューと日ビューのフルカレンダーの現在のタイムライン

グーグルコードのこの問題チケットによると http://code.google.com/p/fullcalendar/issues/detail?id=14 解決策が浮かんでいることを理解していますが、私はできませんそれを見つけているようです。

カレンダーに 現在の時刻の赤い実線 を表示する方法を知っている人はいないかと思います

jqueryhtmlcssfullcalendar
20
RussellHarrower
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分ごとに移動します。よりスムーズにする必要がある場合は、下げることができます。

24
Magnus Winter

FullCalendarの新しいバージョン（2.6.0）で解決されました

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

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

nowIndicator

15
Silvestre

Magnus Winterのソリューションは非常にうまく機能しますが、フルカレンダーオプションのminTimeとmaxTimeは考慮されていません。それらが設定されている場合、タイムラインは見当違いです。

これを修正するには、MagnusWinterのコードの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
12
Martin Pabst

素晴らしい解決策です。これを機能させるためにスレッド内のすべての変更を蓄積しました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();

そうしないと、タイムラインがまったくレンダリングされません。フルカレンダーがこれを変更したと思います。

次に、日ビューの線の左側の位置に問題があったので、変更しました

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

に

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

また、agendaWeekのタイムライン幅が間違っていたので変更しました

var width = dayCol.width() - 2;

に

var width = dayCol.width() + 1;

これがなぜだったのかは説明しませんでした。正しく見えるように変更しただけです。

7
Thorval

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);
6
eMgz

素晴らしい解決策、私を大いに助けてくれました、みんなありがとう！これらは、このソリューションを新しいFullCalendarv2で機能させるために必要な変更です。

次の行を変更します：if (curCalView.visStart < curTime && curCalView.visEnd > curTime) {

宛先：if (curCalView.intervalStart < curTime && curCalView.intervalEnd > curTime) {

そして使用することを好む：viewRender: function(view) {

代わりに：viewDisplay: function(view) {

3
Awerealis

私はバージョン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);
    };
2
Vladimír Gorej

カスタムの最小時間と最大時間を使用するときにバージョン2.2.7で動作させるために、追加しました

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

このようにして、関数は正しいdivの高さを使用してタイムラインの位置を計算します。

0
João Marques