Sharepoint 2013, monthly calendar view hide weekends even if we book weekend leave

See more:

SharePoint2013

Hi Everybody,

Recently we migrated from SharePoint 2010 to 2013, after migrate my calendar view was not working properly.

Actual requirement is, we have to main internal team leave plans, so I used to create SharePoint Monthly Calendar view, and using Content Editor Web Part I just hide weekends, even if I book my leave from week1 to consecutive next week i.e. week2 my leave plan was display perfectly.

Ex: if I book my leave plan from 9th May 2019 to 15th May 2019, even if i hide weekends there is no issue in my calendar view in SharePoint 2010.

But in SharePoint 2013, the same was giving wrong UI in my calendar view. It's not displayed the leave details correctly friday is missed out and thursday also it will block half of the day only

PA attachment for your reference,

What I have tried:

I have tried with below code in CEWP

<pre lang="CSS"><pre><style type="text/css">


TABLE.ms-acal-month TR TH:first-child + TH + TH + TH + TH + TH + TH {
	DISPLAY: none !important
}
TABLE.ms-acal-month TR TH:first-child + TH + TH + TH + TH + TH + TH + TH {
	DISPLAY: none !important
}
TABLE.ms-acal-month TR TH:first-child {
	DISPLAY: none !important
}
TABLE.ms-acal-month TR TD + TD + TD + TD + TD + TD DIV {
	WIDTH: 1px; DISPLAY: none !important
}
TABLE.ms-acal-month TR TD + TD + TD + TD + TD + TD {
	WIDTH: 0.5%
}
TABLE.ms-acal-month TR TD + TD + TD + TD + TD + TD + TD {
	DISPLAY: none !important
}
TABLE.ms-acal-detail TR TD + TD + TD + TD + TD + TD {
	WIDTH: 0.5% !important
}
TABLE.ms-acal-detail TR TD + TD + TD + TD + TD + TD DIV {
	DISPLAY: none !important
}
TABLE.ms-acal-detail TR TD + TD + TD + TD + TD + TD + TD {
	DISPLAY: none !important
}
.ms-acal-month-top SPAN {
	DISPLAY: inline !important
}
.ms-acal-month-top SPAN + SPAN {
	DISPLAY: none !important
}
.ms-acal-week-top TD DIV SPAN {
	DISPLAY: inline !important
}
.ms-acal-week-top TD DIV SPAN + SPAN {
	DISPLAY: none !important
}
.ms-acal-time {
	DISPLAY: none
}
.ms-acal-sdiv {
	MARGIN-LEFT: -58px
}
.ms-acal-sdiv A {
	WIDTH: 100%; POSITION: absolute; LEFT: 0px
}
.ms-acal-title {
	HEIGHT: 35px; PADDING-TOP: 0px
}</style><br/><br/>

When I cross check in browser element, I found that there is an issue with css width when I book my leave from week1 to week2, the width of the cell gives me in "-ve" value

EX:

<pre><div class="ms-acal-item" style="position:absolute;left:598px;top:217px;width:-597px;height:19px;border-width:1px 0px 1px 2px;" title="5/9/2019 - 5/15/2019 " _index="1,0" "=""><div class="ms-acal-mdiv"></div></div>