【问题标题】:Fullcalendar - Need event to not be more than a day - using selectAllow but issue with allDayFullcalendar - 需要事件不超过一天 - 使用 selectAllow 但 allDay 出现问题
【发布时间】:2019-09-04 12:26:26
【问题描述】:

我正在使用 Fullcalendar,并且需要事件不超过一天。

当您选择一个小时范围时,它可以工作,但它对 allDay 事件不起作用,因为从日期和到日期不同。这是我的 selectAllow 函数。我知道它不优雅,我的 Javascript 是有限的!

function(selectInfo) { 
    var ambig = selectInfo.start._ambigTime;
    var from_date = selectInfo.start._d;
    from_date = String(from_date).substr(0, 10);
    var to_date = selectInfo.end._d;
    to_date = String(to_date).substr(0, 10);

    if (from_date != to_date)
    {
        return false;
    }
    else
    {
        return true;
    }
    var duration = moment.duration(selectInfo.end.diff(selectInfo.start));
    console.log(duration.asHours());
}

正如您从代码中看到的那样,我已经采取了基于 ambigTime 进行不同检查的路线(我假设这是否是 allDay ?)并使用持续时间,但持续时间在它是时不起作用一整天。

非常感谢任何帮助。

【问题讨论】:

  • “不超过一天”。您的意思是 a) 活动的持续时间不得超过 24 小时(无论何时开始和结束),或 b) 活动不得跨越 2 个不同天之间的午夜边界(无论其总持续时间如何),或c) 别的东西?这有点不清楚。 “不起作用”究竟是什么意思?与您的预期相比究竟出了什么问题?
  • P.S.当 momentJS 有很多内置的日期比较函数可以用来直接比较开始值和结束值时,为什么还要依赖 _d 和字符串比较?见momentjs.com/docs/#/query。当然还有你似乎已经发现的 diff()。
  • P.P.S.一个可行的示例可能会帮助我们了解您要处理的不同案例。我为您的代码制作了一个可运行的演示,只是为了更容易尝试:jsfiddle.net/sc78wb0k。我注意到删除 if 块允许它在所有情况下进行持续时间测试,并且在尝试选择全天时段时持续时间将记录为 24 小时:jsfiddle.net/sc78wb0k/1。这不符合你的要求吗?根据我的第一条评论,我想这取决于您的要求是选项 a 还是 b。
  • 这不是 24 小时,它是否经过一周中的某一天,所以如果从星期三开始,你不能在星期四完成。 RE删除if,返回false是阻止事件被允许并且返回在if中的事情。感谢您的提琴和使用时刻,我已经看了一点,我会在您的提琴中再看一下。

标签: javascript fullcalendar momentjs fullcalendar-3


【解决方案1】:

实际上,您可以使用selectConstraint 更简洁、更简单地解决这个问题。这将用户的选择限制在某个时间窗口内。通过按照以下示例指定它,它有效地将单个选择限制在选择开始的那一天:

selectConstraint: {
  start: '00:00', 
  end: '24:00', 
},

演示:http://jsfiddle.net/9qv5xz18/

【讨论】:

  • 太棒了!!我在文档中通过了这一点,并认为这不是我需要的。非常感谢。
【解决方案2】:

感谢 ADyson,我已修复它。我想我可以整理代码,但下面的代码现在可以了。

function(selectInfo) {
    console.log(selectInfo);
      var ambig = selectInfo.start._ambigTime;
      var from_date = selectInfo.start._d;
      var from_dat = selectInfo.start;
      var to_dat = selectInfo.end;

      console.log(to_dat.diff(from_dat))

      from_date = String(from_date).substr(0, 10);
      var to_date = selectInfo.end._d;
      to_date = String(to_date).substr(0, 10);

      if (!ambig)
      {
      if (from_date != to_date) {
        return false;
      } else {
        return true;
      }
      }
      else
      {
        return to_dat.diff(from_dat) == 86400000;
      }
      var duration = moment.duration(selectInfo.end.diff(selectInfo.start));
      console.log(duration.asHours());
}

【讨论】:

  • 注:您无需在此处回复内部 _ambig 属性。 fullCalendar v3 扩展了 moment 并提供了一个公共 hasTime() 函数来指示此状态。那将是调用它的正确方法。见fullcalendar.io/docs/v3/moment。而且您仍然不应该依赖日期的字符串输出 - 这可能因浏览器和时区、文化等而异。momentJS 提供了获取日期的各个部分或全部格式化的方法。但无论如何,我找到了一种更简单、更可靠的方法来实现您的要求 - 请参阅 my answer
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-01-22
相关资源
最近更新 更多