[New plugin] Timeline and Resource Scheduler

Showcase Plugins
1

Hey everyone!

I had a need that I decided to release as a plugin. A Timeline and Resource Scheduler visualization.

This visualization will allow you to display a timeline of events or schedules. This could be for use cases such as viewing all client touch points or completed milestones of a project. It can also be used to view schedules for resources (people, rooms, etc) and make modifications to those schedules. It has editing capabilities built in and an enormous amount of configuration.

🔗 Demo

🔗 Demo Editor

🔗 Plugin Page

Documentation

Custom Event Item Content

Not required. By default, each content line field is placed on a new line. This allows for a deeper level of customization on how it's displayed. Using merge fields from the Type of Content's App Type, you can define the html you wish to show in the event item. Sample merge field formatting below. Include those values where you would like the text to be substituted. Included is a Timeline Helper element to assist with defining the correct merge field formatting.

{{name_text}}
{{order_number}}
{{planner_text}}

Axis Time Formatting
Token Output
Month M 1 2 ... 11 12
Mo 1st 2nd ... 11th 12th
MM 01 02 ... 11 12
MMM Jan Feb ... Nov Dec
MMMM January February ... November December
Quarter Q 1 2 3 4
Qo 1st 2nd 3rd 4th
Day of Month D 1 2 ... 30 31
Do 1st 2nd ... 30th 31st
DD 01 02 ... 30 31
Day of Year DDD 1 2 ... 364 365
DDDo 1st 2nd ... 364th 365th
DDDD 001 002 ... 364 365
Day of Week d 0 1 ... 5 6
do 0th 1st ... 5th 6th
dd Su Mo ... Fr Sa
ddd Sun Mon ... Fri Sat
dddd Sunday Monday ... Friday Saturday
Day of Week (Locale) e 0 1 ... 5 6
Day of Week (ISO) E 1 2 ... 6 7
Week of Year w 1 2 ... 52 53
wo 1st 2nd ... 52nd 53rd
ww 01 02 ... 52 53
Week of Year (ISO) W 1 2 ... 52 53
Wo 1st 2nd ... 52nd 53rd
WW 01 02 ... 52 53
Year YY 70 71 ... 29 30
YYYY 1970 1971 ... 2029 2030
YYYYYY -001970 -001971 ... +001907 +001971
Y 1970 1971 ... 9999 +10000 +10001
Note: This complies with the ISO 8601 standard for dates past the year 9999
Era Year y 1 2 ... 2020 ...
Era N, NN, NNN BC AD
Note: Abbr era name
NNNN Before Christ, Anno Domini
Note: Full era name
NNNNN BC AD
Note: Narrow era name
Week Year gg 70 71 ... 29 30
gggg 1970 1971 ... 2029 2030
Week Year (ISO) GG 70 71 ... 29 30
GGGG 1970 1971 ... 2029 2030
AM/PM A AM PM
a am pm
Hour H 0 1 ... 22 23
HH 00 01 ... 22 23
h 1 2 ... 11 12
hh 01 02 ... 11 12
k 1 2 ... 23 24
kk 01 02 ... 23 24
Minute m 0 1 ... 58 59
mm 00 01 ... 58 59
Second s 0 1 ... 58 59
ss 00 01 ... 58 59
Fractional Second S 0 1 ... 8 9
SS 00 01 ... 98 99
SSS 000 001 ... 998 999
SSSS ... SSSSSSSSS 000[0..] 001[0..] ... 998[0..] 999[0..]
Z -07:00 -06:00 ... +06:00 +07:00
ZZ -0700 -0600 ... +0600 +0700
Unix Timestamp X 1360013296
Unix Millisecond Timestamp x 1360013296123

Support & Feedback

Let me know if it doesn't do something you need or if you run across any issues.... Just toss a reply in here or send me a message!

Updates

1.0 - May 9, 2023

Initial Release

2 Likes
2

@Mike.E This is exactly what’s been missing on Bubble. However on my end - I can’t get any data to appear from my data source? Though the grouping is working correctly - it’s just not populating the bars.

Is there a walkthrough you have or a way we could connect?

3

