[scheduler] Support rendering time ranges

[flaviendelangle]

The Time Ranges allow to visually mark part of the Time Grid / Timeline with a background (and other styles).

In this PR:

• Add a timeRanges prop of type CalendarTimeRange on the <EventCalendar /> component
• For every time range occurence (including with rrule) render an element and put the right classname to it. Maybe apply some default style (unsure).

Not in this PR:

• Allow to configure the header width of the time ranges
• Allow to edit the time ranges with drag and drop and resizing
• Allow to pass a custom renderer (if you need it to make a decent example, it can be done in this PR)

interface CalendarTimeRange {
  id: string | number;
  title?: string;
  start: SchedulerValidDate;
  end: SchedulerValidDate;
  color?: CalendarEventColor // could be renamed CalendarColor
  className?: string;
  rrule: CalendarRecurenceRules; // also add the other rrule properties that we have on the event
}

Bryntum example
Mobiscroll example (see the colors prop)