Полный календарь, эффекты наведения на номер дня - PullRequest
Новая
       1

Полный календарь, эффекты наведения на номер дня

0 голосов
/ 25 апреля 2018

Я пытаюсь создать эффект наведения на номера дня, используя FullCalendar версии 3. Эффект, который я собираюсь сделать, похож на этот здесь .

Проблема в том, чтоВ версии 3 данные за каждый день разделены на 2 таблицы.Первая таблица - это поле «день», в то время как вторая таблица содержит такую ​​информацию, как «номер дня» и «события».

Так что я пытаюсь выяснить, есть ли способ с помощью css, иесли нет, то jQuery.Вот пример первой таблицы: 

<div class="fc-bg">
  <table class="">
    <tbody>
      <tr>
        <td class="fc-day fc-widget-content fc-sun fc-past" data-date="2018-04-01"></td>
        <td class="fc-day fc-widget-content fc-mon fc-past" data-date="2018-04-02"></td>
        <td class="fc-day fc-widget-content fc-tue fc-past" data-date="2018-04-03"></td>
        <td class="fc-day fc-widget-content fc-wed fc-past" data-date="2018-04-04"></td>
        <td class="fc-day fc-widget-content fc-thu fc-past" data-date="2018-04-05"></td>
        <td class="fc-day fc-widget-content fc-fri fc-past" data-date="2018-04-06"></td>
        <td class="fc-day fc-widget-content fc-sat fc-past" data-date="2018-04-07"></td>
      </tr>
    </tbody>
  </table>
</div>

Это пример второй таблицы: 

<div class="fc-content-skeleton">
  <table>
    <thead>
      <tr>
        <td class="fc-day-top fc-sun fc-past" data-date="2018-04-01">
          <a class="fc-day-number" data-goto="{&quot;date&quot;:&quot;2018-04-01&quot;,&quot;type&quot;:&quot;day&quot;}">1</a>
        </td>
        <td class="fc-day-top fc-mon fc-past" data-date="2018-04-02">
          <a class="fc-day-number" data-goto="{&quot;date&quot;:&quot;2018-04-02&quot;,&quot;type&quot;:&quot;day&quot;}">2</a>
        </td>
        <td class="fc-day-top fc-tue fc-past" data-date="2018-04-03">
          <a class="fc-day-number" data-goto="{&quot;date&quot;:&quot;2018-04-03&quot;,&quot;type&quot;:&quot;day&quot;}">3</a>
        </td>
        <td class="fc-day-top fc-wed fc-past" data-date="2018-04-04">
          <a class="fc-day-number" data-goto="{&quot;date&quot;:&quot;2018-04-04&quot;,&quot;type&quot;:&quot;day&quot;}">4</a>
        </td>
        <td class="fc-day-top fc-thu fc-past" data-date="2018-04-05">
          <a class="fc-day-number" data-goto="{&quot;date&quot;:&quot;2018-04-05&quot;,&quot;type&quot;:&quot;day&quot;}">5</a>
        </td>
        <td class="fc-day-top fc-fri fc-past" data-date="2018-04-06">
          <a class="fc-day-number" data-goto="{&quot;date&quot;:&quot;2018-04-06&quot;,&quot;type&quot;:&quot;day&quot;}">6</a></td>
        <td class="fc-day-top fc-sat fc-past" data-date="2018-04-07">
          <a class="fc-day-number" data-goto="{&quot;date&quot;:&quot;2018-04-07&quot;,&quot;type&quot;:&quot;day&quot;}">7</a>
        </td>
      </tr>
    </thead>
  </table>
</div>

CSS Я пробовал до сих пор: 

.fc-day:hover ~ .fc-day-number {
  background: #ddd;
  border-radius: 50%;
  color: #fff;
  transition: background-color 0.2s ease;
}

Очевидная проблема заключается в том, что мне нужен способ связать две ячейки таблицы вместе fc-day и fc-day-top> fc-day-number.

Мне интересно, является ли jQuery лучшим способом пойти иесли это так, я не очень силен в этом и не уверен, как связать их вместе.

ОБНОВЛЕНИЕ

Так что я "Kind Of" получил эту работу, используяJQuery.Подумав об этом еще раз, единственное, что связывает эти ячейки вместе, это атрибут data-date.

Тем не менее, эффект выделения, который я хочу, является немного запаздывающим и не плавным, как CSS.Может быть, кто-нибудь может помочь мне очистить это или сделать его более эффективным? 

$('.fc-day').hover(function() {
    var myEm = $(this).attr('data-date');
        $('.fc-day-top[data-date = '+myEm+'] .fc-day-number').css({'background-color': 'yellow'});
  }, function() {
        var myEm = $(this).attr('data-date');
    $('.fc-day-top[data-date = '+myEm+'] .fc-day-number').css({'background-color':'transparent'})
  });

