wickynilliams / cally Goto Github PK

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.

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.

• 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

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!

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?

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.

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.

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

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/

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.

What about Svelte?

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

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.

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

Like the one in the browser.

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.

Great idea select multiple values for calendar date component.

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.

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.

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>

Please review and provide any necessary corrections or suggestions.

Thank you!

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.