Search code examples
javascriptreactjsfullcalendarfullcalendar-4

How can i display one specific resource make available on every date in fullcalendar?

  resources: [{
      id: 'pending',
      title: 'Pending'
    },
    {
      id: 'delivery',
      title: 'Delivery Person'
    }
  ],
  events: [{
      start: '10:00',
      end: '14:00',
      id: "22218",
      daysOfWeek: [0, 1, 2, 3, 4, 5, 6],
      resourceId: "pending"
    },
    {
      startTime: "2022-10-19 14:00:00",
      endTime: "2022-10-20 16:00:00",
      id: "22219",
      resourceId: "delivery"
    }
  ]

In fullcalender v4 I'm having resources and events object like this. What I want is, to repeat the pending order for every day on the given timeslot.

Could someone please help me with this?

Solution

  • From what I can see you seem to have got a bit confused with when you need the startTime/endTime or start/end properties, which are used for recurring and non-recurring events (respectively).

    1. Your "pending" event, if you want it to recur, needs to use startTime and endTime as per the recurring events documentation, providing the values as times/durations. You can also, optionally, specify startRecur and endRecur to set the dates between which the recurrence will apply.

    2. Your "delivery" event doesn't recur, but it also doesn't show up at all because you've used startTime and endTime as if it was recurring. Non-recurring events need start and end properties - again as per the event parsing documentation.

    I think this is probably close to what you were intending. It wasn't clear when exactly you want the recurrence to start and end so I omitted that - you can easily add it:

    events: [
      {
        startTime: "10:00",
        endTime: "14:00",
        id: "22218",
        daysOfWeek: [0, 1, 2, 3, 4, 5, 6],
        resourceId: "pending"
      },
      {
        start: "2022-10-19 14:00:00",
        end: "2022-10-20 16:00:00",
        id: "22219",
        resourceId: "delivery"
      }
    ]

    Demos: