1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Appointment CSS issue

Appointment CSS issue

Hello I am using room scheduler and I reduced the cell size with the help of below CSS but my Appointment has not sat on correct time-range.


.templatewrap img {
  width: 50px;
  height: 50px;
}


.schedule-cell-dimension.e-schedule .e-timeline-view .e-date-header-wrap table col, 
.schedule-cell-dimension.e-schedule .e-timeline-month-view .e-content-wrap table col, 
.schedule-cell-dimension.e-schedule .e-timeline-view .e-content-wrap table col { 
      width: 50px; 
} 

.schedule-cell-dimension.e-schedule .e-vertical-view .e-date-header-wrap table col,
    .schedule-cell-dimension.e-schedule .e-vertical-view .e-content-wrap table col {
        width: 50px;
    }

    .schedule-cell-dimension.e-schedule .e-vertical-view .e-time-cells-wrap table td,
    .schedule-cell-dimension.e-schedule .e-vertical-view .e-work-cells {
        height: 50px;
    }
    .schedule-cell-dimension.e-schedule .e-timeline-month-view .e-work-cells,
    .schedule-cell-dimension.e-schedule .e-timeline-month-view .e-date-header-wrap table col {
        width: 50px;
    }    
    .schedule-cell-dimension.e-schedule .e-month-view .e-work-cells,
    .schedule-cell-dimension.e-schedule .e-month-view .e-date-header-wrap table col {
        width: 50px;
    }
    .e-schedule .e-timeline-month-view .e-date-header-wrap table tbody td {
        width: 50px;
    }
    .schedule-cell-dimension.e-schedule .e-month-view .e-work-cells {
        height: 50px;
    }    
.schedule-cell-dimension.e-schedule .e-timeline-view .e-time-cells-wrap table td, 
.schedule-cell-dimension.e-schedule .e-timeline-view .e-work-cells { 
    height: 50px; 
} 

.schedule-cell-dimension.e-schedule .e-timeline-view .e-date-header-wrap table col, 
.schedule-cell-dimension.e-schedule .e-timeline-month-view .e-content-wrap table col, 
.schedule-cell-dimension.e-schedule .e-timeline-view .e-content-wrap table col { 
      width: 50px; 
} 

.e-schedule .e-timeline-view .e-appointment, .e-schedule .e-timeline-month-view .e-appointment {
    height: 30px !important;
} 
.e-appointment{
    top: 10px !important;
    right :20px !important;
}
 ==>right :20px !important; is not working anymore in appointment class.
these are CSS I changed to reduce the cell size and reduce appointment cards but appointment cards are not showing on a correct timeline according to time. Please take a look at the attached image.

Attachment: token_519ebb02.zip

1 Reply 1 reply marked as answer
RV Ravikumar Venkatesan Syncfusion Team January 18, 2021 11:44 AM UTC

Hi Atish, 

Greetings from Syncfusion support. 

We have validated your reported query at our end. You have set the top and right value to the appointment in CSS that is the cause for your reported problem and for the same we have prepared a sample which can be available from the below link. We have removed the CSS style shown below you have used in your code. 

 
      .e-appointment { 
        top: 10px !important; 
        right: 20px !important; 
      } 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 
Ravikumar Venkatesan 


Marked as answer
Loader.
Up arrow icon