Calendar with hidden weeekends

Calendar with hidden weeekends

A quick and easy way to set up the Smart.Calendar compoent without the days in the weekends.

To achieve this functionality we will need only CSS as shown in the code example below


<style>
  .smart-calendar-week .smart-calendar-cell:nth-child(2),
  .smart-calendar-week-titles .smart-calendar-week-title:nth-child(2),
  .smart-calendar-week .smart-calendar-cell:nth-child(8),
  .smart-calendar-week-titles .smart-calendar-week-title:nth-child(8) {
    display: none; 
  }

  .smart-calendar-week, 
  .smart-calendar-week-titles,
  .smart-calendar-weeks { 
    justify-content: space-between; 
  } 

  .smart-calendar-weeks { 
    width: var(--smart-calendar-default-width); 
  } 

  .smart-calendar-cell { 
    width: 100%; 
  }

  .smart-calendar-week { 
    margin-right: 10px; 
  } 
</style> 

<Calendar id="calendar"></Calendar> 

@code {

}

And this is the result of the applied CSS changes:

calendar with hidden weekends