On mobile view there's difficulty in selecting a day / event.

[tabish-ali]

Hi, I have installed your calendar for my project, really liked it. I can customize it by overriding CSS. But I found a problem which is causing issue for mobile users and even web users if they increase the day font size.

So let's go to issue without further wasting time.

So problem was when I clicked or tap the day on calendar it does not select the day unless I click on empty space around the day number. There's span in box that represent day number, it does not select the day if clicked on span. It Only select it when clicked on empty space around it. So it's very frustrating for mobile users, due to small screen size they can't select day easily.

Image is attached for your convenience.

[GitTheCodeAndHitTheRoad]

I am running into the same issue

[golam-sorwar]

I encountered the same issue on mobile view. After applying the custom CSS, the issue has been resolved for me.

span.calendar-month__day-date {
  z-index: 1;
  pointer-events: none;
}

[GitTheCodeAndHitTheRoad]

I encountered the same issue on mobile view. After applying the custom CSS, the issue has been resolved for me.

span.calendar-month__day-date {
  z-index: 1;
  pointer-events: none;
}

Nice solution, perhaps we can make it to be the default value for that css property.

[GitTheCodeAndHitTheRoad]

Where exactly did you put the custom css? Did you change it in the _nodemodules.dist.src.style.css? If I put it simply in the style section it does not work for me:

<style>
@import "qalendar/dist/style.css";
.v-card__actions {
  padding: 3px;
}

.span.calendar-month__day-date {
  z-index: 1 !important;
  pointer-events: none !important ;
}
</style>

[golam-sorwar]

<style>
@import "qalendar/dist/style.css";
.v-card__actions {
  padding: 3px;
}

span.calendar-month__day-date {
  z-index: 1 !important;
  pointer-events: none !important ;
}
</style>

try this way remove dot(.) before span

[GitTheCodeAndHitTheRoad]

span.calendar-month__day-date {
  z-index: 1;
  pointer-events: none;
}

Ah that was it, thanks!

It solved the issue of clicking on days without events. Adding the following also solves clicking on days with events (on mobile):

div.calendar-month_events {
  z-index: 1;
  pointer-events: none;
}

EDIT:

should be:

div.qalendar-is-small div.calendar-month_events {
z-index: 1;
pointer-events: none;
}

otheriwse the events are not clickable anymore on large screens.

[tomosterlund]

Hey there. Thanks for opening this and coming up with working workarounds. I'll have a look into this :)