Change the color

[Keerthi]

Hi,

     I want do the following changes

          1) Remove the line below the date

          2) Even after selecting a date, today's date is highlighted by circle, i want to remove that

          3) Change all pink color to blue color

I used  @syncfusion/ej2-react-calendars

Attachment: DatePicker_ebd08f38.zip

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Keerthi, 

Thanks for contacting Syncfusion support. 

We checked the reported requirement. In order to achieve the reported requirement, we suggest you to override the below css styles for Datepicker in your application with the help of cssClass property. We made same for your convenience. Please find the sample in the below link. 

Sample Link       : https://stackblitz.com/edit/react-datepicker-primary-color 

Styles                  : 

/* To remove the line in the input */ 

.e-calendar-blue.e-input-group.e-control-wrapper.e-date-wrapper.e-input-focus::before, 

.e-calendar-blue.e-input-group.e-control-wrapper.e-date-wrapper.e-input-focus::after, 

.e-calendar-blue.e-input-group.e-control-wrapper.e-date-wrapper::before, 

.e-calendar-blue.e-input-group.e-control-wrapper.e-date-wrapper::after, 

.e-calendar-blue.e-input-group:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error), 

.e-calendar-blue.e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error), 

.e-calendar-blue.e-input-group:not(.e-float-icon-left):not(.e-float-input)::before, 

.e-calendar-blue.e-input-group:not(.e-float-icon-left):not(.e-float-input)::after { 

  background: none; 

  border: none; 

  transition: none; 

} 

/* To change the selected day's and today's color*/ 

 

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

.e-calendar-blue .e-calendar .e-content td.e-today.e-selected span.e-day { 

  background: blue; 

  color: white; 

} 

.e-calendar-blue .e-calendar .e-content td.e-today span.e-day { 

  color: blue; 

  border: none; 

  box-shadow: none; 

} 

/* To change the Today button and date icon color*/ 

 

.e-calendar-blue.e-date-wrapper 

  span.e-input-group-icon.e-date-icon.e-icons.e-active, 

.e-calendar-blue .e-btn.e-flat.e-primary, 

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

  color: blue; 

} 

.e-calendar-blue .e-btn.e-flat.e-primary::hover { 

  background: rgb(19 112 219 / 17%); 

  color: blue; 

} 

 

Screenshot        : 

 

Please let us know if you would require any further assistance on this. 

Regards, 

Jeyanth. 

[Keerthi]

Hi,

     Thank you for your help!!

When i tried the code, it's not working.

I have attached the screenshot of my code,Can u tell me why it's not working.

Thank You

Attachment: Date_eb904bec.zip

[Sevvandhi Nagulan]

Hi Keerthi, 

We checked your screenshot. In the sample provided we are overriding the style of the component and not added the class to the component. Since these classes are already added in respective element. So we recommended you to replace the provided style customization in the normal style.css file(Filename.css) and refer that CSS file in the component file. Module styling will be useful when we are adding the class to the component.  Refer the below code. 

[index.css] 

    .datepicker-control-section { 

        max-width: 246px; 

        margin: 30px auto; 

        padding-top: 50px; 

    } 

 

    /* To remove the line in the input */ 

    .e-calendar-blue.e-input-group.e-control-wrapper.e-date-wrapper.e-input-focus::before, 

    .e-calendar-blue.e-input-group.e-control-wrapper.e-date-wrapper.e-input-focus::after, 

    .e-calendar-blue.e-input-group.e-control-wrapper.e-date-wrapper::before, 

    .e-calendar-blue.e-input-group.e-control-wrapper.e-date-wrapper::after, 

    .e-calendar-blue.e-input-group:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error), 

    .e-calendar-blue.e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error), 

    .e-calendar-blue.e-input-group:not(.e-float-icon-left):not(.e-float-input)::before, 

    .e-calendar-blue.e-input-group:not(.e-float-icon-left):not(.e-float-input)::after { 

        background: none; 

        border: none; 

        transition: none; 

    } 

    /* To change the selected day's and today's color*/ 

 

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

    .e-calendar-blue .e-calendar .e-content td.e-today.e-selected span.e-day { 

        background: blue; 

        color: white; 

    } 

 

    .e-calendar-blue .e-calendar .e-content td.e-today span.e-day { 

        color: blue; 

        border: none; 

        box-shadow: none; 

    } 

    /* To change the Today button and date icon color*/ 

 

    .e-calendar-blue.e-date-wrapper 

    span.e-input-group-icon.e-date-icon.e-icons.e-active, 

    .e-calendar-blue .e-btn.e-flat.e-primary, 

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

        color: blue; 

    } 

 

        .e-calendar-blue .e-btn.e-flat.e-primary::hover { 

            background: rgb(19 112 219 / 17%); 

            color: blue; 

        } 

[Index.js] 

   import { render } from 'react-dom'; 

   import  './index.css'; 

   import * as React from 'react'; 

   import { DatePickerComponent } from '@syncfusion/ej2-react-calendars'; 

   import { SampleBase } from './sample-base'; 

   export class Default extends SampleBase { 

     constructor() { 

       super(...arguments); 

       this.dateValue = new Date(); 

       this.customClass = 'e-calendar-blue'; 

     } 

     render() { 

       return ( 

         <div className="control-pane"> 

           <div className="control-section"> 

             <div className="datepicker-control-section"> 

               <DatePickerComponent 

                 value={this.dateValue} 

                 cssClass={this.customClass} 

               /> 

             </div> 

           </div> 

         </div> 

       ); 

     } 

   } 

    

   render(<Default />, document.getElementById('sample')); 

Please find the sample below. 

Sample link: https://stackblitz.com/edit/react-datepicker-primary-color-sxkqqn?file=index.js 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[Keerthi]

Hi,

     Thank you so much!!!

     It's working now

[Sevvandhi Nagulan]

Hi Keerthi, 

We are glad to hear that the reported issue has been resolved. Please get back to us if you need further assistance. 

Regards, 

Sevvandhi N