Calendar Component: Several Readability Improvements Sorely Needed — Practically Unusable

Feature Requests
21

As it currently stands, I can’t use the month view, I can’t use the week view, and I can’t use the day view.

I’m thankful I’ve never needed to use the calendar style in a collection for a client. Basically, for all intents and purposes, there is no calendar component. I know in tech there is this overwhelmingly popular culture of shipping and then iterating, but sometimes I wish that weren’t the case, some features are so unfinished that they are not worth shipping.

22

i’m going to make an automation that creates new accounts and presses vote if something is not done soon LOL!

23

Have you tried AI to build a calendar component? Is it too rich in functionality for AI?

Asking for about 500 friends!

24

I’ve built a simple week view (no times) with day summary

25

Voted :+1:

Agree, used for the first time (in a long time) immediately I thought this display cannot be right but after tinkering for a while I realised that it is not really workable.

Also the date/time selector just feels a bit clunky.

Hope we see some much needed improvement soon.

26

Voting +100

27

Voted

28

Bumping this so hopefully something gets done. I’m surprised the calendar hasn’t been updated yet..

29

For sure. A couple of improvements have been made — agenda view and no times in week/day view. But we could still use several more listed in OP.

30

Is it possible to fix with Custom CSS in the meantime? :thinking: :sweat_smile:

31

I haven’t been successful with that.

32

Anyone hear any news about an updated Calendar component? Heard it may be in the works.

33

Maybe this year? :face_with_tongue:

34

Goodness…maybe…

35

Didn’t see this feature request yet, but it gets my vote! Also, improve the date/time selector to be able to select limits (for instance only times between 8am and 5pm) and increments (for instance 15 minute increments).

36

I’ve used css to hide a part of the calender component.The first hours till 6am and from 7pm. Maybe this css hack is usefull from some in the meantime.

Normal:

chrome-capture-2026-03-27
chrome-capture-2026-03-271215×945 25 KB

With css:

chrome-capture-2026-03-27 (1)
chrome-capture-2026-03-27 (1)1264×812 19.1 KB

Unfortianetly cuz it’s a css hack its not guaranteed to remain stable and not 100% bug free, but good enough in my use case.

css class: “custom-calendar”

/*********************************************************
 ** Calender (Css class: custom-calendar)
 *********************************************************/

/* Hide the unwanted hours (at the beginning) */
.custom-calendar .rbc-time-gutter .rbc-timeslot-group:nth-child(-n + 7),
.custom-calendar
  .rbc-time-gutter
  .rbc-timeslot-group:nth-child(n + 20):nth-child(-n + 24) {
  display: none;
}

/* Hide the unwanted hours (at the end) */
.custom-calendar
  .rbc-time-content
  .rbc-day-slot
  .rbc-timeslot-group:nth-child(-n + 7),
.custom-calendar
  .rbc-time-content
  .rbc-day-slot
  .rbc-timeslot-group:nth-child(n + 20):nth-child(-n + 24) {
  display: none;
}

/* Hack to add the height of all hidden elements after all */
.custom-calendar .rbc-time-content .rbc-day-slot {
  padding-top: calc(7 * 40px);
  transform: translateY(calc(-7 * 40px));
  padding-bottom: calc(5 * 40px);
}

/* Ensure that the added height of the calendar is not visible. */
.custom-calendar .rbc-time-content {
  max-height: calc(12 * 40px);
  overflow: hidden;
}
37

Well done! Bookmarking this! Based on the classes you’ve chosen in your stylesheet, that should be fairly stable!

38

Apologies if the answer to this is obvious, but how do you know which classes are stable?

39

@nathanaelb Hope this clarifies:

40

What an amazing tutorial on how to use CSS in Glide. That’s beautiful community resource, I learnt a lot, thank you so much.