The most complicated part about a conference website is the program, which needs to support multiple tracks and hierarchical organization of sessions. In the past, conference chairs would often resort to creating index cards for each talk, and arranging them on a table to group things together (I am not making this up - it actually happened!). The natural evolution of this is a drag-and-drop user interface that allows the conference program chair to arrange the talks visually, so that's what I set about building.

The conference chair starts from a list of accepted papers in JSON format (which for IACR is derived from websubrev). They answer a few simple questions and start filling in the extra information about session chairs, times, breaks, etc. Users can save and return to edit a schedule later, or start from a basic template.

This was built with Bootstrap 3, jQuery, dragula, the jQuery date range picker plugin, time picker plugin, and the JavaScript plugin datepair. This is in active use on the IACR site.

See the code on GitHub


Moving gif image of what dragging and dropping talks into sessions looks like, as well as the modal that appears when you're editing a talk.
In case you don't feel like trying to demo yourself, here's a short screen capture of what adding a talk to a session and editing that talk looks like.
Screenshot of the editor, done in shades of teal, with two buttons asking if you're making a new program or opening an existing one. A navbar runs along the top with more options, including help.
What you see upon arrival to the editor.
The modal for editing a session, where you can set the title, location, and moderator.
This is how you edit a session, with options for setting title, location, and moderator.
The modal for editing a time slot. From here you can also delete a time slot or split it into two tracks.
Editing time slots is also possible.