Hours view

[vickyRathee]

Anyway to zoom to hours view to display hours with 30min..1hr or customizable gap ?

Here is an example:

[oOps1627]

I have published the 0.2.1 version where you can pass your own template for customizing the gap. Now timeline component takes in the "columnSeparatorTemplate" input

[vickyRathee]

Any example on code sandbox to make the hours view?

[oOps1627]

https://codesandbox.io/s/affectionate-cache-zrsexl

This is an example of the custom gap. For the hours view you have to provide your custom logic which is not implemented already in the library. This is can be done by providing your custom StrategyManager inside "forChild" method like it described in the documentation. You can see the source code of the library to figure out how works existed view modes and add your own.

[vickyRathee]

ok, thanks. I will try this out.

[vickyRathee]

@oOps1627 thanks again, I was able to create the hours view. My next question is how to display single user events in same row instead on next row.

For example, Tom has 2 events. It should be displayed in same row with just single entry of his name in sidebar. Any suggestion?

[oOps1627]

I didn't implement that logic because it is not clear how it should work with the items which have inner items. Also by default items are sorted by time, not by groups. So unfortunately now this is impossible. The only way you can do it is to add this logic by creating a fork of this library or creating a pull request.

[vickyRathee]

This is how it should work -

https://codesandbox.io/s/fullcalendar-angular-example-project-cy9eup

• The sidebar should show unique names only based on id from the data array
• The calendars should show all the items from the data in same row if id matches in corresponding row header on given time.

I'd be happy to buy you a coffee or $100(one time sponsorship) if you can make these changes to make the library usable to show events for multiple users.

[oOps1627]

Ok, I will try to do it. Sponsorship is a good motivation ;)

[vickyRathee]

@oOps1627 sounds good.

While you do it, also check the drag-and-drop. It seems you've limited this to drop on same row only, but the drop should be allowed on other rows as well.

For example, an event assigned to Tom can be reassigned to Nick as well.

[oOps1627]

@vickyRathee I made a new release (0.3.1) so you can check it. I updated the demo project so you can see how it works now. I didn't have much time for testing, so if I find some issues I will push a new release.

What about drag-n-drop, I will think about it, because seems it can make some troubles with the current logic

[vickyRathee]

I don't see any changes on github to test hours view with 0.3.1? Can you please push the changes here

[oOps1627]

@vickyRathee done

[oOps1627]

@vickyRathee did you try it how it works?

[vickyRathee]

@oOps1627 Just back from the weekends, will be testing today.

For drag-and-drop, this is how it should work -

Can you add some other link for donation, PayPal doesn't seems to work

[oOps1627]

@vickyRathee you can try Patreon: https://www.patreon.com/Angulardeveloper

Or my Ethereum wallet: 0xf2F33e71Fc740C104221c929910bf94E1c90620d

Or send it to my USD card: BENEFICIARY KRASHIVSKYI ANDRII 46016, Ukraine,region Ternopilska,city Ternopil,street Kyivska,building 1,flat 152

IBAN: UA533052990262096400931231955

ACCOUNT 4149 4993 7313 2289

BANK OF BENEFICIARY JSC CB PRIVATBANK, 1D HRUSHEVSKOHO STR., KYIV, 01001, UKRAINE SWIFT CODE/BIC: PBANUA2X

CORRESPONDENT ACCOUNT 36445343

INTERMEDIARY BANK Citibank N.A., NEW YORK, USA SWIFT CODE/BIC: CITIUS33

[vickyRathee]

I am really sorry. None of the payment option seems to work. What is your PayPal email?

[oOps1627]

hmm... Maybe this is my wrong but I don't understand the problem's reason. My PayPal email is andriy162726@gmail.com. This email also uses in the [Wise] and [NETELER] platforms.

Also I have created an account in [Buy Me a Coffee] https://www.buymeacoffee.com/andriy1627.

Please, notify me when you succeed or fail to send

[vickyRathee]

thanks, I sent $100 via buymeacoffee website.

I'd like to suggest two more small improvements if you can some time -

• Clicking anywhere on timeline should emit output event (or click function somewhere), so that the developer can use that to open a modal dialog which can be used to create new event on clicked date time.
• Drag and drop should work on other rows as well, instead the same row only.

[oOps1627]

Thank you! I will try to implement it soon

[oOps1627]

@vickyRathee Please look at the new 0.4.1 version. Now each item has canDragX and canDragY properties. But the logic was changed and the library doesn't change the dates by itself anymore. You have to do it manually. Also I added timeGridClicked output property to get information about the cell where it was clicked. If you want to get information about a cell without being attached to 'click' event you can use 'getCellByCoordinates' function where you have to pass x and y coordinates

[vickyRathee]

@oOps1627 thank you, these feature will really make the library in top position to consider in production environment.

I have a question regarding setting the background color white/gray based on hours. Is this possible somehow via CSS or can we consider a businessHours or enabledHours property addition to set color and enable/disable some hours?

For example, I want to set the working hours background color to white and non-working hours to gray. More details here - https://fullcalendar.io/docs/businessHours

[oOps1627]

Do you want to have the opportunity to change the background color both horizontally and vertically? I don't know how it implements correctly. The only way I see is creating the cells for each column and row like in the table. But I don't like it because many elements in DOM will be a bad influence on the performance

[vickyRathee]

No, horizontal only to set the background color based on businessHours on hours view

[vickyRathee]

@oOps1627 Any thought on implementing businessHours ?

[oOps1627]

@vickyRathee I don't understand clearly. Horizontally we have rows which created by user. It is not required to be hours rows. You can try to customize rows via css using selector .rows:nth-child. I didn't try it but maybe it will works

[LuisSilva-SCL]

@oOps1627 thanks again, I was able to create the hours view. My next question is how to display single user events in same row instead on next row.

For example, Tom has 2 events. It should be displayed in same row with just single entry of his name in sidebar. Any suggestion?

Hi, could you show the logic behind displaying the hours?, I can't see how to do it and I'm very stuck, Thanks in advance