JQuery FullCalendar метод определения временного интервала событий

Question

У меня есть FullCalendar и работает, и это очень приятно. Мой вопрос здесь в том, как лучше всего использовать функциональность зависания временных интервалов. Было бы очень приятно, если бы пользователь мог иметь визуальную подсказку для любого заданного временного интервала, над которым они парят.

Я нашел следующую ссылку http://code.google.com/p/fullcalendar/issues/detail?id=269, которая дает решение, которое добавляет новую структуру в строку ячейки повестки дня, чтобы обеспечить доступ к отдельным ячейкам. Тем не менее, указывается, что это решение приведет к тому, что FullCalendar станет вялым.

Прежде чем я начну смотреть код FullCalendar, я подумал, что спрошу, есть ли у кого-нибудь какие-либо идеи или решение.

Мои мысли о приближении это следующим образом:

1. Добавить шаблонные события в каждом временном интервале. Пользователь не увидит эти события, но эти невидимые события могут быть использованы для обозначения «наведения». Меня беспокоит, что добавление дополнительных событий приведет к тому, что FullCalander станет вялым. Кроме того, может быть затронута функциональность перетаскивания.

2. FullCalender может определить, какой временной интервал пользователь нажал. Можно ли использовать код, на который накладывается временной интервал, чтобы предоставить ссылку для выделения курсора?

3. Другое?

Я рассматриваю вариант 2 как место для начала. Однако, если у кого есть другая идея для работоспособного решения, я был бы рад это услышать.

Если у меня есть решение, я отправлю его здесь.

Спасибо,

Джим

Вот ссылка на сайт FullCalendar: http://fullcalendar.io/
Я нашел, что это очень приятно работать.

Answer 1

У меня была такая же проблема, так как иногда бывает трудно понять, какой временной интервал вы на самом деле нажимаете. Чтобы исправить это, я написал строку, чтобы изменить fullcalendar.js. Не идеальное решение, но это быстрое решение.

Это линия:

"<input type='hidden' class='timeslot-value' value='" + formatDate(d, opt('axisFormat')) +"'>" + 

И поместил его внутрь (вокруг строки кода 3080):

"<th class='fc-agenda-axis " + headerClass + "'>" + 
((!slotNormal || !minutes) ? formatDate(d, opt('axisFormat')) : '&nbsp;') + 
"</th>" + 
"<td class='" + contentClass + "'>" + 
"<input type='hidden' class='timeslot-value' value='" + formatDate(d, opt('axisFormat')) +"'>" + 
"<div style='position:relative'>&nbsp;</div>" + 
"</td>" + 

Теперь вы можете просто поместить в подсказке при наведении на всех й-слотов, преследующих .ui-widget-content class (<td>, который вы видите выше в коде). И получить скрытое значение ввода для отображения в этой всплывающей подсказке.

Если jQuery, вы можете использовать событие live и получить соответствующий первый ребенок и получить его значение.

Если ExtJS

Ext.onReady(function(){ 

Ext.QuickTips.init(); 

var tip = Ext.create('Ext.tip.ToolTip', { 
    target: 'your-calendar-id', 
    width: 140, 
    minHeight: 30, 
    delegate: '.ui-widget-content', 
    autoHide: false, 
    renderTo: Ext.getBody(), 
    listeners: { 
     beforeshow: function updateTipBody(tip) { 
      tip.update('<dl><dt style="font-weight: 600;"><?php echo $this->translate('Start time')?>: </dt><dd>' + Ext.get(this.triggerElement).first().getValue() + '</dd></dl>'); 
     } 
    } 
}); 
}); 

Answer 2

Следующий код сделал трюк для меня.

$('.ui-widget-content').hover(function(){ 
    if(!$(this).html()){  
     for(i=0;i<7;i++){ 
      $(this).append('<td class="temp_cell" style="border: 0px; width:'+(Number($('.fc-day').width())+2)+'px"></td>'); 
     } 

     $(this).children('td').each(function(){ 
      $(this).hover(function(){ 
       $(this).css({'background-color': '#ffef8f', 'cursor': 'pointer'}); 
      },function(){ 
       $(this).prop('style').removeProperty('background-color'); 
      }); 
     }); 
    } 
},function(){ 
    $(this).children('.temp_cell').remove(); 
}); 

Убедитесь, чтобы добавить его после того, как код, который создает календарь и он должен работать AS IS, если свойство DefaultView календаря JQuery является "AgendaWeekly.

Приветствия, M

Answer 3

Я понимаю, что это на самом деле не ответ, а комментарий на предыдущий ответ, но я еще, чтобы достичь репутации прокомментировать ответы.

W.R.T Ответ на вопрос @ user4243287 Один дополнительный шаг, который я должен был предпринять, заключалась в том, чтобы поместить эту логику в параметр «viewRender» при инициализации моего календаря, чтобы убедиться, что это продолжало работать при перемещении между неделями.