Calendar carousel

It's Provide a configurable and touch friendly date browser that can be connected to layouts. It can be configured to move back and forth in a flexible way so that users can browse by day, week, month or some arbitrary period.

Attributes

options
- layoutId - Provide a layout id to be display layout within a carousel.
- start - Provide a span for start carousel e.g "startOf:isoWeek;save"
- backward- Provide a span for forward move. e.g "move:P-1W;save"
- forward- Provide a span for backward move. e.g "move:P1W;save"
- format - Date Picker Format. e.g "ll"
- styles -
  - root - provide a styles for carousel container
  - date - provide a styles for date view
  - card - provide a styles for card
- classes
- rules - Provide a rules for styles to provide a dynamic styles to the carousel based on data values.

Span Example:-

1 Starts Monday and moves by 1 week

start: "startOf:isoWeek;save", left: "move:P1W;save", right: "move:P-1W;save"

2 Starts today and moves by 1 day

start: "save", left: "move:P1D;save", right: "move:P-1D;save"

3 Starts today and moves by 3 days

start: "save", left: "move:P3D;save", right: "move:P-3D;save"

Example

{
  "target": "calendar-carousel",
  "icon": "far fa-star",
  "title": "Calendar Switcher",
  "name": "calendar-carousel",
  "options": {
    "start": "startOf:isoWeek;save",
    "backward": "move:P-1W;save",
    "forward": "move:P1W;save",
    "format": "ll",
    "layoutId": "bbe12ba9-faef-44ef-947b-7b1a3c734402",
    "styles": {
      "root": {},
      "date": {
        "fontWeight": "700",
        "fontSize": "1.25rem",
        "marginLeft": "16px"
      }
    }
  }
}