Fullcalendar slotMinutes不起作用 [英] Fullcalendar slotMinutes won't work

问题描述

我想为我的日历显示15分钟的slotMinutes。但它不起作用。它在这个小提琴上效果很好

  $（document）.ready（function（）{
 
 var fullCalendar（{
 defaultView：'agendaweek'，
 editable：true，
 slotMinutes：15，
 selectable：true，
 // header和其他值
 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'）; 
} 
}）; 
  

要访问Fiddle，请点击 HTTP：// jsfiddle.net/mccannf/AzmJv/16/ ...但是，它不适用于我的，我做错了什么？

解决方案

你正在比较v1的小提琴和你的v2小提琴。

在v2中没有 slotMinutes 。相反，您应该使用 slotDuration （查看文档 a>），应设置为：

  slotDuration：'00：15：00'
  

以下是更新后的 jsfiddle 。

编辑：为垂直轴上的每个时间段添加说明

以前的小提琴显示了15分钟的插槽，但纵轴只有小时（如上午6点，上午7点等）。

如果您想（上午6点，上午6点15分，上午6点30分，上午6点45分），你可以检查 fullcalendar.js 第5780行的源代码（版本2.1.1），其中有一个名为 slatRowHtml 的函数。

在此函数中，使用以下条件写出时间：！slotNormal || ！分钟，其中：

  var slotNormal = this.slotDuration.asMinutes（）％15 == = 0; 
分钟= slotDate.minutes（）; 
  

因此， slotNormal 始终为真（我们已经设置了15分钟的时间段）并且分钟将是 0 ， 15 ， 30 和 45 。由于条件为负（！slotNormal ||！分钟），这意味着！slotNormal 总是<$ c当分钟= 0 时，$ c> false 和！minutes 这就是为什么只显示小时数。

要解决这个问题，您有两个选择，每个选项都有它的怪癖：

1. 设置 slotNormal = '00：15：01'。使用此值 slotNormal 将为false，并且所有插槽都会有说明。与此相关的问题是，您要为每个时隙添加一秒，这意味着，在fullcalendar正在打印 3pm 时，它将为 3 ：01pm 因为增加了秒。您可以检查此JSFiddle 。


2. 删除整个条件从源代码和mantain slotDuration = '00：15：00'。这将起作用，但您需要记住在每次更新FullCalendar时检查条件，

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?

解决方案

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:

1. 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.
2. 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,

这篇关于Fullcalendar slotMinutes不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！