date color in DatePicker

[ThreeGo]

How can I change the font color of a specific day of the week in datepicker? (or DateRangePicker, Calendar)

The image below is an example that prints Saturday and Sunday in red.

[Priyanka Karthikeyan]

Hi ThreeGo,

 

To change the font color of specific days (like Saturday and Sunday) in the Syncfusion Vue DatePicker, DateRangePicker, or Calendar component, you can use the renderDayCell event. This event allows you to customize the appearance of specific days by adding custom classes or inline styles based on the date.

 

Here's an example that highlights Saturdays and Sundays in red for a Vue DatePicker:

 

 

<template>

<div class="col-lg-12 control-section">

  <div id="wrapper">

    <ejs-datepicker 

      id="datepicker" 

      :renderDayCell="disableDate" 

      :placeholder="waterMarkText">

    </ejs-datepicker>

  </div>

</div>

</template>

 

<script>

 

methods: {

  disableDate(args) {

    // Get the day of the week (0 = Sunday, 6 = Saturday)

    const day = args.date.getDay();

 

    // Set font color for Saturdays and Sundays

    if (day === 0 || day === 6) {  // Sunday = 0, Saturday = 6

      args.element.lastChild.style.color = "red"  // Change the color to red

    }

  }

}

};

</script>

 

Explanation:

• The renderDayCell event is triggered for each cell (day) in the DatePicker. It passes an argument (args) that contains the date and element of each day.
• Inside the onRenderDayCell method, you can get the day of the week using getDay() (0 = Sunday, 6 = Saturday).
• The style of the cell (day) is changed by applying the style.color property directly to the element for Saturdays and Sundays.

Sample: https://stackblitz.com/edit/6tcv3h-cmdhwm?file=src%2FApp.vue

 

Regards,

Priyanka K

[ThreeGo]

Thanks for your support, I've confirmed it works fine.

[Priyanka Karthikeyan]

Hi ThreeGo,

Thank you for the update. Please get back to us if you need any further assistance.

Regards,

Priyanka K