Question

我只想向其中一个事件添加边框样式，但不向完整日历中的所有事件添加边框样式。有什么帮助吗？更改就像要将边框样式添加到全日历的事件中。更改就像想要将边框样式添加到全日历的事件中。

Only add the border style to the single event for the calendar.
 Only add the border style to the single event for the calendar.
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'resourceDayGrid', 'resourceTimeGrid' ],
      defaultView: 'resourceTimeGridDay',
      defaultDate: '2019-08-07',
      editable: true,
      selectable: true,
      eventLimit: true, // allow "more" link when too many events
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 
  'resourceTimeGridDay,resourceTimeGridTwoDay,timeGridWeek,dayGridMonth'
      },
      views: {
        resourceTimeGridTwoDay: {
          type: 'resourceTimeGrid',
          duration: { days: 2 },
          buttonText: '2 days',
        }
      },

      //// uncomment this line to hide the all-day slot
      //allDaySlot: false,

      resources: [
        { id: 'a', title: 'Room A', eventColor: 'pink' },
        { id: 'b', title: 'Room B', eventColor: 'green' },
        { id: 'c', title: 'Room C', eventColor: 'orange' },
        { id: 'd', title: 'Room D', eventColor: 'red' }
      ],
      events: [
        { id: '1', resourceId: 'a', start: '2019-08-06', end: '2019-08- 
     08', title: 'event 1' },
        { id: '2', resourceId: 'a', start: '2019-08-07T09:00:00', end: 
'2019-08-07T14:00:00', title: 'event 2' },
        { id: '3', resourceId: 'b', start: '2019-08-07T12:00:00', end: 
'2019-08-08T06:00:00', title: 'event 3' },
        { id: '4', resourceId: 'c', start: '2019-08-07T07:30:00', end: 
'2019-08-07T09:30:00', title: 'event 4' },
        { id: '5', resourceId: 'd', start: '2019-08-07T10:00:00', end: 
'2019-08-07T15:00:00', title: 'event 5' }
      ],

      select: function(arg) {
        console.log(
          'select',
          arg.startStr,
          arg.endStr,
          arg.resource ? arg.resource.id : '(no resource)'
        );
      },
      dateClick: function(arg) {
        console.log(
          'dateClick',
          arg.date,
          arg.resource ? arg.resource.id : '(no resource)'
        );
      }
    });

    calendar.render();
  });

</script>
<style>
    #a {
        border-color: 5px dashed yellow;
    }
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 900px;
    margin: 50px auto;
  }

</style>
</head>
<body>

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

</body>
</html>

仅将边框样式添加到日历的单个事件中。

Answer 1

您可以在事件中使用“ borderColor”选项，如下所示：

events: [
        { id: '1', resourceId: 'a', start: '2019-08-06', end: '2019-08- 
     08', title: 'event 1', borderColor: '#0000ff' },
        { id: '2', resourceId: 'a', start: '2019-08-07T09:00:00', end: 
'2019-08-07T14:00:00', title: 'event 2' },
        { id: '3', resourceId: 'b', start: '2019-08-07T12:00:00', end: 
'2019-08-08T06:00:00', title: 'event 3' },
        { id: '4', resourceId: 'c', start: '2019-08-07T07:30:00', end: 
'2019-08-07T09:30:00', title: 'event 4' },
        { id: '5', resourceId: 'd', start: '2019-08-07T10:00:00', end: 
'2019-08-07T15:00:00', title: 'event 5' }
      ]

请注意，我已经在“首次活动”中添加了“ borderColor”选项。

您可以使用eventRender如下应用边框样式：

eventRender: function (info) {
  var eventId = info.event.id;
  if (eventId == '1')
    {
      $(info.el).css("border-style", "dashed");
      $(info.el).css("border-color", "#ffff00");
    }
}

在完整日历中为事件添加边框样式

1 个答案: