WickyNilliams/cally

Expose methods/properties to control the visible page programmatically

Closed this issue · 4 comments

riccardoperra commented

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.

image

Here our current implementation

image

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);
});
WickyNilliams commented

Have you tried the focusedDate property? This will adjust the visible date with respect to the number of months and pagination etc. it gets updated as the user navigates around, but you can set it yourself

riccardoperra commented

I think your implementation solved all our doubts 😄 Got a working implementation using the property you mentioned instead of offset

Registrazione.2024-07-19.113606.mp4

Thanks!

  • 🎉1
WickyNilliams commented

Glad it was that easy. I really need better examples and docs for this as it's easily missed. But I've been focusing more on features pre v1. When it hits v1, I'll definitely improve the docs with more comprehensive examples.

Looks awesome! Is there code you can share or insight into your approach? A few people have asked for this kind of UI.