Angular-calendar: Resize calendar cells

Created on 18 Jul 2018 · 4Comments · Source: mattlewis92/angular-calendar

Describe the bug

Minimal reproduction of the problem with instructions

I want to resize my day-cell in order to be 50x50 px each.
I have tried to add some styles in my css file but it's not working like I need it to. As you can see, the cell is not a square.

How can I resolve this?

I have my code in stackblitz:

https://stackblitz.com/edit/angular-kjrkfu?embed=1&file=demo/demo.component.css

Screenshots

Versions

@angular/core:5
angular-calendar:0.24.1
Browser name and version:Chrome

Source

teodoramalec

Most helpful comment

@AMkiri,
I have created a new css file (included in my app, ofc) with the following code:

.cal-cell-row {
    height: 100%;
}
.ng-star-inserted { 
    height: 51px;
}
.cal-month-view .cal-day-cell {
     height: 51px;
     min-height: 0px;
}

I am not sure if this is the right way to handle this, but it worked for me. Hope it works for you too!! :)

teodoramalec on 19 Jul 2018

👍2

All 4 comments

The same problem with cell height. Could you please write how you solved that issue?

AMkiri on 19 Jul 2018

@AMkiri,
I have created a new css file (included in my app, ofc) with the following code:

.cal-cell-row {
    height: 100%;
}
.ng-star-inserted { 
    height: 51px;
}
.cal-month-view .cal-day-cell {
     height: 51px;
     min-height: 0px;
}

I am not sure if this is the right way to handle this, but it worked for me. Hope it works for you too!! :)

teodoramalec on 19 Jul 2018

👍2

Thanks a lot! It's also works if write directly in css where "~angular-calendar/css/angular-calendar.css" included.

AMkiri on 20 Jul 2018

🎉1

thanks @teodoramalec it fixed my problem. however is there any proper way to change height of whole grid?