NG7 - Add reservations to ngb-datepicker from provided API

Job Description:

Create reserved blocks with tooltip and icon (font awesome)

Colours, Icons, Tooltip and Text:

Reserved - Border colour = property border colour - default: Orange, Fill Colour = property fill colour - default: Light Orange,

Icon = property icon - default = far fa-money-bill-alt, property IconSize - default: thumb, property IconColour - default: black

Tooltip = property tooltip - default = Deposit received for this period, call 01202 123456 for more info

Text to span day boxes = Reserved for this period of time.

Booked - Border colour = property border colour - default: Blue, Fill Colour = property fill colour - default: Light Light Blue,

Icon = property icon - default = far fa-smile-beam, property IconSize - default = thumb, property IconColour - default: white

Tooltip = property tooltip - default = Paid in full for this period, call 01202 123456 for more info

Text to span day boxes = Booked for this period of time.

Cancelled - Border colour = property border colour - default: Red, Fill Colour = property fill colour - default: transparent,

Icon = property icon - default = far fa-angry, property IconSize - default = full , property IconColour - default: white

Tooltip = property tooltip - default = Cancelled for this period, call 01202 123456 for more info

Text to span day boxes = Cancelled

Available - Border colour = property border colour - default: Green, Fill Colour = property fill colour - default: transparent,

Icon = property icon - default = far fa-check-circle, property IconSize - default = thumb, property IconColour - default: Light Green

Tooltip = property tooltip - default = Available for this period, call 01202 123456 for more info

Text to span day boxes = Available, click to book

Cursor = Pointer/Hand

Click Event - property: eventLink - default routerLink '/test' (navigates to routerlink)

NA - Border colour = property border colour - default: Dark Grey, Fill Colour = property fill colour - default: Gold,

Icon = property icon - default = fas fa-slash, property IconSize - default = full, property IconColour - default: Silver

Tooltip = property tooltip - default = Not currently available for this period, call 01202 123456 for more info

Text to span day boxes = Not currently available for this period

Note*

Property to enable/disable show text for each status

Property to enable/disable show tooltip for each status

Property to enable/disable border colour for each status

Property to enable/disable fill colour for each status

Property to enable/disable icon for each status

Note**

'Available' status is calculated by using any day, which does not have an existing booking status

Note***

Use Ellipses ... for text that overlaps

Note****

If status overlaps with the same type, but for different booking, add a thin border around block or alternate colours, to indicate individual/separate booking

Note*****

IconSize - values: full or thumb. Full == use whole square, thumb == bottom right

Create legend to show colours, icons and text for states (key/legend)

Aptitudini: JavaScript, HTML, CSS, JSON, AngularJS

ID Proiect: #22081555