vipulbhj
Building a Full-Featured Calendar in Phoenix LiveView (recurring events, drag-drop, multi-user)
We built a Google Calendar-style scheduling interface entirely in Phoenix LiveView for a clinic management platform. This post walks through the data model, recurring appointments, overlap validation, multi-user views, drag-and-drop with JS hooks, CSS-based positioning tricks, and performance patterns that kept it fast at scale.
Most Liked
derek-zhou
Very cool. Do you have a live demo, I want to play with it, especially for drag and drop with optimistic update.
vipulbhj
Its on the clients platform, but maybe we can do a stripped down version, a git repo folks can try, let me see if I can get the team to cook this up quickly ![]()
rhcarvalho
Thanks for sharing back with the community! I like how you described not only what you did, but why you did it and some of the tradeoffs involved.
Performance Considerations
LiveView re-renders can add up with complex UIs. A few patterns kept the calendar smooth:
1. Use
phx-update="replace"strategicallyThe default
phx-updatemode diffs and patches. For the appointments list, we usereplaceon the container — it’s faster to replace the whole grid than diff dozens of positioned cards.
The default phx-update is "replace"(Bindings — Phoenix LiveView v1.2.5). I wonder what performance problem you were hitting?
Popular in Blog Posts
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance









