Component for visualizing schedules, bookings,

Hi everyone,

We are building a tool for one of our clients that requires us to visualize a schedule. Many scheduling tools use a view like this:

We want to avoid creating a custom component so we can currently achieve this functionality by using the Retool table component, but it adds a lot of overhead. It would be great to have an out-of-the-box Retool component for this.

This component could be used extensively for visualizing schedules, bookings, work schedules, resource plannings, etc.

In this way, Retool could be more widely used in organizations that want to create an internal tool for managing schedules.

This would also be a solution for this feature request without "misusing" a Gantt chart for this use case.

What are your thoughts?

Kr,

Dennis

5 Likes

According to the docs, the Calendar component in Retool uses FullCalendar, which has a Timeline layout option. Would it be feasible for the Retool engineers to enable access to this view in the current component?
Feels like it may solve many of these questions ( @victoria ? )

5 Likes

Hi there! Thanks for sending this over @dcartlidge, and thanks @Dennis_De_Reyer for sharing this use case/feedback. I can add exposing the timeline layout option as a feature request!

6 Likes

Hey! Do you have any updates on this? Will a scheduling component be included in your features on the roadmap? In the meantime, we've come across several more customers who could really use this feature to deploy Retool as a complete internal tool.

Use cases we encountered with customers were to build internal tools for scheduling:

  • Resources: Creating a schedule of who will work when. This tool integrates with many other data sources connected to Retool.
  • Rooms/Venues: A customer in the event sector would like to create an app to manage the occupancy of their rooms and venues.

Some customers are exploring tools like Float and ResourceGuru, but they don't need all the functionalities or prefer not to purchase an additional internal tool to manage these matters.

Meanwhile, we are looking into whether we can build a custom component based on these functionalities: https://code.daypilot.org/77607/react-scheduler-tutorial
Ideally, we would have a "Retool Scheduling" component for this purpose :slight_smile:

3 Likes

Hi :wave:

I've come across a couple of cases where a timeline-like visualisation would have been a great. @Tess are there any updates regarding this feature request?

Thanks!

3 Likes

Hi all,

Thanks for sharing your interest & use cases -- I'll share those details internally as well! I don't believe this is on our current roadmap :disappointed: (but I'll check in with the team about increasing the priority), so it may make sense to explore a custom component for the time being

3 Likes

Dennis can you share any more details on how you are using the table component to do resource schedules? As others have said we're seeing the same issues with full cal as it currently implemented. Is the screen shot from your current solution?
Chris

Hi Chris,

Yes we created a solution like this for one of our clients:

If you click on a cell, the user will get a model like this:

We've added some extra CSS and did some workarounds but now it works really well. Here you can see the full use case of that project: Sixth Generation - GTS Projects

Dennis

Dennis thanks for sharing this and the link to your case study - it was very helpful for us to see the visual!

Chris

2 Likes

It was a useful article

1 Like

Just wanted to jump in here and say how useful I would find this feature. We are looking to replace a scheduling tool that we use at work, and I've managed to migrate every other feature of what we do into Airtable. For the developers - just a +1 to have a view/tool like this made available, and to everyone else in the thread, I'm wondering what you ended up using in the meantime?

thanks.

2 Likes

Hi @Dennis_De_Reyer -
I also want to implement the similar dashboard. I don't find the details at - https://www.sixthgeneration.io/projects/gts-projects?utm_source=community&utm_medium=digital&utm_campaign=Q3_2023.

Please help!
Thanks

1 Like

+1, for sure.

1 Like

Hi @mu71rd @MicExpert
Can you help me how to achieve the similar set up like,

Thanks!

Hi @Jyothi ,

It is true that there are no technical details on the link that I provided. We simply explain in more functional terms what we do.

To give some more technical details:

The visualization is just a Retool table where we have hard-coded 4 weeks (28 days), so 28 columns.

The values of these columns are then dynamically filled based on data loaded into the table.

We ensure that a query is executed to fetch data from a specific timeframe.
This data is then loaded into the table in the following structure:

[
  {
    "id": "1234",
    "firstName": "John",
    "lastName": "Doe",
    "days": [
      {
        "date": "2024-07-08",
        "assignments": [
          {
            "assignmentId": "123456789",
            "assignmentName": "Some Assignment Name"
          }
        ]
      },
      {
        "date": "2024-07-09",
        "assignments": [
          {
            "assignmentId": "123456789",
            "assignmentName": "Some Assignment Name"
          }
        ]
      },
      ...
    ]
  }
]

The "days" field in this JSON represents the columns. The first element in the array is the first column, the second element is the second column, and so on.

For this case, we used MongoDB as the database.

Hopefully, this gives you some more technical information that you need.

Thanks for the information @Dennis_De_Reyer !

So, far I just need the table view. Is that table dates (28 days) is something like changes upon clicking the arrows. For example, in the image we can see 24/07. Will that be changed to another months upon clicking the arrow buttons. If yes, can you please ping me the table configuration json. That would be more helpful for me.
image

Thanks

@Dennis_De_Reyer I'm a bit late to the party, but figured I'd share in case this is helpful. Retool now offers a Timeline component that would fit your use case: Introducing the new Timeline component

1 Like