arrow_back_iosQuestions
help

I do not like time bands, can I remove them?

check_circle
Yes, you can hide any item from the widget. Go to the widget settings, on the Appearance tab. Set the flag Use custom css-styless and paste this CSS:
.timeline {
  display: none;
}

.calendar-day_selected .calendar-day__hour-ticks, .calendar-day__hour-ticks {
  opacity: 0;
}

.calendar-day__levels {
  display: none;
}
The result is a calendar:
However, at the same time, customers do not see when there are vacant seats. You can use special CSS classes to stylize these days:
.calendar-day {
  /* calendar day */
}

.calendar-day_current {
  /* day of the current month */
}

.calendar-day_selected {
  /* selected day */
}

.calendar-day_has-reserved-time {
  /* the day when there is a busy time */
}

.calendar-day_has-available-time {
  /* the day when there is free time */
}

.calendar-day_has-reserved-time.calendar-day_has-available-time {
  /* day, when there is both busy and free time */
}
For example, you can simply insert such a ready-made style:
.timeline {
  display: none;
}

.calendar-day_selected .calendar-day__hour-ticks, .calendar-day__hour-ticks {
  opacity: 0;
}

.calendar-day__levels {
  display: none;
}

.calendar-day {
  background:rgba(0,0,0,0.03);
}

.calendar-day_current {
  color:rgb(0,0,0);
}

.calendar-day_has-reserved-time {
  background:rgba(255, 0, 0, 0.4);
}

.calendar-day_has-available-time {
  background:rgb(255, 255, 255);
}

.calendar-day_has-reserved-time.calendar-day_has-available-time {
  background: linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgba(255, 0, 0, 0.2) 50%, rgba(255, 0, 0, 0.2) 100%);
}

.calendar-day_has-reserved-time.calendar-day_has-available-time:hover {
  background: rgb(238, 238, 238);
}

.calendar-day.calendar-day_selected {
  background:rgb(0,0,0);
  color:rgb(255,255,255);
}
Look at the result on the widget:
Didn't find the answer to your question?
Ask it to us on
mail_outlinesupport@bukza.com