Datetimepicker styling

[nqaba nleya]

Good day, 

I need to change the background color of the calender popup as well as the time pop up to a different color. As well as the circle that highlights the selected date, as well as the hover.

Kind Regards, 

Nqaba Nleya

[Yohapuja Selvakumaran]

Hi nqaba nleya,

Thank you for reaching out to us with your query.

To address your requirements, we have created a sample where we’ve customized the colors for the DatePicker and TimePicker popups, as well as the selected and hovered cells. Below, you will find the code snippet that demonstrates these customizations, along with a link to the sample for your reference.

Code Snippet:

.e-calendar .e-content table,

.e-bigger.e-small .e-calendar .e-content table {

  background: aqua;

}

 

.e-calendar .e-header.e-month,

.e-bigger.e-small .e-calendar .e-header.e-month {

  background: aqua;

}

 

.e-calendar .e-footer-container,

.e-bigger.e-small .e-calendar .e-footer-container {

  background: aqua;

}

 

.e-datetimepicker.e-popup .e-list-parent.e-ul li.e-list-item {

  background: pink;

}

 

.e-calendar .e-content td.e-selected span.e-day,

.e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day {

  background: green;

}

.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item.e-active {

  background: green;

}

 

.e-calendar .e-content td:hover span.e-day,

.e-calendar .e-content td:focus span.e-day,

.e-bigger.e-small .e-calendar .e-content td:hover span.e-day,

.e-bigger.e-small .e-calendar .e-content td:focus span.e-day {

  background: red;

}

 

.e-datetimepicker.e-popup .e-list-parent.e-ul li.e-list-item.e-hover {

  background: red;

}

 

 

We have also provided a sample that demonstrates these customizations. You can check it out using the link below:

Sample: https://stackblitz.com/edit/angular-xtahhy-ey3f2m?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fapp.component.css,src%2Findex.html

Regards,

Yohapuja S

[nqaba nleya]

HI there,

Thank you for the response, this partially solved my problem, i just need to style a little bit more as indicated on the image below:

1. The bottom border underneath the input box 

2. the selected date color

3. color of the text

4. color of the Today bottom

Kind Regards,

[Yohapuja Selvakumaran]

Hi nqaba nleya,

Thank you so much for getting back to us! We are glad to hear that the initial solution helped partially solve your problem. We've taken note of the additional styling requirements you’ve shared and have customized the DateTimePicker component accordingly.

Below is a code snippet that addresses each of the specific styling requests:

 

/* Selected date color */

.e-calendar .e-content td.e-selected span.e-day,

.e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day {

  background: green;

  color: darkred;

}

 

 

/* 'Today' button color */

.e-btn.e-flat.e-primary,

.e-css.e-btn.e-flat.e-primary {

  color: chocolate;

  background: burlywood;

}

 

 

/* General text color in the calendar */

.e-calendar .e-content span.e-day,

.e-bigger.e-small .e-calendar .e-content span.e-day {

  color: blue;

}

 

 

/* Bottom border underneath the input box */

.e-input-group:not(.e-float-icon-left):not(.e-float-input)::before{

  background: chartreuse;

}

 

 

 

To give you a better idea of how these styles look in action, we've also prepared a sample for you. You can view and interact with the customized DateTimePicker by visiting the following link:

Sample: https://stackblitz.com/edit/angular-xtahhy-ajfnkw?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fapp.component.css,src%2Findex.html

We hope these customizations align perfectly with your requirements. If there's anything else you'd like to adjust or if you have any further questions, please don’t hesitate to reach out.

Regards,

Yohapuja S

[nqaba nleya]

Hi  Yohapuja Selvakumaran,

Thank you for you assistance, there are a few more portions left, please check the images below:

1. The background color of the header highlighted
2. the border around 2024 as well as the text 2024
3. the up and down arrows
4. Boxes around the months
5. January 2022 color
6. Mon Su Mo Tu We need to be colored as well

Thank you for your assistance,

Kind Regards,

Nqaba Nleya

[Yohapuja Selvakumaran]

Hi nqaba nleya,

Thank you for your continued patience. We’ve reviewed the additional styling requests you’ve shared, and we’ve customized the DateTimePicker component to meet your requirements.

Below is a code snippet that addresses each specific styling need:

 

/* Background color of the header */

 

.e-calendar .e-footer-container,

.e-bigger.e-small .e-calendar .e-footer-container,

.e-calendar .e-header.e-year,

.e-calendar .e-header.e-decade {

  background-color: aqua;

}

 

/* Border and text color for 2024, up and down arrows, boxes around the months, January 2022 color */

 

.e-calendar .e-content td.e-selected span.e-day,

.e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day,

.e-calendar .e-header .e-title,

.e-calendar .e-header span,

.e-calendar .e-content.e-year td > span.e-day,

.e-calendar .e-content.e-decade td > span.e-day {

  background-color: green;

  color: darkred;

}

 

/* Text color for Mon, Su, Mo, Tu, We */

 

.e-calendar th {

  color: crimson;

}

 

 

To provide you with a better understanding of how these styles will look in action, we’ve prepared a sample for you. You can view and interact with the customized DateTimePicker by visiting the following link:

Sample: https://stackblitz.com/edit/angular-xtahhy-69jhfn?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fapp.component.css,src%2Findex.html

We hope these customizations align with your expectations. If you have any further adjustments or additional questions, please don’t hesitate to reach out. We’re here to help!

Regards,

Yohapuja S