Плагин FullCalendar - отображение часа во всех ячейках?

Question

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

Вы можете увидеть на картинке на примере понедельник, что я хочу для того чтобы достигнуть (но за все дни):

Answer 1

Нет необходимости изменять сам плагин. Просто используйте все доступные варианты.

Если вы просто пытаетесь изменить содержимое любого события, отображаемого в календаре, передайте функцию eventRender callback, которая возвращает новый элемент DOM. Используйте momentjs library для отображения форматированной строки для свойства start события. Например:

var calendarOptions = { 
    // ...other options 
    eventRender: function(event, element) { 
    $(element).html(moment(event.start).format('h:mm')); 
    return element; 
    } 
} 

Когда вы закончите с calendarOptions, вы, очевидно, нужно передать его fullCalendar:

$(calElement).fullCalendar(calendarOptions); 

---

Если вы хотите отобразить событие в каждой отдельной клетке, затем сначала создайте массив событий для каждого приращения ячейки ... примерно так:

var myEvents = []; 
var timeCursor = moment(startTime); 
while (+timeCursor < +moment(endTime)) { 
    var start = +timeCursor; 
    timeCursor = timeCursor.add(timeIncrement,'minutes'); 
    var end = +timeCursor; 
    myEvents.push({ 
     start: start, 
     end: end 
    }); 
} 

(где вы уже установили 0 !, endTime и timeIncrement)

Тогда events property календаря вариантов для этого массива перед переходом к fullCalendar:

calendarOptions.events = myEvents; 

---

Наконец, для обработки кликов на событии, передать функцию eventClick callback option, который делает все, что вы хотите. Например, если вы отслеживаете из которых было щелкнуло событие, вы можете нажать их start раз в массив:

var clickedEvents = []; 
calendarOptions.eventClick: function(calEvent, jsEvent) { 
    if (clickedEvents.indexOf(calEvent.start) < 0) { 
     clickedEvents.push(calEvent.start); 
    } else { 
     return false; 
    } 
} 

Тогда, конечно, вы можете изменить свой eventRender обратный вызов еще раз, чтобы ваше мероприятие дисплей отражает этот статус, изменяя стиль элемента, добавив следующую строку перед возвращением измененного элемента:

if (clickedEvents.indexOf(calEvent.start) < 0) { 
    $(element).addClass('already-clicked'); 
} 

(. обязательно установите стиль для .already-clicked в вашем CSS с чем-то вроде cursor: not-allowed и opacity: 0.5)

fullCalendar rock!

Answer 2

Я пытаюсь использовать @georgedyer код, но у меня есть некоторые вопросы:/ Во-первых, я покажу вам, как это выглядит в моем MVC 4 приложения:

Вот мое мнение (HTML) для отображения fullCallendar ,Смысл этого только отображать события для каждой ячейки:

//path to installed moment.js 
    <script src="~/Scripts/moment.js"></script> 
    <script> 
    $(document).ready(function() { 


     $('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      defaultView: 'agendaWeek', 
      editable: true, 
      allDaySlot: false, 
      selectable: true, 
      slotMinutes: 15, 


      events: myEvents, 

      eventRender: function(event, element) { 
       $(element).html(moment(event.start).format('h:mm')); 
       return element; 
      }, 

      eventClick: function (calEvent, jsEvent, view) { 
       alert('You clicked on event id: ' + calEvent.start 
        + "\nSpecial ID: " + calEvent.someKey 
        + "\nAnd the title is: " + calEvent.title); 

      }, 

      (...) 

    }); 

    //HERE IS YOUR CODE ABOUT CREATING ARRAY 
    var myEvents = []; 
    var timeCursor = moment('2015-09-08'); 
    while (+timeCursor < +moment('2015-10-01')) 
    { 
     myEvents.push { start: timeCursor } 
     timeCursor = timeCursor.add('15', 'minutes'); 
    } 
    </script> 

    <div class="container"> 
    <div id='calendar' style="width:65%"></div> 
    </div> 

У меня есть вопрос о одной строке коды, так как VisualStudio предупреждение отображения здесь о точке с запятой: myEvents.push { start: timeCursor }. Я попытался изменить его на это: myEvents.push ({ start: timeCursor }), ошибка исчезла, но все еще не работает:/

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

Редактировать: Я думаю, что функция eventRender: работает просто отлично, потому что, если я создаю событие самостоятельно, он отображает час, как должен. Поэтому проблема заключается только в создании событий. Я думаю, что в моем коде массив myEvents находится в неправильном месте, и когда я вызываю его в events: myEvents, массив имеет нулевые элементы.