@Shakeeb I don’t have a walk through at the moment. Have you looked at the Demo? Are you grouping by a related data type or by a field in the source data? Are there any errors in the debugger? Can you post a screen shot of the timeline configuration?
For grouping, if it’s a related data type field, the visual will only support a 1 to 1 relationships (no lists).

Mike

1 Like
4

Hey @Mike.E thanks for the response.

Solved the issue. I had one record that had some empty fields, causing all other records not to show in the timeline.

Added conditionals to only search for records where fields are not empty.

Is there any way to use conditional formatting on the timeline for customization? I.e. if a content field is (x) set background colour of those items to (y).

5

@Shakeeb

You can use custom html in the event items that can allow you to do conditional formatting based on field values. It allows you to use merge fields from the source data to provide values.

Pulled from second example in the demo app:

<div style="background-color:{{backgroundcolor_text}}; border-radius: 5px; padding: 5px;" >
<p style="color: #CE34F1;">{{name_text}}</p>
{{start_date_date}}<br/>
{{end_date_date}}<br/>
</div>

I just made an enhancement (new version 1.1.0) to get most of the way to changing the background color. The background color of the parent div can’t be changed, but the div containing the text can. See the demo app for the example.

Mike

1 Like
6

Great Job. I’ve been building my own tools for visualisation but this looks like a winner!

7

@Mike.E - I should have been more clear. I mean can this app do conditional formatting based on dynamic content.

For example - if {{status_text}} is ACTIVE then set the hex to yellow. or if {{status_text}} is PAUSE then set hex to red.

Haven’t been able to find a working HTML/Javascript example.

8

@Shakeeb It does not support conditional formatting based on dynamic content in that way. The conditional would need to be managed outside the plugin and provide the resulting value through a field.

10

Hey @Mike.E ,
great plugin! I have a question regarding json api response support.
I’m using a xano backend and try to get the merge fields work.
But neither the scheduler control nor the timeline helper does get my response data type. Could you give me a hand with this?

The response of my xano endpoint is like this json:

{
    "reservations": [
        { 
            "ReservationId": 3,
            "ReservationTypeId": 2,
            "ScheduledStart": 1700503200000,
            "ScheduledEnd": 1700503300000,
            "ResourceId": 4,
            "ResourceName": "name of resource 4"
        },
        { 
            "ReservationId": 5,
            "ReservationTypeId": 2,
            "ScheduledStart": 1700504200000,
            "ScheduledEnd": 1700504300000,
            "ResourceId": 6,
            "ResourceName": "name of resource 6"
        }
    ]
}

This is the error report:

The plugin Timeline and Resource Scheduler / element Timeline Helper threw the following error: TypeError: Cannot read properties of undefined (reading '%f3')
    at eval (PLUGIN_1680895983958x566917538819604500/Timeline-and-Resource-Scheduler-update--Timeline-Helper-.js:9:32)
    at https://organizer01.bubbleapps.io/package/run_debug_js/85a5a9ce43a56da80a2a8f8de1e3177cf1345f5d0b94584f97d4a523ee1d6f8c/xfalse/x27/run_debug.js:530:673 (please report this to the plugin author)
11

Love the plugin! Would really like an action where doing something on my bubble.io app can trigger a workflow to select a different timeline item. For example, having a right and left arrow to select the next or previous item in a timeline (so it can highlight it, not just scroll to it), would be a great feature.

1 Like
12

Hi @Mike.E can the data be displayed with the x & y axis reversed? So would be looking at a day view with columns of events or resources etc?

13

Hi, is there a way to make the item background colors dynamic instead of having them all the same color?

14

Hi,

I’m trying to set the plugin in for a booking management application.
I’ve got an issue when the client is empty, even if I don’t group the booking by the client, and it’s annoying because I need to display all the reservations, even those without a client.

Do you know how I can fix this?
Thanks a lot,
Lorene

15

can this enable an overlap of events like you would see in Google Calendar? From the examples I do not see this functionality exemplified. The idea being, if user has an event from 1PM to 5PM and another from 4PM to 6PM on the same day, that both events will be shown in the appropriate time fields (so from 4-5PM there are two events side by side)

16

Esse plugin não está disponível?