How to modify the calendar to appear like native calendar

[nareshphuloria]

Hello,

I have integrated the calendar in our application and now would like to modify the styles in such a way that the calendar appear like native calendar, i.e. it should cover complete screen area.

Right now the calendar only covers top half of the mobile screen and rest of the screen is empty, which gives a vague appearance to the screen. Can you please help with this?

Thanks & Regards Naresh

[twinssbc]

@nareshphuloria Are you referring to the monthview? Because the height of weekview and dayview actually exceeds the normal mobile screen height. You could adjust the cell height to increase the height of the month view. But bear in mind that if you want to cover the exact height of the screen, which means occupy 100% height, it's always harder than occupy the 100% width, no matter it's on a mobile phone or normal website. Also another thing you need to consider, the space below the month view table is for displaying event details. If you make the monthview table occupy the full screen, how can you display the event details?

[nareshphuloria]

Thanks for a quick response.

Yes, I am referring to Month view only. I should have mentioned it earlier. My Bad. I tried to increase cell height. Default is 37px. No matter how much I increase it. Its not reflecting that on screen. Regarding event details panel, I would be hiding it as my users would be traversing to new page when they click on any event.

[twinssbc]

@nareshphuloria Where do you increase the height? There's a calendar-cell class in the css file, but it's not applied to the monthview table. You may use styles like below to set the height of monthview table cell.

.monthview-slide table > tbody > tr > td {
    height: 100px;
}

[nareshphuloria]

With height:100px, the height of specific column is fixed. Which was again not helping me out as the calendar cells were going beyond device height. I got the solution by using height:100vh on complete table. Like this .table-bordered { height: 100vh; max-height:100vh; } 100 vh means full screen size and we can use it from 1 to 100.

Thanks again for a your support and help.

[twinssbc]

@nareshphuloria Yes, vh is a good way to achieve the effect. You may need to test the compatibility in different kinds of devices.