Use CSS grid & functional component for schedule viewer performance and maintainability

Why

The current methodology used to render shifts has some performance costs in Vue. Migrating to an alternate approach could mitigate some of these performance issues.

See !54003 (comment 512008049) and https://gitlab.com/gitlab-org/gitlab/-/issues/322137 for additional context.

Level of effort: M

Technical Approach For CSS Grid / Draw

1. Consider create a Factory pattern that will construct a selection of meta data objects to represent rotations:

interface RotationShiftForDisplay {
  start: Date;
  duration: number; // in milliseconds, maybe?
  startsBeforeTimeFrame: boolean;
  endsAfterTimeFrame: boolean;
  user: UserInfo;
  columns: Number; // width of columns
}

2. Abstract the following to functional components

• ee/app/assets/javascripts/oncall_schedules/components/schedule/components/shifts/components/weeks_schedule_shift.vue
• ee/app/assets/javascripts/oncall_schedules/components/schedule/components/shifts/components/days_schedule_shift.vue

3. Replace left / width calculations with the use of the CSS Grid based on a column size.