ОБНОВЛЕНИЕ 2

Так что я получил это с помощью и с помощью некоторых из васздесь, в комментариях, я изменил добавление CSS с помощью jQuery вместо добавления / удаления классов.Я также обнаружил, что CSS по умолчанию для FullCalendar имеет класс fc-bg, установленный в z-index из 1. Это вызывает проблему, потому что эффект наведения мыши работает только в том случае, если ваша мышь находится в той части сетки, где нет ничего перекрывающего ее.Поэтому я пока что изменил z-index на 5, что делает эффект при наведении.Следующая проблема - выяснить, как сделать ссылки в календаре доступными для клика с этим изменением.В любом случае, вот мой код: 

$('.fc-day').hover(function() {
    var myEm = $(this).attr('data-date');
        $('.fc-day-top[data-date = '+myEm+'] .fc-day-number').addClass('on-hover');
  }, function() {
        var myEm = $(this).attr('data-date');
    $('.fc-day-top[data-date = '+myEm+'] .fc-day-number').removeClass('on-hover');
  });

ОБНОВЛЕНИЕ 3

Новая разработка.Когда календарь меняется на другой месяц или другой тип представления, функция jQuery для создания эффекта наведения больше не работает, если вы не обновите страницу.При дальнейшем поиске есть метод, который можно вызвать из FullCalendar viewRender.Как я мог подключить свою функцию к этому? 

viewRender: function (element) {

    }

Ответы [ 4 ]

0 голосов
/ 25 апреля 2018

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

Поэтому я использовал jQuery для добавления / удаления класса при наведении ячейки, а также пришлось внести некоторые изменения, чтобы эта работа работала с FullCalendar, когда был изменен месяц или представление. Я сделал это с viewRender. Таким образом, функция наведения должна была быть включена в FullCalendar jQuery. 

$('#calendar').fullCalendar({
        theme: false,
        header: {
        left: 'title',
        center: 'agendaDay,agendaWeek,month',
        right: 'prev,next'
      },
    defaultView: 'month',
        views: {
        month: { // name of view
        columnHeaderFormat: 'ddd', // Mon
        },
    },
        navLinks: true,
    height: 'parent',
    events: 'https://fullcalendar.io/demo-events.json',
        viewRender: function (element) {
            $('.fc-day, .fc-day-top').hover(function() {
            var myEm = $(this).attr('data-date');
                $('.fc-day-top[data-date = '+myEm+'] .fc-day-number').addClass('on-hover');
          }, function() {
                var myEm = $(this).attr('data-date');
            $('.fc-day-top[data-date = '+myEm+'] .fc-day-number').removeClass('on-hover');
          });
    }
  });
0 голосов
/ 25 апреля 2018

Добавить событие, когда mouseenter и mouseleave в день 

 $('.fc-day.fc-widget-content').mouseenter(function() {
        var date=this.dataset.date;
        var day=$('.fc-day-top.fc-past').filter(function(){return this.dataset.date===date}).children()
        day.addClass('fc-event-hover');
      });

      $('.fc-day.fc-widget-content').mouseleave(function() {
                    var date=this.dataset.date;
        var day=$('.fc-day-top.fc-past').filter(function(){return this.dataset.date===date}).children()
        day.removeClass('fc-event-hover');
      });

CSS: 

.fc-event-hover{
 background: #ddd;
  border-radius: 50%;
  color: #fff;
  transition: background-color 0.2s ease;
}
0 голосов
/ 25 апреля 2018 

$(function() {
var todayDate = moment().startOf('day');

  $('#calendar').fullCalendar({
    
  });
  
});
.fc-basic-view .fc-day-number, .fc-basic-view .fc-week-number {
    padding: 6px;
    margin: 2px;
    min-width:19px;
    text-align: center;
  
}

.fc-week .fc-day-top:hover .fc-day-number{
    background-color: #ddd;
    border-radius: 50% ;
    color: #FFFFFF ;
    transition: background-color 0.2s ;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>


<div id='calendar'></div>
0 голосов
/ 25 апреля 2018

Проблема: Это невозможно сделать только с помощью CSS, поскольку fc-day-number не является дочерним по отношению к fc-day.

Решение: Вы можете использовать Jquery для добавлениякласс, содержащий свойства hover для mousein и удаляющий этот класс при mouseout.

CSS 

.on-hover {
  background: #ddd;
  border-radius: 50%;
  color: #fff;
  transition: background-color 0.2s ease;
}

JQuery 

$('.fc-day').on('mousein', function() {
  $('.fc-day-number').addClass('on-hover');
}).on('mouseout', function() {
  $('.fc-day-number').removeClass('on-hover');
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...