Daily Agenda using Kanban

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 on its head—literally.

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:

Kanban agenda screenshot

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:

Kanban agenda css example

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

Kanban agenda template example

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]] with the text <-- 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:

Kanban agenda example

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:

Tags: , ,

Was this helpful?