Pełny kalendarz Przedział czasu Powinien wynosić 1 godzinę i zacząć od 6:30

Question

Próbowałem tej implementacji Full Calendar Implementation.

$("#available_classes_calendar").fullCalendar({ 
     header: { 
      left : 'prev,next', 
      center : 'title' 
      }, 
     defaultView: 'agendaWeek', 
     views:{ 
      agenda:{ 
       allDaySlot: false, 
       minTime: "06:30:00", 
       maxTime: "24:00:00", 
       slotDuration: "00:60:00" 
      } 
     } 
    }); 

W tej całodniowej kolumnie należy zaczynać od godziny 6:30, a przedział interwałowy powinien wynosić 1 godzinę.

Więc wszystko-dzień kolumna powinna wyglądać następująco:

6:30 07:30 8:30. . . 23:30

Próbowałem wiele rozwiązań, ale nie udało się tego osiągnąć.

Proszę dać mi znać, jeśli jakiekolwiek inne informacje są wymagane, aby rozwiązać ten problem.

Dzięki

Answer 1

Twoim problemem jest miejsce, w którym umieściłeś swoje opcje. Powinno być

$("#available_classes_calendar").fullCalendar({ 
    header: { 
     left : 'prev,next', 
     center : 'title' 
     }, 
    defaultView: 'agendaWeek', 
    allDaySlot: false, 
    minTime: "06:30:00", 
    maxTime: "24:00:00", 
    slotDuration: "06:00:01" 
}); 

Odnośnie wyświetlacza 06:30, 07:30 i tak dalej, na osi pionowej, należy ustawić slotDuration: "06:30:01". Spójrz na this jsfiddle.

Najważniejszą rzeczą do zapamiętania jest 01 sekunda na slotDuration. Bez tego nie będziesz w stanie wyświetlać pół godziny.

---

Wyjaśnienie, dlaczego potrzebne są „+01” drugi:

FullCalendar obsługuje oś z pół godziny lub co chcesz, ale trzeba to zrobić ekscentryczne rzeczy. Powodem tego jest w kodzie źródłowym (źródło widok na FullCalendar 2.3.1), z linii 5714 do 5719:

((!slotNormal || !minutes) ? // if irregular slot duration, or on the hour, then display the time 
    '<span>' + // for matchCellWidths 
     htmlEscape(slotDate.format(this.axisFormat)) + 
    '</span>' : 
    '' 

Teraz $slotNormal jest zdefiniowana w linii 5701 i wynosi:

var slotNormal = this.slotDuration.asMinutes() % 15 === 0; 

Więc, jeśli masz 30-minutowy okres czasu, warunek będzie fałszywy, a FullCalendar nie wyświetli czasu. Ten temat jest szczegółowo omówiony w this answer.

Jedna dodatkowa uwaga: używasz FullCalendar v1.5.4, który jest naprawdę stary i radzę ci go ulepszyć. Jeśli dokonasz aktualizacji, pamiętaj, że FullCalendar opiera się teraz na momentjs.

Answer 2

Wystarczy wyciągnąć opcje, które można umieścić wewnątrz views.

To jest Twoja modified working fiddle.