6eDesign / svelte-calendar

A lightweight datepicker with neat animations and a unique UX.
https://6edesign.github.io/svelte-calendar/
MIT License
543 stars 90 forks source link

Add the ability to add custom content to days, months, years (e.g. holidays etc.) #162

Open divStar opened 2 years ago

divStar commented 2 years ago

This is a great calendar from what I can tell so far!

I am currently missing a way to show additional information per day, month and/or year. That information could be a name of a holiday, some sort of status showing something (e.g. a multi-colored line showing how much work I have tracked for that day out of the normal amount of hours, whether I were present at that day at all).

The component wouldn't have to know anything of what I mentioned. It should just offer a way to pass data (preferably a component) to any given cell (on any level - day, month or year) and offer some control over how the cell content is displayed (in order to e.g. allow vertical-align: top or the corresponding flex attributes for each cell on each level). It'd could be part of a "store", which would be taken into account.

Just an idea:

This way the InlineCalendar (or any other component) wouldn't need to know what it is exactly displaying in addition to the day, month or year; it'd only need to make sure, that if say the store is altered to contain another data object, it'd make the object available to the inner component it got.

{
   "date":"2022/09/12",
   "contents": {
      "events": [
         {
            "name":"some event",
            "type":"..."
         }
      ]
   }
}

(date is some date in some format, e.g. 2022/09/12 to be used as the key, contents could really be anything, but it would be supposed to be something, that the passed component, that's displayed somewhere in a day, month or year cell, understands)

Even though I am not Svelte-savvy, I think I could create a PR for this, but I thought I'd ask first.

FluffyDiscord commented 1 year ago

Option to pass custom component for day/month/year part would be the reason to switch to this library