Allow events to be dragged and dropped - Githubissues

mattlewis92 / angular-calendar

A flexible calendar component for angular 15.0+ that can display events on a month, week or day view.

https://mattlewis92.github.io/angular-calendar/

MIT License

2.73k stars 868 forks source link

Allow events to be dragged and dropped #10

Closed mattlewis92 closed 7 years ago

mattlewis92 commented 8 years ago

[x] month view
[x] week view
[x] day view

Remaining items

[x] fix failing test
[x] events cant be dragged back to their original positions
[x] resizing and dragging of events is currently broken -> disable drag and drop when resizing
[x] disable dragging outside of the calendar for the week and day views -> https://github.com/mattlewis92/angular-draggable-droppable/issues/10

RamitAnandSharma commented 8 years ago

I need this feature in my project. When is this feature available for use,

mattlewis92 commented 8 years ago

It's open source so completely limited by my spare time available...

ipoweb commented 7 years ago

maybe we can help you ?

mattlewis92 commented 7 years ago

That would be awesome! Happy to review a PR that adds this functionality. API wise it should replicate what's available in the ng1 version. The first thing to do is find or build a standalone drag and drop lib for angular 2 that has all the features required (AOT compatible, drop zones, validation, snap grids etc). Once that's done it should be pretty trivial to add this into this library.

On 30 Oct 2016, at 15:58, Sirene notifications@github.com wrote:

maybe we can help you ?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

ipoweb commented 7 years ago

Do you want to use ng2-dnd to do that ? or from scratch ?

mattlewis92 commented 7 years ago

Looking at the issues for that lib it doesn't seem to be AOT compatible and lacks several features needed by this module. I'm not sure how responsive the author is to PRs either. I guess worst case I could always start a fork rather than starting from scratch. I have some free time tomorrow afternoon so will dig a bit deeper then and see what's possible 😀

On 17 Nov 2016, at 17:43, Sirene notifications@github.com wrote:

Do you want to use ng2-dnd to do that ? or from scratch ?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

mattlewis92 commented 7 years ago

After giving it some more thought I've decided to just roll my own dnd directives to give the functionality that the calendar needs as there's quite a lot missing from the angular dnd library. I've created the repo here: https://github.com/mattlewis92/angular-draggable-droppable

and implemented a basic draggable directive + created issue stubs for the rest of the needed features: https://github.com/mattlewis92/angular-draggable-droppable/issues

Feel free to contribute! 😄

ipoweb commented 7 years ago

i have try an another plugin who maybe help, it's ng2 dragula ? have you try it ?

mattlewis92 commented 7 years ago

I did look at dragula, unfortunately it doesn't have any support for snap grids. I made some good progress this weekend on building my own directive, I just need to implement a few extra features and then it should be good to go!

ipoweb commented 7 years ago

Great news :) Thanks for all you do for the community :dancing_men:

mattlewis92 commented 7 years ago

No problem, happy to help! 😃

RamitAnandSharma commented 7 years ago

Any update on the release date of this feature

ipoweb commented 7 years ago

As say Jedi : Be patient :D, mattlewis92 create new repository to test this functionality https://github.com/mattlewis92/angular-draggable-droppable

mattlewis92 commented 7 years ago

I've built the low level directives to handle drag and drop: https://github.com/mattlewis92/angular-draggable-droppable

It's now just a case of hooking up the calendar to use them.

mattlewis92 commented 7 years ago

Finally made some good progress with this today: https://github.com/mattlewis92/angular-calendar/tree/0.5.0

There are a few issues I've found with the drag and drop directive as I was implementing this that I need to fixed first, but all are pretty minor and shouldn't take long to fix. I'll aim to get them done today! :)

mattlewis92 commented 7 years ago

I think I've ironed out all the bugs and I will cut a new release once I've finished the other issues in the 0.5.0 milestone. In the mean time if you want drag and drop today, you can install 0.5.0-beta.0 via npm install angular-calendar@beta. Let me know if there are any issues with it! 😃

To use it add the draggable: true property to your events, and system.js users will need to include the angular-draggable-droppable in their system.js config.