wickynilliams/cally

Small, feature-rich calendar components

cally's Issues

Calendar Dynamic Rendering Issue on Multi-Month Display

I would like to open an issue regarding an observed issue within the library. The problem arises when there are multiple months involved, particularly when the HTML rendering becomes dynamic based on the number of months or the type of calendar (range or multi). The issue manifests when, for instance, two months are displayed, and a user selects dates from both. Upon clicking "next" to proceed to the next month and selecting a date, the calendar automatically re-renders, reverting to the initial state. This behavior is undesirable. Interestingly, this issue does not occur when static HTML is utilized, as demonstrated below:

<calendar-multi months={3}>
   <calendar-month></calendar-month>
   <calendar-month offset={1}></calendar-month>
   <calendar-month offset={2}></calendar-month>
</calendar-multi>

bug-lib.mov

Please review and provide any necessary corrections or suggestions.

Thank you!

Ability to set focused year/month

It would be useful if there was some API available for setting the focused date. This could be exposing the focused date itself as a prop, or perhaps some imperative methods. There may be tradeoffs to each approach.

This would allow building of year and month selects (combined with the existing focusday event), so users can quickly navigate to far away dates without a lot of paging

Expose methods/properties to control the visible page programmatically

Hey there, we are currently using Cally to implement a calendar/input-date/input-date-range component in our angular applications.

Our design system requires us to have a calendar similar to M3 specs, so we had to implement a custom header that allows us to set programmatically the visible page.

Here our current implementation

Unfortunately, we noticed that cally doesnt' provide any way to programmatically modify the page in an "easy" way at the moment. As workaround, we are currently modifying the offset property manually calculating the offset of the selected dates, but it would be nice to be able to choose via a specific API which month you want to view

Here a simple implementation of our offset calculation

readonly offset = computed(() => {
    // month is the object {month, year} 
    const month = this.month();
    // the current selected date, or the current day as fallback
    const date = this.currentValue() ?? new Date();
    // calculate the difference between the two months
    return offsetBetweenMonths(toMonth(date), month);
});

Enhancement Request: More Customization Control for Calendar Buttons

Summary:
Currently, customization options for calendar buttons, especially disabled buttons, are limited. It would be beneficial to provide users with more control over button customization, particularly for disabled buttons. One suggested improvement is to move the hard-coded button hover style into a CSS variable within the host { ... } section. This would allow for easier customization from external sources.

Proposed Enhancement:

