Calendar component

[sandrely2611-zz]

Description

Based on the Ctrl project needs, we detect some inconsistencies in the CALENDAR component.
Our goal with this ticket is to fix how this component looks, remove the unnecessary code from Ctrl.
And be able to consume the component from the DS without adding extra css or js to make it work in Ctrl.

TO EXPLORE

1. Support multiple events in a day.

Narrative

Design System: https://www.figma.com/file/c1SBfQGUU3twlW3YjeL8Sx/michelada_DS?node-id=0%3A1
Control project: https://www.figma.com/file/TmTjBO1Ua93cm6B978ErDw/ControlMocks_21-0ct-2020?node-id=3456%3A0

Palette scheme

Definition of done

1. Code review approved
2. Remove CSS/JS/HTML code related to the component from Ctrl
3. Deployed to production
4. Deployed to NPM library

Acceptance criteria

1. Support mobile, tablet and desktop resolutions.
2. In mobile and tablet versions the behavior is the same.
3. Update palette colors (see screenshot attached in narrative)
   • consider the following statuses: active, disabled, current day, selected day.
   • palette scheme for events in calendar.
   • color text in each event name: white

[IvanRoblesMX]

The thing with the calendar is that in terms of the event's background colors, the authors of the library recommend using only the options in javascript at the moment to set up the calendar build instead of making CSS override. https://fullcalendar.io/docs/eventColor

Next, the file on ctrl that shows how the calendar is built:

And one more thing, this calendar is exclusive in the control project, so this should probably not be part of the design system.

FullCalendar in some sites is still the king, so in ctrl should consider research and pay for a license may be that features are what ctrl needs, or maybe not. https://flatlogic.com/blog/top-javascript-calendar-plugins/