Angular-calendar: Allow to control the size of an hour segment

[vova1987]

Is your feature request related to a problem? Please describe

The current version already supports start-day-hour and start-day-minute. One thing missing is the possibility to define the segment size in minutes - e.g. 40 minute segment.
This is useful for applications that require more precise control over the time segments - for example a teacher may start his day at 7:40 and do 40 minutes lessons until 19:00. such a layout of the calendar is currently not possible

Describe the solution you'd like

I would like the segment size to be adjustable (in case segment-size is set - number-of-segments is no longer relevant!). If I set the segment size to be 40 minutes and the day-start is 06:40 - I expect the 40 minute segments to start from 06:40 and be 40 minutes each.
Describe your use case for implementing this feature

In my application I would use this feature to allow the user to better arrange his segments for a fixed-schedule of lessons.
Additional context

[matts-bot[bot]]

Thanks so much for opening an issue! If you'd like me to give priority to answering your issue or would just like to support this project, then please consider supporting me on Patreon

[mattlewis92]

Yeah I can definitely see how this could be useful and is something I would accept, if you're willing to do the work yourself I can help guide you, or if you'd like me to work on it, I would ask that you consider backing the project financially on patreon, as I only work on this project in my spare time. Thanks! 😄

[vova1987]

I guess I can try and do it myself. I already did some investigation and
found that the relevant code is found in another repository
-calendar-utils...
Can you help me by pointing me to the right places to look at?

On Sun, Sep 1, 2019 at 2:28 PM Matt Lewis [e-mail] wrote:

Yeah I can definitely see how this could be useful and is something I
would accept, if you're willing to do the work yourself I can help guide
you, or if you'd like me to work on it, I would ask that you consider
backing the project financially on patreon
https://www.patreon.com/mattlewis92, as I only work on this project in
my spare time. Thanks! 😄

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/mattlewis92/angular-calendar/issues/1080?email_source=notifications&email_token=AABZQ57BKUOQ3XM4NSUYYCDQHOROXA5CNFSM4ISPUFL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5UAJ4I#issuecomment-526910705,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABZQ54HP245GZWDHOGKILDQHOROXANCNFSM4ISPUFLQ
.

[mattlewis92]

Ok, awesome! This is the main root function you want to modify: https://github.com/mattlewis92/calendar-utils/blob/master/src/calendar-utils.ts#L686-L702

It's made up of lots of smaller pieces though, the logic for generating the time grid is this function (and will probably be where you will need to make the bulk of your changes): https://github.com/mattlewis92/calendar-utils/blob/master/src/calendar-utils.ts#L1054-L1112

and you will probably need to modify this function to make sure events are positioned correctly with these changes: https://github.com/mattlewis92/calendar-utils/blob/master/src/calendar-utils.ts#L958

The test suite is quite comprehensive, so it should let you know if you break anything, and you can write some additional snapshot based tests to verify the output of the functions is correct, adapting some tests from this example would work well: https://github.com/mattlewis92/calendar-utils/blob/master/test/calendar-utils-utc.spec.ts#L169-L185 You can then add snapshots of different combinations of the hourSegments, dayStart and segmentHeight inputs and verify that the output is correct by looking at the snapshot data generated.

I think as you described, we don't need to add any additional api options, and we can use the hourSegments, dayStart and segmentHeight options to control this behaviour.

Let me know if there's anything else I can do to help guide you 😄

[vova1987]

Thanks for the guidelines!
I implemented the needed changes and added a snapshot test as you suggested.
I did have to add an API option though - to support all existing options in
addition to this enhancement. The new API option is named
segmentSizeMinutes (we can discuss the naming...) and it defaults to 60 in
which case the current behavior is preserved.
I have 2 more questions:
1) How can I add the new API option? I already added it to all the Utils
functions and args data structures, but I guess we need to add it to the
main repository now as well.
2) for some reason when I try to run the tests using jest, I get a node out
of memory error... did you ever encounter such a problem?

Thanks for your jelp,
Vladimir

On Mon, Sep 2, 2019 at 3:01 PM Matt Lewis [e-mail] wrote:

Ok, awesome! This is the main root function you want to modify:
https://github.com/mattlewis92/calendar-utils/blob/master/src/calendar-utils.ts#L686-L702

