Event with specific day gets render in all days

Question

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!

Answer 1

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