Is it possible to have 'title' on initialSelections ?

[sainiankit]

This does not seem to work for me recurring={true} initialSelections={[ { start: 240, end: 360, title: "Testing", frozen: true } ]}

[trotzig]

Right now I don't think that's possible. Can you explain the use-case a little?

[sainiankit]

So basically, I want to get some predefined slots rendered, which can not be edited (hence, frozen: true), is there any other way I can achieve this ? (I am using a recurring weekly format)

[trotzig]

I think you can use the onEventsRequested prop to dynamically feed in your predefined slots.

[sainiankit]

Since I am using recurring={true}, the events being passed to callback in onEventsRequested should have start & end as minutes since beginning or ISO Strings ?

This does not work for me

callback([
            {
              start: new Date("Tue Apr 07 2020 18:01:43 GMT+0530"),
              end: new Date("Tue Apr 07 2020 19:30:43 GMT+0530"),
              title: "Testing",
              frozen: true,
            },
          ]);

[trotzig]

Yeah, looks like the readme suggests minutes since start of the week.

recurring: set to true to turn the view into a selector for recurring availability. No dates are then shown, and the onChange callback is called with events that have a start and end expressed in number of minutes since the start of the week. The weekStartsOn prop is taken into account here, so the 0 minute is either monday at 00:00 or sunday at 00:00.

[sainiankit]

this is also not working for me , I'm trying to debug. [No slots are rendered]

callback([
            {
              start: 0,
              end: 90,
              title: "Testing",
              frozen: true,
            },
          ]);

[trotzig]

I ran a quick test locally and it looks like the events are filtered out because they have no calendarId. Furthermore, despite the readme mentioning using minutes since start of week, it looks like onEventsRequested still operates with dates. So try something like

callback([
            {
              start: new Date("Tue Apr 07 2020 18:01:43 GMT+0530"),
              end: new Date("Tue Apr 07 2020 19:30:43 GMT+0530"),
              title: "Testing",
              frozen: true,
              calendarId: 'predefined', 
            },
          ]);

And then you need to add the calendar as a prop as well:

<AvailableTimes
  calendars={[
    {
      id: 'predefined',
      title: 'Predefined',
      foregroundColor: '#ff00ff',
      backgroundColor: '#f0f0f0',
      selected: true,
    },
  ]}

[sainiankit]

This works for me with recurring=false as soon as I turn recurring=true the event disappears from the calendar