Skip to content

Scheduler component #6092

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 87 commits into
base: master
Choose a base branch
from
Open

Scheduler component #6092

wants to merge 87 commits into from

Conversation

stsrki
Copy link
Collaborator

@stsrki stsrki commented May 3, 2025

Closes #475

It's a large PR, so I will try to break it down.

The Scheduler component is made as a generic component, with an API similar to DataGrid, where TItem is meant to define the collection of items that is edited and handled by the component. The Data parameter is used to populate the component.

At minimum, the TItem must have Title, Start, and End fields named as such. However, they can be overridden if needed with Scheduler *Field parameters.


Scheduler has several supported view types.

  • Day
  • Week
  • WorkWeek
  • Month

Each of them has a separate parameter that affects it independently of other views. Such as Start and End time, work hours, etc.


Scheduler has a built-in editor that is enabled with Editable parameter. And when used it always checks if there exists a Field on TItem, that can be edited. If found, it will be possible to edit in the editor.

If Editable is disabled, then users have to use callbacks to store and edit their Data items.


We also support recurring items. They work by defining RFC-5545(see https://icalendar.org/Home.html) rules on a base TItem.

This Item will then show any recurring item in a view. However, these recurring items will not be persisted or exist in the Data collection or parameter. It is up to the user to handle real occurrences independent of the UI in their system. Only exceptions to the rules, like deleted occurrences and rescheduled occurrences, will be stored as part of the Item.

@stsrki stsrki requested a review from tesar-tech May 8, 2025 16:14
@stsrki
Copy link
Collaborator Author

stsrki commented May 8, 2025

I believe most of the bugs are now fixed.

As for the other things you have mentioned:

Adding an event by dragging.

I like it, but would rather leave this for a future version.

If you highlight some text and drag an event, it does this 🤷.

Not sure what to think about this. It's kinda an invalid state of the UI. I have tried some other schdulers and the also behave the same. SO I would just leave it as it is.

  • It appears there is some trouble with displaying recurring events: Week vs WorkWeek (also missing in day view):

Still trying to figure this.

@tesar-tech
Copy link
Collaborator

Just few maybe opinionated details:

  • This is something about not-ideal user experience. The hover box (the black border) is for the place where my mouse is. It would be better if the hover box was shown where the center of the hover object is. Here is an "extreme" image where almost the full event is in right, but it still shows the hoverbox on left.

image


  • Simple repeat event (by clicking to repeat row):

image

results in:
image

which is probably technically correct, but I somehow didn't expect the event to repeat forever. So maybe forever option next to the End and Count? Or forcing the End or count...? Maybe the End itself is confusing, because there are two Ends so maybe explaining the one more? ("Repeat ends at: ")


  • Maybe I mentioned already, not sure. But the 1 on never should not be there:

image
then it reads: "Repeat every 1 never"


Also - I didn't yet tested on other provider, rather waiting for this to be feature complete - or you have this coverd?

@stsrki
Copy link
Collaborator Author

stsrki commented May 15, 2025

Just few maybe opinionated details:

  • This is something about not-ideal user experience. The hover box (the black border) is for the place where my mouse is. It would be better if the hover box was shown where the center of the hover object is. Here is an "extreme" image where almost the full event is in right, but it still shows the hoverbox on left.

image

Not sure about this one. For first, it would be much harder to implement as then we would somehow need to detect the collision of the HTML elements. Currently we just use mouse events, which is much easier to do.

Also, it seems Teams is doing the same so I don't think it is wrong what we have

image

@stsrki
Copy link
Collaborator Author

stsrki commented May 15, 2025

  • Simple repeat event (by clicking to repeat row):

image

results in: image

which is probably technically correct, but I somehow didn't expect the event to repeat forever. So maybe forever option next to the End and Count? Or forcing the End or count...? Maybe the End itself is confusing, because there are two Ends so maybe explaining the one more? ("Repeat ends at: ")

I think we can just add nother label that explains it to the user what is going to happen

image

@stsrki stsrki added this to the 1.8 milestone May 16, 2025
@tesar-tech
Copy link
Collaborator

image

I don't have this in the New appointment. Am I missing something?

@stsrki
Copy link
Collaborator Author

stsrki commented May 17, 2025

image

I don't have this in the New appointment. Am I missing something?

I don't see an image. What are you asking about?

@tesar-tech
Copy link
Collaborator

#6092 (comment)
img from this comment

@stsrki
Copy link
Collaborator Author

stsrki commented May 17, 2025

#6092 (comment) img from this comment

It is a screenshot from the Teams app. I think it is a good approach for telling users what they have selected in a human-readable way.

@tesar-tech
Copy link
Collaborator

#6092 (comment) img from this comment

It is a screenshot from the Teams app. I think it is a good approach for telling users what they have selected in a human-readable way.

Oh. Yeah, agree. I was under impression you already done it.

stsrki and others added 7 commits May 20, 2025 10:30
* Selection logic

* Listen on document level with JS to cancel selection

* Comment

* Fix selecting css

* Better transaction handling

* Refactor transactions

* SlotSelectionMode parameter

* Enable selection in demo

* Listen for document mouse only when selecting

* Fix SelectionEnded

* Use InvokeSafeVoidAsync in JSModule

* Deselect when outside of valid day column

* Add CSS file

* Optimize slot mouse events to only use them when needed

* Add extension methods to RenderTreeBuilderExtensions

* Manually build slot and items

* Add more Attribute overloads

* Fix TW build error

* null-coalescing

* Refactor null selection dates

* Remove unused totalSlots var

* One line style

* Add ThrottleDispatcher

* Optimize loops with key

* Remove unused BackgroundColor

* DateUtils for Min and Max

* Unregister previous mouseUpHandler if exists

* Remove unused DraggableAttribute

* Clean
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Scheduler Component
2 participants