It's made up of lots of smaller pieces though, the logic for generating
the time grid is this function (and will probably be where you will need to
make the bulk of your changes):
https://github.com/mattlewis92/calendar-utils/blob/master/src/calendar-utils.ts#L1054-L1112

and you will probably need to modify this function to make sure events are
positioned correctly with these changes:
https://github.com/mattlewis92/calendar-utils/blob/master/src/calendar-utils.ts#L958

The test suite is quite comprehensive, so it should let you know if you
break anything, and you can write some additional snapshot based tests to
verify the output of the functions is correct, adapting some tests from
this example would work well:
https://github.com/mattlewis92/calendar-utils/blob/master/test/calendar-utils-utc.spec.ts#L169-L185
You can then add snapshots of different combinations of the hourSegments,
dayStart and segmentHeight inputs and verify that the output is correct
by looking at the snapshot data generated.

I think as you described, we don't need to add any additional api options,
and we can use the hourSegments, dayStart and segmentHeight options to
control this behaviour.

Let me know if there's anything else I can do to help guide you 😄

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/mattlewis92/angular-calendar/issues/1080?email_source=notifications&email_token=AABZQ54R3CA5PB7BE6T2DALQHT6CFA5CNFSM4ISPUFL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5VT5TA#issuecomment-527122124,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABZQ57DXMM7MBY4XSOIBPDQHT6CFANCNFSM4ISPUFLQ
.

[mattlewis92]

Ah that's great to hear! 🎉 So the first thing you need to do is make a PR to the calendar-utils repo with the change there. I can publish it as a beta to npm so then you can make a PR to this repo with it included. It needs to be against the 0.28 branch. You can add a new Input to the week view component with the segmentSizeMinutes option (I think the name is ok) and then pass it through to the getWeekView function here: https://github.com/mattlewis92/angular-calendar/blob/0.28/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts#L1092-L1117

You'll probably also need to adjust the getMinutesMoved function so that drag and drop + resizing of events works correctly: https://github.com/mattlewis92/angular-calendar/blob/0.28/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts#L1280-L1285

[mattlewis92]

Hey Vladimir, did you manage to make any progress on this? Anything I can do to help? 😄

[no-response[bot]]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

[HectorDavila]

I need this functionality too :(

[martinsware]

@mattlewis92 Based on your tips I managed to do the necessary changes in both repos.

[mattlewis92]

Amazing, thank you! ❤️ I'll review it this weekend 😄

[David-Silva86]

Hi Matt,

First of all congratulations to you and the team that have developed this calendar. It looks great!

I would like to ask if we are able to be precise to minutes when using the day view.

By this I mean be able to show an event from i.e 13:00 to 18:45.

Currently I can only view events against each hour, but ideally I would like to see events that go to the minutes detail(chunks of 15 minutes would be ok).

I would like this event to end at 18:30 or 18:45.

Is this currently posible?

I have looked at https://mattlewis92.github.io/angular-calendar/#/week-view-minute-precision , but this seems to not be working?

Hope this makes sense.

Many thanks,
David Silva

[mattlewis92]

@David-Silva86 you can show more segments per hour with this option: https://mattlewis92.github.io/angular-calendar/#/day-view-hour-split and you can show events as different minutes by setting the start and end date minutes e.g.

events = [{
  title: 'title',
  start: addMinutes(startOfDay(new Date()), 30),
}]

Hope that helps! 😄

[David-Silva86]

Hi Matt,

Your response time is amazing. Thanks a lot!

My bad! I was using the "StartOfDay" function when setting the end date.

Just checked it and it works fine.

Many thanks,
David Silva

[shalini-github]

Hi I am using mwl-calendar-day-view version 0.24.1. I do not want to migrate my app angular 5 to angular 6. Please suggest how to make day view calendar hour segments scroll to current time automatically when the calendar loads first time?

[martijn19811]

Hi @mattlewis92 , is this feature already available in a beta somewhere? I'm pretty much having the same issues as the OP: I'd love to have only the segments between 1 and 2PM on a day be 20 minutes each for example... and afterwards, it should stick to the normal segment length of 10 minutes. So I think this PR would fix that, right?

Thx in advance!