How to Remove previous and future month date from calendar view so only current month is displayed

Question

I am very new to the SharePoint and hope people can help. I have setup a calendar and was able to apply CSS to make the calendar into weekday only. http://www.c-sharpcorner.com/UploadFile/fc34aa/hide-weekends-in-sharepoint-calendar-view/

However, I am trying to remove the date box for the previous and future month. The goal is to display only the current month so it is more clean. I tried to do some research but I couldn't find a way for it to work.

Can anyone please help to point out how to apply the CSS to achieve it? I also saw some JavaScript method but how do I apply it? Any newbie article will be very helpful.

Thanks

Answer 1

It is not possible to completely remove previous and next month days by CSS or JS. You can remove it by JS but when you will navigate to next or previous month days will be visible.

You can highlight these days. For example by grey color. To do this you need to add script editor webpart and put html:

<style type="text/css">
    .ms-acal-outday{position: relative; z-index: 1; background-color: rgb(197,197,197); opacity: 0.5; margin-left: -1px !important; margin-right: -1px !important;}
</style>

It will looks like this: