vipulbhj

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

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

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 :smiley:

rhcarvalho

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" strategically

The default phx-update mode diffs and patches. For the appointments list, we use replace on 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?

Where Next?

Popular in Blog Posts Top

lawik
One of the Erlang ecosystem’s spiciest nerd snipes are hot code updates. Because it can do it. In ways that almost no other runtime can.
New
New
StuntProgrammer
Hey there! This is the first article in what I hope will be a nice series about how I built (and am building) Lofi Limo. If you have any ...
New
brainlid
Phoenix LiveView v0.20.4 offers a hidden gem with its handy little JS.toggle_class/1 feature. This addition simplifies toggling classes f...
New
rrrene
In this series, we take a look at the different ways to organize, structure and execute a good “flow” in our Elixir programs. The latest...
New
stryrckt
Support for AlpineJS in LiveView was added in 0.13.3 and it works fabulously. I just wrote a blog article about it and plan another one s...
New
mudasobwa
Blogged about the motivation and reasoning behind my idea to create yet another FSM library. Long story short: I did it in a proper way :...
New
adolfont
Hi, You all probably know that José Valim is Brazilian and that his native language is Portuguese. I, Herminio Torres, Matheus Pesanha a...
New
paulanthonywilson
I had a bit of a mini-adventure following Sobelow’s advice on adding a CSP to a Phoenix App. If you want to follow along, or want to add ...
New
Qqwy
Update: How to use the Blogs & Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3271 127089 1222
New

Other popular topics Top

hariharasudhan94
lets say i have a sample like a = 20; b = 10; if (a > b) do {:ok, "a"} end if (a < b) do {:ok, b} end if (a == b) do {:ok, "equa...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID<0.412.0> terminating ** (Postgrex.Error) FATAL...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
New
AstonJ
We’ve put together this wiki for Phoenix LiveView - please feel free to add any info you feel is worth including. What is Phoenix LiveV...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement