[ANGULAR] Agenda range day show multiple days

[marcio]

Hey,

You can add a CSS class with display: none that will hide the other row, you can use the following snippet:

modes : {
	agenda : {
		columns : {
			agenda : {
				renderer({ rowElement, row }) {
					// Check if the row is not the first one, then add the custom 'hide-row' class
					if(data.row.dataIndex > 0) {
  						data.rowElement.classList.add('hide-row');
					}
                    			// We need the system-provided cell rendering
                    			return this.defaultRenderer(...arguments);
                		}
            		}
        	}
    	}
}

And you need to have a CSS class like this

.hide-row {
	display: none;
}

You can test that in our demo https://bryntum.com/products/calendar/examples/basic/.

[alexandru_tess]

If you go to https://bryntum.com/products/calendar/examples/frameworks/angular/listview/dist/listview/ and select Agenda tab, you will see "Super busy week" event. If you select Agenda view then day range then the agenda will be displayed correctly, i.e. a single day and the multi-day event with arrows at both ends. Then what is the logic? If this is not a bug, i don't understand

[alexandru_tess]

And your code not working in example.

[ghulam.ghous]

Hi @alexandru_tess,

Yes we can see that. But the reason for this is, repeat is set to None for the "Super busy week" event. And if you set the repeat to daily, you can see the multiple days in Agenda view with day range. This is by design and not a bug. I will check the code and get back to you.

Regards,
Ghous

[ghulam.ghous]

Here's the updated code:

   modes : {
        agenda : {
            columns : {
                agenda : {
                    renderer(data) {
                        // Check if the row is not the first one, then add the custom 'hide-row' class
                        if (data.row.dataIndex > 0) {
                            data.rowElement.classList.add('hide-row');
                        }
                        // We need the system-provided cell rendering
                        return this.defaultRenderer(...arguments);
                    }
                }
            }
        }
    },

Css:

.hide-row {
	display: none;
}

Here's the clip showing that with this code, there's only one day shown. In the second half of the video, you can see the code is removed and two days are being shown: https://drive.google.com/drive/folders/1G2znfMK4Y9Yh6T5rw442ZPl40T4xXaTC?usp=sharing

Hope it helps!

Regards,
Ghous

[alexandru_tess]

From where i import the defaultRenderer?

[ghulam.ghous]

You do not need to import it from anywhere. It is available in the context. I have incorporated the code in the angular example and you can check it there.

Here's the example:

basic.zip

(246.47 KiB) Downloaded 16 times

[alexandru_tess]

Ok. Thanks. And what is the conclusion? will you fix this problem in a future release? because I don't understand why all the days are not displayed for the single type events and for the recurring ones they are.

[ghulam.ghous]

Hi @alexandru_tess,

Yes we will be fixing that. I have created a ticket here https://github.com/bryntum/support/issues/8854. You can subscribe to it to keep track of updates.

Regards,
Ghous

[alexandru_tess]

Hello @marcio, your code not work if the event start before the day you selected in agenda.