Create a Daily Agenda Using Kanban in Roam Research

With the kanban function, you can create columns and freely move any blocks between them. But, with a bit of CSS you can turn kanban boards on their heads—literally. Learn how to turn a kanban board into a daily planner.

Created by Abhay Prasanna with the help of other Roam plugin developers, Kanban Agenda turns any kanban board tagged with [[Daily agenda]] into a vertical calendar:

How to install Kanban Agenda

Installing Kanban Agenda is a breeze as it requires only a single line of CSS to add the functionality.

Step 1—Add a CSS block on the roam/css page.

Navigate to your roam/css page and add a new CSS block by typing /css and then hitting Enter.

Step 2—Add CSS code.

In the code block you just created on the roam/css page, add the following code*:

@import url('https://abhayprasanna.github.io/kanban%20agenda/kanban-agenda.css');

It should look like this on the page:

Make sure the CSS code block is no more than one level indented on the roam/css page. If you nest the block too deep, it will not work.

_{*If for some reason the code above doesn’t work, check the official Github page of the extension for the latest version of the code.}

Step 3—Set up template.

The simplest way to use the Kanban Agenda is to set up a template. To do this, navigate to the roam/templates page in your graph and add the following code:

• Daily agenda
• [[Daily agenda]]
• {{[[kanban]]}}
• All day
• 00:00
• 01:00
• 02:00
• 03:00
• 04:00
• 05:00
• 06:00
• 07:00
• 08:00
• 09:00
• 10:00
• 11:00
• 12:00
• 13:00
• 14:00
• 15:00
• 16:00
• 17:00
• 18:00
• 19:00
• 20:00
• 21:00
• 22:00
• 23:00
• [[Need to plan]]

It should look like this on the page:

Now, you can add the agenda to any page by typing ;;daily agenda and hitting Enter.

That’s it! Kanban Agenda is ready for use. See the instructions below on how to use it.

How to use Kanban Agenda

As you’ve set up the Kanban Agenda as a template, you can simply add it to a page by typing ;;daily agenda and hitting Enter.

To add an item to a time slot, indent a block under the time. You can add multiple blocks to any time slot. It’s also possible to reference blocks and even add TODOs to the agenda.

To see the agenda, click the bullet directly below [[Daily agenda]]; the one saying <-- Focus on block to view, or shift-click to view in sidebar.

In this example I used Shift-Click on the bullet to open it in the sidebar:

The top and bottom blocks are always visible. Out of the box, the top block has the All day label, and the bottom block has the [[Need to plan]] label. You can adjust these any way you like in the template (step 3 of the installation process).

To change the position of blocks, you can either drag them in the block view (left part of the example above), or directly in the agenda view (right part).

Additional resources

Want to see the plugin in action? Here’s a video demo by Abhay: