Resizable Events #406
Resizable Events #406
Conversation
|
hey there thanks a lot for the PR! Sorry i'm a bit slow to review I'm a bit sort on time at the moment but it's really appreciated. I do think I would at least split this into a separate addon, so folks can use resizing without drag and drop if they want. |
|
Hey @jquense no worries. Thanks for building out this calendar component. I did think about the concept of DnD and Resizable being separate but the way I implemented it, one would be useless without the other. My goal here was to offer the functionality found in google calendar; there, you can only resize from the bottom so to adjust an event's duration and start time you need both resizeable and drag and drop functions. We could definitely break it out and offer a Calendar.app style experience where events are resizable at top and bottom but I'm worried it will be a bit of duplicated code/functionality between the DnD addon and the Resizable addon. |
|
@jnmandal sorry for the delay 😳 Why would they be useless seperated? It seems like you make use of react-dnd but that's ok, if a user uses both addons the dependencies will be shared. I don't mind them being together honestly but I'd like to be able to disable drag and drop and only use resize if I wanted. |
|
Hey @jquense no worries. I just mean the functionality this PR provides is just to allow the end date of an event to be changed. I did not add a resizable anchor to the top. On Calendar.app you can resize both top and bottom (start and end) but in google calendar, only bottom (end). I only implemented the "google calendar" resizing so its not very useful decoupled from the ability to drag and drop the whole event as well. |
|
ah I gotcha, that makes sense. still folks may just want to change the duration if not the start time of the event. Would it be a lot of trouble to make them individually togglable? We can totally keep them in the same addon so you should still get the benefit of them being coupled right? |
|
Thank you so much for adding Resizable Event feature to BigCalendar. |
|
Sorry for delay on fixing this up, I have been slammed; I will look into decoupling dragging from the resizing this weekend |
|
What is the estimated timetable for this feature? Just wondering |
|
whenever folks get it done :) |
|
Was hoping to resolve issues last weekend but I'm a little behind on some projects right now 😅 I think I can take a stab at this sometime this week |
|
I will take a look at your fork @jnmandal, let me know if I can help in anyway. |
|
@jnmandal I think if it's okay, we will run with the fork that you have so this feature can be integrated in in our project. Thanks for working on this. We will try to contribute if we are able to take it further. |
|
Yeah @arecvlohe I am unfortunately still in process of converting this into a separate addon -- took a stab yesterday while on an airplane. I'm grappling w/ how to do it w/o duplicating so much of the dnd addon and then also making them play nice together. TBH, I am also planning on running with fork for now as I'm still slammed and need to ship. If someone else has idea for implementation or wants to take over please go for it. |
|
I think it's foolish to try to seperate them completely. Isn't it better to just make it possible to turn them off separately while still being part of the dnd addon? @jquense said that was fine. |
|
Yes! sorry if was unclear i'm ok with this being in the same addon as DND |
|
I'm ready to help with this. @jnmandal, I will look into your fork |
|
So it looks like having this in the dnd addon is fine. So that's clear. What @jquense is asking for is that both ends be toggle-able in day view. I will be working on adding this toggle-ability to the month view where users can adjust the dates by toggling the left and right parts of the event. If I can get this working relatively soon then I will tackle the adjustment to make both end toggle-able in the day view. Example: |
Summary: There were errors in my branch because importing the .default was not pulling in the correct default whereas when I removed it, it seemed to work fine. This might be some kind of change in React 15.6 for how default modules are imported/required.
Summary: For <EventCell /> to know that it can be resized I am passing down the resize prop to that component. This is because, unlike in the previous implementation, I am not passing down what would be the eventWrapper from the dragAndDrop addon. I didn't know how to pass down multiple components based on whether the calendar was resizable. So I went this route. Sorry, not sorry.
Summary: I created <ResizableEventLR /> to handle resizing events in the month view. If <EventCell resizable /> then it will render the resizable component. I added styles so that I could see what is going on. There is a red bg. Sorry, not sorry. There is no functionality at the moment but I started building it out. There is certainly more to be worked on here.
Summary: Updated the resize function to be aware of the end as well as the start time. This is when there are two dnd handlers on an event at once. I renamed the component to be more semantic with its usage. Styles were correspondingly updated.
Summary: I didn't realize the conent should be aligned left.
|
I have a working prototype for resizing month events. @jnmandal These changes were made off of your fork, so I could push to your repo to get these changes into your fork/branch. I will also work on adding toggling to the top and of the event in week/day view. Please add any comments you might have @jquense. Also I am wondering if I should just push my branch so you can see what the code looks like. Just let me know.
|
Summary: Refactored components to look a bit more readable.
Summary: Refactored <ResizableEvent /> and added the ability to resize the top component.
Summary: Refactored the if/else statement into a switch statement.
|
I have completed a prototype for the month and week/day resize events that can be resized by dragging the left/right and top/bottom of the elements respectively. Here is what they look like thus far: Week
Month
I am hesitant to start another PR but if I don't connect with @jnmandal then I think I might have to. What are your thoughts @jquense? |
|
If you want to check out the relevant changes go here |
Summary: I deleted these chanages thinking they were old. My mistake!
|
@arecvlohe thanks for doing this. Looks like a big improvement. I added you as collaborator to my fork so you can push there and update this PR and/or feel free to open additional. Sorry I have been MIA. |
Summary: Remove unused code.
Resize Events in Month View and Resize Week/Day Events on Both Sides
|
@jquense check out #578 its the same as this PR but cleaner w/ a rebase @arecvlohe kindly picked up my slack and made the improvements requested. thanks all |
This PR adds the ability to resize events to the DND plugin, as discussed in issue #382. It includes:
bug fix to core:
eventComponentwas being destructured incorrectly in theDayColumncomponent'srenderEventsfunction (so it was always undefined)enhancements to dragAndDrop addon:
resizablewill have the wrapper use a new componentResizableEventas theeventComponentfor the calendaronEventResizecallback will give the ability to hook into the DND wrapping. It receives:resizeType: 'drag' or 'drop' based on what type of interaction is causing the resizeeventData: object containing the original event as well as a newendfor the eventgotchas:
Since only the original event object is accessible through react-dnd... In the
onEventResizecallback you will not be able to use Array.prototype.indexOf for finding the event again -- unless you continue to mutate the original event and splice it into the cloned events array... but I'm not sure if we would want to recommend that practice