Эффект наведения на одну ячейку повестки дня Неделя + полный календарь

Здравствуйте, я использую FullCalendar Адама Шоу (http://arshaw.com/fullcalendar/). Я использую просмотр месяца и повестки дня. Я хочу добавить эффект наведения, когда пользователь наводит курсор на дату в представлении месяца или временной интервал в представлении повестки дня. Я попытался изменить css следующим образом:

.fc-widget-content:hover {
        background-color: red;
    }

Это работает для просмотра месяца. Прикрепленный файл Наведите курсор на 16 января

Однако тот же код выбирает всю строку в представлении «AgendaWeek», когда мне нужно выделить только один временной интервал.

На приведенном ниже примере показан весь слот 13:00, выделенный для ежедневного использования, а не только временной интервал в среду 02-01, где находился курсор мыши.

Наведите курсор на всю строку, а не на один временной интервал

Любые идеи, как этого добиться.

Большое спасибо.


jquery css fullcalendar hover timeslots
person Tripping    schedule 02.01.2013    source источник

Ответы (5)


arrow_upward
4
arrow_downward

Вы не одиноки: многие пользователи FullCalendar хотели бы, чтобы подсветка отдельных временных интервалов поддерживалась «из коробки». Для этого в Google Code существует проблема.

Проблема возникла в октябре 2009 года, поэтому, похоже, нам не стоит надеяться, но несколько пользователей предложили различные обходные пути. Один из них успешно работает в моем коде, поэтому, возможно, стоит проверить.

person user1332981    schedule 03.01.2013

arrow_upward
3
arrow_downward

это не то, чего можно достичь только с помощью css. проблема в том, что недельная сетка создается путем наложения двух таблиц вместе, обе без фона, что создает впечатление сетки, но не настоящей сетки. продольная часть сетки имеет более высокий z-индекс, поэтому она всегда будет отображаться сверху, и, следовательно, событие наведения никогда не будет срабатывать для этой высоты. Я экспериментировал со способами обмануть пользователя, чтобы он увидел выделенное поле, однако без возможности узнать, где вы находитесь по вертикали в сетке, это на самом деле невозможно. это может быть что-то, что можно было бы сделать с помощью jquery, но я думаю, что затраченные усилия того не стоят.

person mistersender    schedule 02.01.2013
comment
Спасибо.. пока не буду включать - person Tripping; 03.01.2013

arrow_upward
1
arrow_downward

Вставьте этот код после $('#calendar').fullCalendar( ... ); Это создаст добавление TD в таблицу :)

$("table.fc-agenda-slots th").each(function () {
    $(this).width(50);
});
$("table.fc-agenda-slots td.fc-widget-content").each(function () {
    $(this).width(($("table.fc-agenda-days thead th.fc-col0").width()));
    $(this).after("<td class=\"fc-widget-content\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col5").width() + "px\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col4").width() + "px\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col3").width() + "px\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col2").width() + "px\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col1").width() + "px\"><div style=\"position:relative\"></div></td>");
});

А это стиль css для наведения:

table.fc-agenda-slots td.fc-widget-content
{
    border-right: 1px #DDD solid;
}
table.fc-agenda-slots td.fc-widget-content:hover
{
    background-color: #F1F1F1;
}
person user3018896    schedule 21.11.2013
comment
это сработало для меня в угловой версии, добавив его в scope.init() в директиве - person jakeforaker; 08.12.2014

arrow_upward
0
arrow_downward

Добавьте это после загрузки календаря:

$("table.fc-agenda-slots td.fc-widget-content div").each(function () {
                $(this).html("&lt;table cellspacing=\"0\" style=\"width:100%\"&gt;&lt;tr&gt;&lt;td&gt;&lt;div&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;");
            });
person Aleksei    schedule 21.11.2013

arrow_upward
-1
arrow_downward

Возможно, вам поможет свойство css3 pointer-events:none. Демонстрацию можно посмотреть здесь: http://jsfiddle.net/rNWpz/.

HTML

<div id="a"></div>
<div id="b"></div>

CSS

#a {
    border:1px dashed red;
    width:100px;
    height:100px;
}

#b {
    border:1px dashed blue;
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    left:0;
    pointer-events:none;
}

JQuery

$('#a').hover(function() {
    $(this).css('backgroundColor','red');
  },
  function () {
    $(this).css('backgroundColor','white');
  }
);
person Oscar Fanelli    schedule 07.08.2014