[ANGULAR] How to remove topbar of calendar?

[freePlusxx01]

Hi.

I am using calendar only in day mode, can I remove this topbar with day and button to current date?

https://slack-files.com/TCE5WRQR0-F01806B9M62-d508f775c0

[mats]

Try:

const calendar = new Calendar({
    tbar     : null,

[freePlusxx01]

Great, it worked partially, how can I take out this date in top?

https://slack-files.com/TCE5WRQR0-F018740GQ93-dfb87d6bea

[Animal]

Do I have it correct? You want your days to show no information about what date they are displaying like this?

Screenshot 2020-08-04 at 16.48.56.png (103.2 KiB) Viewed 2183 times

[freePlusxx01]

I'll show the date they are displaying, but with a different layout, like this:

https://slack-files.com/TCE5WRQR0-F018MBA8KGR-4ef38b1c03

it's already working, but I have to take out the default date in calendar topbar

[fabio.mazza]

Hi freePlusxx01,

There is no configuration specific to hide it because it is essential to calendar be useful visually. But, you can hide it using css, like:

.b-calendarrow .b-calendar-cell {
 	display: none;
}

[Animal]

If you want custom cell content, try configuring your Calendar like this:

modes : {
    week : {
        allDayEvents : {
            cellRenderer({ cell }) {
                cell.innerHTML = '<b>My content</b>';
                debugger; // It's up to you what you return here to put in the header.
                // When you stop at this break point, look what is being passed in.
                // And follow what happens to anything you return;
            }
        }
    }
}

[Animal]

Actually, that's too deep and takes over the entire cell.

Try this:

    modes : {
        week : {
            allDayEvents : {
                dayCellRenderer(info) {
                    return '<div>Dayname</div><div>Date</div>';
                }
            }
        }
    },
    

See https://www.bryntum.com/docs/calendar/#Calendar/widget/mixin/DayCellRenderer#config-dayCellRenderer for what is in the passed info object.

That doc should be made a bit clearer. I'll fix it.

[Animal]

You can experiment with that in a live example as I have here:

Screenshot 2020-08-04 at 18.15.01.png (125.9 KiB) Viewed 2175 times

[freePlusxx01]

If I use this in my calendar.material.css located in calendar-1.0.1-trial/build, it works.

.b-dayview-allday-row {
  display: none;
  flex-flow: row nowrap; }

but inserting this code in the css of specific screen that uses the calendar don't work, I can't use this class in calendar.material.css because I'll use calendar with this date in topbar too, but in another screen