CNN Create - date picker with the recording information

[naluinui]

Design: https://www.figma.com/file/FGnP9kAFLDmraAFJf8OBAG/CNN-Roadmap?type=design&node-id=654-12690&mode=design&t=qAwDQ2uFkOwcjLqv-4

1. Default calendar (no selected date)

2. Selected date style

• Date range in a month

• Date range >2 months

Date picker style https://ui.shadcn.com/docs/components/date-picker

Expected outcome

• [ ] Show total minutes of recordings each day
• [ ] Highlight the value <10 with #FF6868
• [ ] when the user select start-end date the minutes of recordings in job size estimation should add up to be the same
• [ ] start cannot be before end date

Related Tasks

• 1574

• https://github.com/rfcx/arbimon/issues/1654#issue-2163448296

[grindarius]

Have we got API task for this?

[naluinui]

@grindarius yes, #1574

[naluinui]

Vue

• calendar: https://www.shadcn-vue.com/docs/components/calendar.html
• popover: https://www.shadcn-vue.com/docs/components/popover.html

[antonyharfield]

Try this: https://easepick.com/examples/days-with-prices.html

[antonyharfield]

You can use Flowbite datepicker and pass in options:

import DateRangePicker from 'flowbite-datepicker/DateRangePicker'

const beforeShowDay = (date) => {
  const day = date.getDate()
  return { content: `<span>${day}</span><br><span style="font-size:8px">test</span>` }
}
const dateRangePickerEl = document.getElementById('dateRangePickerId')
new DateRangePicker(datepickerEl, {
    // options
    beforeShowDay
})

Ref: https://github.com/themesberg/flowbite-datepicker/blob/658b8cc5b84aec732e60f59044b35d4769c00294/demo/live-demo.js#L22

[antonyharfield]

Flowbite date picker is too hard to get working in Vue!

Suggest we switch to https://vue-tailwind-datepicker.com

[koonchaya]

@naluinui Can you share what you have done or your progress with @RatreeOchn ? So that she can continue working on the rest of it. :)

[naluinui]

From what I tried I'd recommend separate the calendar to 2 tasks:

1. Change calendar from element-plus to something else (so we can migrate away from element plus)
2. Indicate the date that have recording (which originally this task was all about)

Me and Ant was researching which library (point 1) to go for earlier and the info is in the commit/branch above.

@RatreeOchn feel free to drop me a message anytime if you have more specific questions

[naluinui]

I did create the essential task above 👆and added it to this sprint instead of this one.