Center Text on Headers on Month View

For some reason only on month view im still getting my data on header not centered, this dont happen on the other views, does the scss classes on month view changed? 

.schedule-block-events.e-schedule .e-timeline-view .e-appointment .template-wrap .subject {
padding: 10px 25px;
}

.schedule-block-events .subject {
text-align: center;
}

.schedule-block-events.e-schedule .template-wrap {
width: 100%;
}

.schedule-block-events.e-schedule .e-vertical-view .e-resource-cells {
height: 58px;
}

.schedule-block-events.e-block-appointment .subject,
.schedule-block-events.e-schedule .e-vertical-view .e-appointment .template-wrap .subject {
padding-top: 10px;
}

.schedule-block-events.e-schedule .e-timeline-view .e-resource-left-td,
.schedule-block-events.e-schedule .e-timeline-month-view .e-resource-left-td {
width: 170px;
}

.schedule-block-events.e-schedule .e-resource-cells.e-child-node .employee-category,
.schedule-block-events.e-schedule .e-resource-cells.e-child-node .employee-name {
padding: 5px
}

.schedule-block-events.e-schedule .employee-image {
width: 45px;
height: 40px;
float: left;
border-radius: 50%;
margin-right: 10px;
}

.schedule-block-events.e-schedule .employee-name {
font-size: 13px;
}

.schedule-block-events.e-schedule .employee-designation {
font-size: 10px;
}
.e-schedule .e-timeline-view .e-content-wrap table td {
text-align: center;
}

/*Hides Time in header*/
.timeline-resource-grouping .e-time-slots {
display: none;
}

///Extra icon added on grouping header
.timeline-resource-grouping.e-schedule .e-timeline-view .e-resource-cells.e-parent-node .e-icons.e-people {
display: none;
}



.timeline-resource-grouping.e-schedule .e-timeline-view .e-resource-left-td,
.timeline-resource-grouping.e-schedule .e-timeline-month-view .e-resource-left-td {
width: 100px;
}

.timeline-resource-grouping.e-schedule .e-timeline-view .e-resource-text,
.timeline-resource-grouping.e-schedule .e-timeline-month-view .e-resource-text {
padding: 0;
margin: 0px !important;
}

.timeline-resource-grouping.e-schedule .e-timeline-view .e-resource-cells,
.timeline-resource-grouping.e-schedule .e-timeline-month-view .e-resource-cells {
padding: 0;
}
// #indexDiv:hover{
// background-color: rgb(109, 109, 194);
// color: white;
// }
.thumbnail:hover {
transform: scale(1.5);
}

// REMOVE TIMES BELOW RESERVATIONS

.e-schedule .e-timeline-view .e-appointment .e-time,
.e-schedule .e-timeline-month-view .e-appointment .e-time {
display: none !important;
}
// Center REservations
.e-schedule .e-timeline-view .e-appointment .e-subject,
.e-schedule .e-timeline-month-view .e-appointment .e-subject {
padding-top:12px !important;
}

.image {
width: 34px;
height: 21px;
background-size: 45px;
background-repeat: no-repeat;
}


1 Reply

AK Ashokkumar Karuppasamy Syncfusion Team December 30, 2024 02:04 PM UTC

Hi Arturo Martinez

Based on the shared details, you have provided the CSS event styles. However, when checking with the shared images, it seems to behave as if the cell template is being used. If you are using the cellTemplate, you can adjust the styles to meet your requirements. We have attached a sample code snippet below.

Sample: https://stackblitz.com/edit/angular-4mgylju8-ifu334dz?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fdata.ts

Furthermore, if there is a possibility that we misunderstood your requirement, we would greatly appreciate it if you could provide us with further information about your scenario and runnable sample. This will help us align our understanding with your expectations and provide you with the best possible assistance.

Regards,
Ashok


Loader.
Up arrow icon