Changing the name e-toolbar-item, e-date-range

[Phan Hu?nh Nh?t Hùng]

I have some prolem with the e-toolbar-item, e-date-range. When I change my language to vietnamese, It doesn't have enough width to display the whole sentence like "Tháng 10", it just display "Tháng". I want to change the text in order to fit with the width of the circle like "T10" for "Tháng 10". Help me pls.

[Ravikumar Venkatesan]

Hi Phan Hu?nh Nh?t Hùng,

Sample: https://stackblitz.com/edit/ej2-react-schedule-vietnamese-locale-sample?file=index.js

You can display the whole sentence like "Tháng 10" in the Schedule header calendar by increasing the width of the calendar by overriding the default styles as shown in the code snippet below.

[index.js]

const LocalData = () => {

  const scheduleObj = useRef(null);

  return (<div className='schedule-control-section'>

    <div className='col-lg-12 control-section'>

      <div className='control-wrapper'>

        <ScheduleComponent width='100%' height='650px' cssClass="schedule-customization" selectedDate={new Date(2021, 1, 15)} ref={scheduleObj} locale="vi">

          <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />

        </ScheduleComponent>

      </div>

    </div>

  </div>);

};

[index.css]

.schedule-customization.e-schedule .e-header-popup .e-header-calendar.e-calendar {

  min-width: 360px;

}

 

.schedule-customization.e-schedule .e-header-popup .e-header-calendar.e-calendar .e-content.e-year td>span.e-day,

.schedule-customization.e-schedule .e-header-popup .e-header-calendar.e-calendar .e-content.e-decade td>span.e-day {

  width: 100%;

}

UG: https://ej2.syncfusion.com/react/documentation/schedule/scheduler-styling
API: https://ej2.syncfusion.com/react/documentation/api/schedule/#cssclass

Regards,
Ravikumar Venkatesan

[Phan Hu?nh Nh?t Hùng]

It works. Thank you for your support

[Ashokkumar Karuppasamy]

Hi Phan Hu?nh Nh?t Hùng,

Thank you for the update. We're glad to hear that the provided solution meets your requirements. Please let us know if you need any further assistance.

Best regards,
Ashok