We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to change the background color of the allDay bar

Hi Support:

I need to learn how to change the color of the allDay bar, so added this a template id to my view:

<ej-schedule id="Schedule1" width="100%" height="525px" show-quick-window="false" current-date="DateTime.Now"
             time-zone="@ViewData["TimeZone"]" show-time-zone-fields="false" current-view="Month"
             navigation="onNavigation" all-day-cells-template-id="#alldayTemplate"

and under the scripts section I added the following script:

<script id="alldayTemplate" type="text/x-jsrender">
    <div class="e-alldayappointment" style="background: red;"></div>

But nothing happens,  what could I be missing.



1 Reply

KK Karthigeyan Krishnamurthi Syncfusion Team January 2, 2017 01:40 PM UTC

Hi David, 
Thank you for contacting Syncfusion support. 
We have prepared the below code example to customize the all-day cells for you reference. Height for div element is not set, therefore only its background color is not shown and we strongly recommend not to override the default css class names (e-alldayappointment) for template customization. 
  <script id="alldayTemplate" type="text/x-jsrender"> 
        <div class="allDayCell" style="background: red; height: 100%"></div> 

Live Chat Icon For mobile
Up arrow icon