Move the hard-coded button hover style, such as button:hover:where(:not(:disabled)) { background: #0000000d; }, into a CSS variable.
Define this CSS variable within the host { ... } section, like --button-hover-disabled: #0000000d;.
By doing so, users can easily override this style by customizing the value of --button-hover-disabled externally, providing more flexibility and control.

Expected Benefits:

Enhanced customization options for calendar buttons, especially disabled buttons.
Improved maintainability and ease of customization by moving hard-coded styles into CSS variables.
Facilitated integration with external styling systems, allowing for seamless customization according to user preferences.

Request:
Consider implementing this enhancement to provide users with more control and flexibility in customizing calendar buttons, ultimately enhancing the overall user experience.

Doc issue with second example

On the home page, after the example on top, there is a Single Date section with text:

For a single date, use the <calendar-date> component, and place inside it a <calendar-month> component.

And then the next section is Date Range (https://wicky.nillia.ms/cally/#date-range) and it has the same text + sample code.

"today" calculated relative to UTC rather than system time

Can we define the default time zone for the calendar?

For example, in the calendar, I have the "today" part, but in my case, I need to set the default TZ at UTC-3, because it detects the next day at 9:00 PM of the current day.

Is this something that is planned to be implemented into cally?

Thanks!

Possible to use it with angular?

Hi, I've been looking for a datepicker to use with angular and I haven't found anything worthwhile yet, I'm working with angular 16.

The html gives error in the web components, like:

'calendar-month' is not a known element

My question is, can it be used with angular or not yet?

SSR

• Is SSR possible?
• If so, how?
• In what environments?
• Would need docs and examples

I tried @atomico/astro previously but hit some issues, and didn't want to go down that rabbit hole before release. Worth revisiting https://github.com/atomicojs/astro

[Question] Is there a way to reset user's start date selection on calendar-range

Our date picker displays a panel that renders the cally component inside when the date picker input is focused/clicked.
We have noticed a strange behavior when using the calendar-range component, I'll try to explain it:

• When the user clicks the input and selects the start date of the range but suddenly clicks outside of the element, we close the calendar panel (where cally is rendered)
• At this point, a start date has been selected in Cally, but there was no end date selected
• If the user clicks the date picker input and opens the calendar panel again, the previous selection is still there.

Is there a way we can reset the calendar-range state? I'm attaching a video here for clarification, the same can be seen in the Cally documentation site.

CleanShot.2024-05-29.at.18.35.20.mp4

What we would like, is a way that allows us to reset the calendar-range state if the user clicks outside and no end date has been selected. This should take into account that if a date range (start/end date is already set) we should be able to keep that range selection and only reset the start date selection action that was not completed.

I hope I've explained myself, otherwise please feel free to ask for details, I'll be more than glad to provide as many as needed.

How would you use it in React Js? And Styles

My questions

In your docs you are using npm install cally and then saying you are importing it as import "Cally" put this its not working for me, do i import it as a object and how do i use it.
How to i use the onChange on it?
And does it comes with styles?

Why

Im really liking it but if i want to use it in production i have to know that thinks, thank you
Mariano!

Multiple values for CalendarDate

Great idea select multiple values for calendar date component.

Configurable day name style

Right now the day names are formatted using the "narrow" style, but people may wish to user other styles. There should be some way of configuring this.

Configurable headings

There should be some way to configure the various headings. Rather than month and year being separate, maybe you want a single heading that encompasses both

The easy option would be to expose some formatting options as props.

But i would prefer to lean into composition if possible with a <calendar-heading> component, which is itself configurable. It should be possible to place this anywhere as a descendant of the other components, and it Just Works

Ability to page by one month at a time

Scenario:

I have a multi-selectable calendar with months="1" to display one month per next/prev button press.
I aim to display two months at a time, moving one month forward/backward per button press (e.g., May/June => June/July).

Problem:

Selecting dates from the second displayed month causes the calendar to jump to the next month.
Setting months="2" matches the elements and works correctly, but the prev/next buttons then jump two months (e.g., May/June => July/August), which is not desired.

CodePen Example: https://codepen.io/Catalin-Lungan/pen/JjqozOe

Expected Resolution:

Currently, it is expected that the 'months' prop matches the number of elements, as the pagination logic moves by the number of months specified. It would be very useful to have a setting that allows configuring the pagination to move by a custom number of months, which would resolve the issue we're experiencing.

Weird select offset double digit cells

Just saw this weird offset of the select highlight on double digit grid cells. Verified on Safari on iOS 17.4.1:

Would you like any help exploring ways to have numbers remain centered in their cells? I’d love to do some css tinkering if you’d want it.

Vue v-model external data change does not update the `<calendar-date>` month to the one containing the current date

I'm using the <calendar-date> in vue with a v-mode.lazy pointing to a reactive variable.

• If outside code updates the reactive variable with a properly formatted date before a date has been selected in the component, the component will update to the correct month/year.
• If a date is selected in the component, but then the date is changed via the reactive variable outside of the component, the selection updates, but the month and year displayed does not, so the selection is not visible.

First day of the Month Issue

Hey there!

Just happened to notice on one of my projects that, the start of the week is not matching as expected, I thought it probably was a configuration issue on my site, however, I noticed the same problem in the official documentation example.

For example, June, 1st 2024 should be a Saturday while the Calendar is displaying that day as a Sunday.

Let me know if it could just be something related to my time, or if it might be an issue with the utils or even better just an issue on my end.

Thank you for taking a look!

Reference Screenshots below

CalendarDate onChange in React guide is not working

Hi, I was learning about this project and I liked it a lot, but after trying the React guide it didn't work because the guide had forwardRef instead of ref.

Link: https://wicky.nillia.ms/cally/guides/frameworks/

Example on home page not rendering properly on Firefox desktop

I found the documentation website first on my phone using Firefox. Then I opened it on my laptop, and noticed it showed differently. Then I opened it with Chrome on Desktop, and it looks like the rendering on Firefox Desktop is the one off. The selected background color is black instead of red, the arrows to change month do not show, and the two months do not show side to side even if the screen is wide enough. Better an image than words:

I haven't had the opportunity to try on another computer yet, I'll try to do that later.

Support for TimePicker

Thanks a lot for this library, it solves a lot of our issues.
Would it be possible to have a time-picker support as well ?

<input type="datetime-local" id="meeting-time" name="meeting-time" value="2024-06-12T19:30" min="2024-06-07T00:00" max="2024-06-14T00:00" />

Essentially something like this which is supported in HTML out of the box. If possible stepper function it time for 5 or 15 mins would be great too.

Ability to customize date rendering

Some calendars offer the possibility to customize the rendering of of a single date by adding additional meta data such as price, availability etc.

Is this something that is planned to be implemented into cally?

Can I add a component to input hour/minute/second?

It would be very useful to add it to the calendar.

Like the one in the browser.

What about Svelte?

What about Svelte?

Start week with Sunday

I looked into issues like #44 and it still seems like something is off. Or you need to add extra logic to do this.

Calendar Range Picker Resets Incorrectly After Abandoning Selection

When using the Range Picker, if I start selecting a range by choosing the Range Start date and then scroll through several months without completing the selection, and then click outside the Range Picker to abandon the selection, the expected behavior is to reset the calendar view to the current day upon reopening the Range Picker. However, currently, it shows the view of the last abandoned selection instead of resetting to the current day and I suppose that's a bug in the Cally library. Hope to give us a solution for that.

Steps to Reproduce:

1. Open the Range Picker.
2. Select a start date for the range.
3. Scroll through several months.
4. Click outside the Range Picker to abandon the selection.
5. Reopen the Range Picker.

Expected Behavior:
The Range Picker should reset to display the current day's view when reopened after an abandoned selection.

Actual Behavior:
The Range Picker displays the view of the last abandoned selection instead of resetting to the current day's view.

Impact:
This behavior can be confusing for users, as they might expect the calendar to reset to the current day when they reattempt the selection process.

Small example here:

range-picker-selection.mov

Consider Form Participation?

I know you want to keep this component as lightweight as possible, but it would be nice if it could use the form participation feature of web components. I could then simply place it in a form block, ensure I give it a name, and it would submit it's value when the form is submitted.

Calendar representation for value in `CalendarDate` appears very wrong

On your example page (and even in my local exploration) the CalendarMonth widget is not being correctly represented in a couple of ways:

1. The highlighted day specified by the value property is a month behind. In you example, value is specified as "2024-01-10" (January 10th 2024), but the highlighted day is December 10th, 2023. I see the same inconsistency locally.
2. Perhaps worse, is that the days do not begin on the proper day for the displayed month and year. On your example page, the month of December in 2023 is starting on Sunday, when it should be Friday. I'll note that the month of 12/24 does start on a Sunday.

Fix onRangestart and onRangeend Events in Cally Library

The onRangestart and onRangeend events in the Cally library do not always function correctly. To avoid ESLint complaints in StencilJS, the following rules need to be added:

// eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-expect-error onRangestart={this.handleCalendarRangestart} onRangeend={this.handleCalendarRangeend}

Please fix these event issues or consider changing the event handling mechanism to improve reliability and performance.

Year selectability for more distant dates

It would be beneficial to have the option for year selection (maybe by optionally turning the year into a select?) for uses where selecting a date might be a ways in the past or future. For example: the publish date of a publication. Currently it requires a lot of clicking those previous/next buttons depending on the use case.