refactor(calendar): implement improved design and functionallity

[desig9stein]

Closes #10400 Closes #13725 Closes #13726

Additional information (check all that apply):

• [ ] Bug fix
• [x] New functionality
• [ ] Documentation
• [ ] Demos
• [ ] CI/CD

Checklist:

• [ ] All relevant tags have been applied to this PR
• [ ] This PR includes unit tests covering all the new code (test guidelines)
• [ ] This PR includes API docs for newly added methods/properties (api docs guidelines)
• [ ] This PR includes feature/README.MD updates for the feature docs
• [ ] This PR includes general feature table updates in the root README.MD
• [ ] This PR includes CHANGELOG.MD updates for newly added functionality
• [ ] This PR contains breaking changes
• [ ] This PR includes ng update migrations for the breaking changes (migrations guidelines)
• [ ] This PR includes behavioral changes and the feature specification has been updated with them

[didimmova]

In fluent theme:

• On selected date in igx the background color Is grey, in igc it’s primary(on weekdays)
• Should the current date’s background be rounded or not?
• Font weight seems different (in igx it says 600, in igc it doesn’t seem to be specified)
• Month arrows are left and right in igx, and up and down on igc
• Hover state in igx has outline/border(also the outline and the background don’t seem to go together), in igc it’s just background, except for the weekend days, there are outlines :D
• When showing week numbers, there is a right border that row in igc, but no border in igx
• On selected(not focused) on weekend dates the foreground in igx is black(dark grey), in igc it’s white(light grey)

[didimmova]

In other three themes the only things I've found so far is that the Month Year buttons are using different fonts in igx and igc

Material

• In igx calendar the month and year buttons are spans and use titilium web font and in igc it’s using buttons and Arial font

igx Igc

Bootstrap:

• Font families of month and year seem to be different again in igx it is a span and uses default (-apple-system, etc, etc), in igc it’s button and uses Arial

Indigo: Nunito Sans and Arial

[desig9stein]

In fluent theme:

• On selected date in igx the background color Is grey, in igc it’s primary(on weekdays)
• Should the current date’s background be rounded or not?
• Font weight seems different (in igx it says 600, in igc it doesn’t seem to be specified)
• Month arrows are left and right in igx, and up and down on igc
• Hover state in igx has outline/border(also the outline and the background don’t seem to go together), in igc it’s just background, except for the weekend days, there are outlines :D
• When showing week numbers, there is a right border that row in igc, but no border in igx
• On selected(not focused) on weekend dates the foreground in igx is black(dark grey), in igc it’s white(light grey)

This is how things look in the fluent UI kit, which means that the IGC component should be fixed not IGX

[didimmova]

In material the current and selected month/year gets cut if on the first row. Same in indigo.

[didimmova]

In bootstrap the next month hover foreground color in igx is white, in igc it's black

the color of the arrows is different

[didimmova]

Months view problems when creating custom theme

$month-hover-background: yellow, //doesn’t work
$month-focus-foreground: magenta//can’t get to this state
$month-focus-background: cyan//can’t get to this state

$month-current-focus-foreground: yellow, //can't get to this state
$month-current-focus-background: blue, //can't get to this state

//these properties on the bottom don’t work by themselves and they get the values from month-selected-current block if they’re defined
$month-selected-foreground: yellow,
$month-selected-background: magenta,
$month-selected-hover-foreground: #3df,
$month-selected-hover-background: #55a,
$month-selected-focus-foreground: magenta,
$month-selected-focus-background: yellow,

[didimmova]

Years view problems, when creating custom theme

$year-hover-background: magenta, //doesn’t work
$year-focus-foreground: magenta, //can’t get to this state
$year-focus-background: yellow, //can’t get to this state

$year-current-focus-foreground: blue, //can't get to this state
$year-current-focus-background: green, //can't get to this state

[didimmova]

Calendar view problems, when creating custom theme

$picker-background: magenta, //can't get to this state
$weekend-color: blue, //doesn't work
$current-outline-focus-color: magenta, //can't get to this state

$date-selected-range-focus-foreground: green, //can’t get to this state
$date-selected-range-focus-background: cyan, //can’t get to this state

$date-selected-current-range-focus-foreground: green, //can't get to this state
$date-selected-current-range-focus-background: blue, //can't get to this state

$date-selected-current-outline: cyan, //not used anywhere in the theme
$date-selected-current-hover-outline: purple,  //not used anywhere in the theme
$date-selected-current-focus-outline: pink,  //not used anywhere in the theme

$date-special-current-border-color: cyan, //doesn't work

$border-radius: 20px, //works (breaks in years view)

[didimmova]

In Material Theme 4px gap, not 6px between rows in days view 16px 24px padding in pickers, now its 0px 16px 16px 24px padding in header, now it’s 16px In multiview there should be 44px between months, now it’s 24px

I'm not sure about these states, since they're different in the handoff demo and the handoff states sections... should be discussed, but the special selected date should be fixed when disabled.

[didimmova]

In Fluent theme 4px gap, not 6px between rows in days view 16px padding in pickers, now it’s 0px 16px In multiview there should be 44px between months, now it’s 24px(The calendars’ paddings)

Current special disabled This issue is only in single selection (not in range)

Current disabled Foreground should be white

[didimmova]

In Bootstrap theme

4px gap, not 6px between rows in days view The days view should have 0 12px padding, now it has padding-bottom: 4px 16px padding in pickers, now it’s 0px 16px In multiview there should be 44px between months, now there’s 0

Selected special date disabled - foreground should be white (same for selected+special+current disabled)

[didimmova]

In Indigo theme 13px 16px padding in pickers, now it’s 0 16px In multiview there should be 44px between months, now it’s 24px(The calendars’ paddings)

Special+Selected disabled - foreground should be white Same for Current+Special+Selected disabled

Selected disabled (foreground should be white, it’s dark when calendar is not focused)

Selected focused foreground is dark, it should be white

[didimmova]

In Indigo theme the igx-calendar-picker should be with 50px height