特定日期的事件会全天渲染 [英] Event with specific day gets render in all days

问题描述

我正在使用fullcalendar，我想将事件添加到特定的日期和时间，但是该事件在全天都会渲染.(时隙有效)

我浏览了所有文档，但找不到任何错误.

我的代码:

  var calendar = new FullCalendar.Calendar(calendarEl，{事件:[{//我的事件标题:标题"，开始:"2020-08-05"，结束:"2020-08-06"，startTime:"09:00:00"，endTime:"10:00:00"，allDay:错误}]，contentHeight:自动"，initialDate:新日期('2020-08-01')，validRange:{开始:"2020-08-01"，结束于:'2020-08-18'}，titleFormat:{年:数字"，月:长"，日:数字"}，headerToolbar:{开头:"title"，中央: ''，结束:上一个，下一个"}，initialView:"timeGridWeek"，slotDuration:'01:00:00'，slotMinTime:'09:00:00'，slotMaxTime:'18:00:00'，周末:假，语言环境:"es"，allDaySlot:否，}); 

这是我的Codepen中出现错误和我正在使用的代码！
https://codepen.io/alfijuan/pen/yLeqwer?editors=1010

希望任何人都能提供帮助！

谢谢！

解决方案

您已将其指定为重复发生的事件.删除 startTime 和 endTime 属性，并将时间数据与日期合并到 start 和 end 属性中.

  {标题:标题"，开始:"2020-08-05 09:00:00"，结束:"2020-08-06 10:00:00"，allDay:错误} 

演示: https://codepen.io/ADyson82/pen/ZEQMEvY

请参见 https://fullcalendar.io/docs/v5/event-object和 https://fullcalendar.io/docs/v5/recurring-events 到了解单个事件与重复事件之间的区别和所需的属性

I'm using fullcalendar and i want to add an event to an specific day and hour but the event get render on all of the days. (time slot works)

I went through all the documentation but couldn't find any error.

My code:

var calendar = new FullCalendar.Calendar(calendarEl, {
  events: [{ // My event
    title: 'The Title',
    start: '2020-08-05',
    end: '2020-08-06',
    startTime: '09:00:00',
    endTime: '10:00:00',
    allDay: false
  }],
  contentHeight: 'auto',
  initialDate: new Date('2020-08-01'),
  validRange: {
    start: '2020-08-01',
    end: '2020-08-18'
  },
  titleFormat: { year: 'numeric', month: 'long', day: 'numeric' },
  headerToolbar: {
    start: 'title',
    center: '',
    end: 'prev,next'
  },
  initialView: 'timeGridWeek',
  slotDuration: '01:00:00',
  slotMinTime: '09:00:00',
  slotMaxTime: '18:00:00',
  weekends: false,
  locale: 'es',
  allDaySlot: false,
});

Here is my codepen with the error and the code im using!
https://codepen.io/alfijuan/pen/yLeqwer?editors=1010

Hope anyone can help!

Thanks!

解决方案

You've specified it as a recurring event. Remove the startTime and endTime properties and merge the time data into the start and end properties together with the date.

{
  title: 'The Title',
  start: '2020-08-05 09:00:00',
  end: '2020-08-06 10:00:00',
  allDay: false
}

Demo: https://codepen.io/ADyson82/pen/ZEQMEvY

See https://fullcalendar.io/docs/v5/event-object and https://fullcalendar.io/docs/v5/recurring-events to understand the difference and the properties required for a single event vs a recurring one

这篇关于特定日期的事件会全天渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！