Hi gorakh.nath,
We do not have behaviour as you described built-in.
But there are still 2 ways to achieve that. First one we already mentioned above - using calendars, highlight resource calendar, but assign own calendar for events.
Second one - don't use Calendars and use ResourceTimeRanges and TimeRanges feature(s). In that case you won't have constraints while scheduling and only have visual effect. Exactly as you requested. You can style intervals as you want, add them into resources or project, hide and show them when you want using CSS and events.
I see you already used that feature in your solution, so all you need is to add more timeRanges as you need, and add custom CSS to hide and show DOM elements.