Calendar component USP

[mmailaender]

Hi Dmitry! 😊

Currently checking your notion board – a lot of interesting new stuff there! I also saw the calendar issue

I’m quite curious why you’re seeing the need to create also a calendar component? Because I think the current problem is not, that we need just another calendar integration.

On top of that, I would like to share some thoughts with you – maybe they can be an inspiration to you.
We’re having a calendar in our App and I researched for that a lot of libraries.

Atm we’re using https://demo.mobiscroll.com/react/eventcalendar/mobile-month-view# because it’s quite feature rich. The big downside is, that it’s a property driven library and not composable. That means it’s hard to customize it, and you need to learn their opinionated way of doing it (Which is still quite limited). This problem I saw also for a lot of other calendar libraries.

The problem is quite good explained in this Video based on a Graph library starting at Minute 11:09

Having now a composable approach would give me superpowers to customize the calendar the way I need it.

One example use case - Composable approach:

Let’s say we have the classic calendar day view

And now I need to display only one event somewhere else

<EventCard>
  <View direction="column" align="start">
    <Text variant="body-strong-1">{event.headline}</Text>
    <Text variant="body-2">{event.time}</Text>
  </View>
</EventCard>

Or alternatively, maybe I want to compose it like this:

<View direction="row" gap={2}>
  {
    events.map(event => {
      return (
        <EventCard>
          <View direction="column" align="start">
            <Text variant="body-strong-1">{event.headline}</Text>
            <Text variant="body-2">{event.time}</Text>
          </View>
        </EventCard>
      )
    })
  }
</View>

With a composable approach, this would be quite easy to achieve. With the libraries on the market that I have seen, it’s not possible out of the box.

In contrast mobiscroll approach

<Eventcalendar
            theme="ios" 
            themeVariant="light"
            clickToCreate={true}
            dragToCreate={true}
            dragToMove={true}
            dragToResize={true}
            eventDelete={true}
            locale={localeDe}
            data={myEvents}
            view={view}
            onEventClick={onEventClick}
       />

---

So I think having a calendar App that would be composable, could have a real USP.

As always, curious about your thoughts :)

[blvdmitry]

Hey, I think this is a good example. Reminds me of libraries like MUI selling advanced components so definitely a USP, similar to components like data grid. Having it available as a headless or a truly compound component can definitely help with the composition even for such advanced cases.

I'm going to include this case into the calendar ticket as well to at least research what are the limitations of this approach. At the same time I would say the biggest priority right now from my side is to make sure the library is ready for quickly adopting features that are going to be released on the next Figma config and making all the planned changes around the available component variants, design tokens and their flexibility.

Figma Config usually runs early May, so probably we'll be done with all the changes by June and that's when we can start looking into the new advanced components topics. Sorry if that sounds like a long timeline

[mmailaender]

The timeline is absolutely fine - I agree totally that there are currently more important issues - I was only seeing this Story on your notion Board, and wanted to drop some Inspiration 🙂