icai/vue3-calendar

Making the component responsive

FrancescoMussi opened this issue · 1 comments

I need to make the component responsive.

I make a basic working structure:

@media screen and (min-width: 1200px) {
    
  .event-calendar {
    .datepicker-inner{
      width: 440px;
    }
    .datepicker-body{
      span{
        width: 60px;
      }
    }
  }
}


@media screen and (max-width: 1199px) {
    
  .event-calendar {
    .datepicker-inner{
      width: 340px;
    }
    .datepicker-body{
      span{
        width: 45px;
        font-size: 0.9rem;
      }  
    }
  }
} 

It needs refinements of course but as basic structure it is working.

But I have a question:

What is the purpose of the updatePaneStyle function?
It seems to resize on the width of the datepicker.

Because the only way to make the datepicker properly resize was to actually remove that function.

By the way it could be awesome if in a future release the component would be responsive by default. Do you think it would be possible?

Thanks!

icai commented

event calendar is custom extention,not for base component