Skip to content

feat: add Gantt chart view for boards#7812

Merged
grnd-alt merged 5 commits intonextcloud:mainfrom
aparcar:gantt
May 6, 2026
Merged

feat: add Gantt chart view for boards#7812
grnd-alt merged 5 commits intonextcloud:mainfrom
aparcar:gantt

Conversation

@aparcar
Copy link
Copy Markdown
Contributor

@aparcar aparcar commented Mar 31, 2026

Summary

Add a timeline/Gantt view as an alternative to the kanban board view, allowing users to visualize card schedules across time using frappe-gantt.

  • Add GanttView component with Day/Week/Month view modes
  • Add Kanban/Gantt view toggle in board controls
  • Store view mode preference in localStorage via Vuex
  • Stack-based color coding with legend and undated cards section
  • Drag-and-drop support for rescheduling cards
  • Auto-fit column width to fill container on wider views
  • Add frappe-gantt dependency and webpack resolve alias for its CSS
image

This is inspired by https://github.com/nextcloud-community/ncgantt

TODO

  • Sometimes entries "jump" around while dragging, however this might be an issue with my browser

Checklist

  • Code is properly formatted
  • Sign-off message is added to all commits
  • Tests (unit, integration, api and/or acceptance) are included
  • Documentation (manuals or wiki) has been updated or is not required

Copy link
Copy Markdown
Member

@grnd-alt grnd-alt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

works thanks a lot for this contribution. But there is some room for improvement. also darkmode looks like this:

Image

Comment thread src/components/board/GanttView.vue Outdated
Comment thread src/components/board/GanttView.vue
Comment thread src/components/board/GanttView.vue
Comment thread src/components/board/GanttView.vue Outdated
Comment thread src/components/board/GanttView.vue Outdated
Comment thread src/components/board/GanttView.vue Outdated
Comment thread src/components/board/GanttView.vue Outdated
@aparcar aparcar force-pushed the gantt branch 2 times, most recently from 1f25f7f to e1f6cb4 Compare April 5, 2026 13:19
@aparcar
Copy link
Copy Markdown
Contributor Author

aparcar commented Apr 10, 2026

@grnd-alt I ran Claude again and worked on the fixes. Since this is mostly AI generating (somewhat usable) things, I understand that this quickly starts to waste your time. In other words, please feel free to close this PR until someone comes along with actual web dev knowledge to create a proper implementation.

@github-actions
Copy link
Copy Markdown
Contributor

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)

@grnd-alt grnd-alt force-pushed the gantt branch 4 times, most recently from 683a88f to 3d3a95a Compare April 27, 2026 08:34
@grnd-alt grnd-alt requested a review from a team April 27, 2026 12:00
Copy link
Copy Markdown
Member

@mejo- mejo- left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall a great addition ❤️

I tested a bit, skimmed through the code changes and made some comments.

Comment thread src/store/main.js Outdated

<div v-if="ganttTasks.length > 0" ref="ganttContainer" class="gantt-chart" />

<NcEmptyContent v-if="!ganttTasks.length && !undatedCards.length">
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For an empty board, it might be better to switch back to the kanban view, no? When I create a list using this interface, I cannot really do anything with it afterwards, as the gantt view doesn't allow to add another list or cards anyway.

Comment thread src/components/board/GanttView.vue Outdated
@grnd-alt grnd-alt force-pushed the gantt branch 3 times, most recently from 5e4cd63 to c7854da Compare April 29, 2026 13:03
@aparcar
Copy link
Copy Markdown
Contributor Author

aparcar commented Apr 29, 2026

Discussing this with colleagues, they asked for direct links to the gantt or deck view. Could this be added to the url handling?

@grnd-alt grnd-alt requested a review from mejo- May 4, 2026 09:00
@grnd-alt
Copy link
Copy Markdown
Member

grnd-alt commented May 4, 2026

@aparcar we can think about it as a follow up, but I'd prefer to get this pr done for now so we can have it ready in 34.

Copy link
Copy Markdown
Member

@mejo- mejo- left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested again, and works well.

As written in chat, moving a card on the Gantt diagram results in two PUT .../api/v1.0/cards/<cardId> requests, the first with startdate: null and the second with a value in startdate.

I guess there's a flaw somewhere and the first request should not be sent.

Apart from that it looks good. Approving already so you don't need to ping me again after fixing this final issue 😉

aparcar and others added 4 commits May 6, 2026 10:11
Add a timeline/Gantt view as an alternative to the kanban board view,
allowing users to visualize card schedules across time using
frappe-gantt.

- Add GanttView component with Day/Week/Month view modes
- Add Kanban/Gantt view toggle in board controls
- Store view mode preference in localStorage via Vuex
- Stack-based color coding with legend and undated cards section
- Drag-and-drop support for rescheduling cards
- Auto-fit column width to fill container on wider views
- Add frappe-gantt dependency and webpack resolve alias for its CSS

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Paul Spooren <mail@aparcar.org>
Signed-off-by: grnd-alt <git@belakkaf.net>
Signed-off-by: grnd-alt <git@belakkaf.net>
Signed-off-by: grnd-alt <git@belakkaf.net>
Signed-off-by: grnd-alt <git@belakkaf.net>
@grnd-alt grnd-alt dismissed their stale review May 6, 2026 13:53

done

@grnd-alt grnd-alt merged commit adc505e into nextcloud:main May 6, 2026
36 checks passed
@aparcar
Copy link
Copy Markdown
Contributor Author

aparcar commented May 6, 2026

Cool! Thanks for making this happen

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add diagramme gantt

3 participants