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

mudasobwa
Wrote some rant on Business Process Driven Development with Finite Automata (and Finitomata library in particular.)
New
rocket4ce
A comprehensive guide for deploying Phoenix 1.8 applications using Coolify on Hetzner servers. Covers server setup, Coolify configuration...
New
brainlid
Livebook was created for machine learning in Elixir but Livebook isn’t limited to machine learning. I found it works really well for docu...
New
Alex66
I ran Symphony through Giulia, here’s the AST analysis. Yesterday, OpenAI open-sourced Symphony — an autonomous agent orchestration fra...
New
wmnnd
Hey there, I’ve started a little blog series about building and deploying Elixir applications. Now I would like to share with you the fi...
New
zacksiri
In December of 2023 we came to the realization that we needed to build our own image server. After hitting a few snags we decided that it...
New
bencoppock
I write about the frustration that can occur when dealing with string and atom-based keys in maps and how to (safely) translate string-ba...
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
wmnnd
Here’s the story how one of the world’s first production deployments of LiveView came to be - and how trying to improve it almost caused ...
New
pillaiindu
Our very handsome and humble José Valim (@josevalim) just published Kubernetes and the Erlang VM: orchestration on the large and the sma...
New

Other popular topics Top

9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
Nvim
Anybody knows a comprehensive comparison of Django and Phoenix, thanks for the help. Where are they similar? Where do they differ the m...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
klo
Got a question about when to concat vs. prepending items to list then reversing to achieve appending. So i know lists boil down to [1 | ...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New
jaysoifer
Is there a way to rollback a specific migration and only that one (“skipping” all the other ones)? Would mix ecto.rollback -v 200809061...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New

We're in Beta

About us Mission Statement