Fullcalendar slotMinutes won't work

问题

I want to display slotMinutes of 15 for my calendar. But it's not working. It works well on this Fiddle

$(document).ready(function() {

  var calendar = $('#calendar').fullCalendar({
  defaultView: 'agendaWeek',
  editable: true,
  slotMinutes: 15,
  selectable: true,
  //header and other values
  select: function(start, end, allDay) {
      endtime = $.fullCalendar.formatDate(end,'h:mm tt');
      starttime = $.fullCalendar.formatDate(start,'ddd, MMM d, h:mm tt');
      var mywhen = starttime + ' - ' + endtime;
      $('#createEventModal #apptStartTime').val(start);
      $('#createEventModal #apptEndTime').val(end);
      $('#createEventModal #apptAllDay').val(allDay);
      $('#createEventModal #when').text(mywhen);
      $('#createEventModal').modal('show');
   }
});

To access the Fiddle click http://jsfiddle.net/mccannf/AzmJv/16/... However, it won't work on mine, what am I doing wrong?

回答1:

You are comparing a fiddle of v1 with your v2 fiddle.

In v2 there isn't slotMinutes. Instead you should use slotDuration (see the docs), that should be set to:

slotDuration: '00:15:00'

Here is the updated jsfiddle.

EDIT: Add description for each timeslot in vertical axis

The previous fiddle shows the 15 minute slot, but the vertical axis only has the hour (like 6am, 7am, and so on).

If you want the vertical axis to have all the time slots (6am, 6:15am, 6:30am, 6:45am), you can check the source code of fullcalendar.js line 5780 (version 2.1.1) where there is a function called slatRowHtml.

In this function, the following condition is used to write the time: !slotNormal || !minutes, where:

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

So, slotNormal is always be true (we have set 15 minutes period) and minutes will be 0, 15, 30 and 45. Since the condition is negative (!slotNormal || !minutes), this means that !slotNormal is always false and !minutes is only true when minutes = 0, and this is why only the hours are displayed.

To fix this you have two options, each one with its quirks:

Set slotNormal = '00:15:01'. With this value slotNormal will be false and all slots will have a description. The issue with this is that you are adding a second to each timeslot, which means that, by the time fullcalendar is printing 3pm, it will be 3:01pm because of the added seconds. You can check this JSFiddle.
Remove the entire condition from the source code and mantain slotDuration = '00:15:00'. This will work but you need to remember to check for the condition each time you update FullCalendar,

回答2:

Please find this code in fullcalendar.js

(h && i ? "" : "<span>" + r(n.format(this.axisFormat)) + "<\/span>")

Replace with

(h && i ? "<span>"+i+"</span>" : "<span>" + r(n.format(this.axisFormat)) + "<\/span>")

来源：https://stackoverflow.com/questions/25866619/fullcalendar-slotminutes-wont-work

标签

jquery

fullcalendar