Home / Questions / 4335
Accepted
Luis Alberto Aguilera Clarke
Asked: 2020-02-18 07:27:18 +0800 CST 2020-02-18 07:27:18 +0800 CST

在 fullcalendar.js 库的每个事件中只使用一个复选框

  • 772

我正在将事件输入到 FullCalendar，但我遇到了每个事件跨越太多小时（或盒子）的问题。我需要每个事件都使用一个复选框以使其看起来更整洁。

当前日历

这是我的事件 ID 的 JSON：

'{{ $hora->id }}', title: 'Paciente: {{ $hora->paciente_nombre." ".$hora->paciente_apellido }} 
Profesional : {{ $hora->profesional_nombre." ".$hora->profesional_apellido }} ', start: moment('{{ $hora->fecha_hora }}').format('YYYY-MM-DD hh:mm'), backgroundColor: '{{ $hora->color }}',
javascript

2 Answers

  1. Best Answer

    问题是 FullCalendar 有一个defaultTimedEventDuration，这是 2 小时：

    持续时间，默认值：'02:00:00'（2 小时）

    由于您没有end在事件中指定参数，因此假定 2 小时的值作为事件的总持续时间：

    如果事件中没有指定结束，渲染时会出现这个持续时间。

    所以你有两个选择：

    1. end通过将参数的值加上 30 分钟来计算参数start，使其使用某个函数仅占用一个单元格。

    2. 更改defaultTimedEventDuration：

      $('#calendar').fullCalendar({ 
    defaultTimedEventDuration: '00:30:00',
    forceEventDuration: true,
    // ...    
});

      flag 的作用forceEventDuration是强制计算end.

    嗯，这就是现在想到的。

    笔记

    考虑到我提出的解决方案违背了 FullCalendar 的所有原始行为，这是正确的，也就是说，如果您没有指定事件有持续时间allDay: true是正确的，并且事件在发生时重叠也是正确的同时

    • 2

  2. 作为@Cesar 答案的补充，如果您想让它看起来不那么忙，但仍设置事件的实际持续时间（即在 1 小时 30 分钟的情况下不将事件设置为 30 分钟），您可以修改外观通过利用className选项。这样做的好处是将视觉问题从应用程序逻辑中移出。它允许事件占据与其持续时间成比例的空间。

    解释：

    • 您需要在 CSS 中为每种颜色定义两条规则：
    • .color您在其中定义边框颜色并将背景设置为透明。
    • .color .fc-content您将文本区域的背景颜色和文本本身的颜色放在哪里。
    • 在每种情况下，您根据与选项对应的颜色放置类的名称className。

    例子：

    $(function() {

  var fcal = $('#calendar').fullCalendar({
    defaultView: 'agendaWeek',
    allDaySlot: false,
    events: [{
      title: "Evento",
      start: moment().startOf('day').hour(7),
      end: moment().startOf('day').hour(9),
      className: 'azul'
    },{
      title: "Evento",
      start: moment().startOf('day').hour(8).minute(30),
      end: moment().startOf('day').hour(10),
      className: 'rojo'
    }]

  });

});
    @import "https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.css";

.rojo {
  border-color: red;
  background: transparent;
}

.azul {
  border-color: blue;
  background: transparent;
}
  
.rojo .fc-content {
  background: red;
}

.azul .fc-content {
  background: blue;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.js"></script>

<div id='calendar'></div>

    • 1