alternate colors - timeLineWeek & workWeek

[Isabelle Fuchs]

how can I get alternate colors for resource AND the Row  (all Dates...) 

[Ashokkumar Karuppasamy]

Hi Isabelle Fuchs,

You can achieve your requirement by utilizing the schedule renderCell event and the resourceHeaderTemplate, which should meet your needs. The attached example demonstrate the solution. Please give it a try, and feel free to reach out if you need further assistance.

Sample: https://stackblitz.com/edit/vue-schedule-resourcetemplate-x7drvw?file=src%2FApp.vue

[app.component.ts]

    
        <ejs-schedule

          id="Schedule"

          height="650px"

          :cssClass="cssClass"

          :selectedDate="selectedDate"

          :eventSettings="eventSettings"

          :group="group"

          :currentView="currentView"

          :renderCell="onRenderCell"

          :resourceHeaderTemplate="'resourceHeaderTemplate'"

        >

 

          <template v-slot:resourceHeaderTemplate="{ data }">

            <div class="template-wrap" :class="getBackgroundClass(data)">

              <div class="resource-image">

                <img

                  class="resource-image"

                  :src="getImage(data)"

                  :alt="getImage(data)"

                />

              </div>

              <div class="resource-details">

                <div class="resource-name">{{ getEmployeeName(data) }}</div>

                <div class="resource-designation">

                  {{ getEmployeeDesignation(data) }}

                </div>

                <div class="resource-designation">

                  {{ getEmployeeDesignation(data) }}

                </div>

                <div class="resource-designation">

                  {{ getEmployeeDesignation(data) }}

                </div>

              </div>

            </div>

          </template>

getBackgroundClass(data) {

      debugger;

      let resourceName = this.getEmployeeName(data);

      if (resourceName === 'Margaret') {

        return 'margaret-resource';

      } else if (resourceName === 'Robert') {

        return 'robert-resource';

      } else {

        return 'Laura-resource';

      }

    },

    onRenderCell: function (args) {

      if (args.elementType === 'resourceHeader') {

        if (

          args.element.firstElementChild.classList.contains('margaret-resource')

        ) {

          args.element.style.backgroundColor = 'lightblue';

        } else if (

          args.element.firstElementChild.classList.contains('robert-resource')

        ) {

          args.element.style.backgroundColor = 'yellow';

        } else if (

          args.element.firstElementChild.classList.contains('Laura-resource')

        ) {

          args.element.style.backgroundColor = 'green';

        }

      }

      if (

        args.elementType === 'dateHeader' ||

        args.elementType == 'workCells'

      ) {

        if (args.date.getDate() % 2 !== 0) {

          args.element.style.backgroundColor = 'grey';

        }

      }

      if (args.element.classList.contains('e-time-slots')) {

        args.element.style.backgroundColor = 'grey';

      }

 

Regards,
Ashok

[Isabelle Fuchs]

the rows of the dates also should be in the same color like the resources!

[Vishal Omprasad]

Hi Isabelle Fuchs,

You can fulfill your requirement by utilizing the  renderCell event. If the event is used, you can apply background styles based on the data-group index. The attached example demonstrates the solution. Feel free to give it a try, and don't hesitate to reach out if you need further assistance.

Sample: https://stackblitz.com/edit/vue-schedule-resourcetemplate-6uuzcr?file=src%2FApp.vue

      if(args.elementType === "workCells") {

        if(args.element.getAttribute('data-group-index') === '0') {

          args.element.style.backgroundColor = 'lightblue'; 

 

        } else if (args.element.getAttribute('data-group-index') === '1') {

          args.element.style.backgroundColor = 'yellow';

        } else {

          args.element.style.backgroundColor = 'green';

        }

      }

    },

 

Screenshot:

Regards,
Ashok

[Isabelle Fuchs]

one more question - I need for the parent resource a different color

so AUhof = dark green

Buhr Sabine - should be light green

but the first group get the color but the second not.. I need to identify the parent group... but how?

if (args.elementType === "resourceHeader") {

const schedule = this.$refs.schedule as ScheduleComponent;

const resourceDetails: any = schedule.getResourcesByIndex(args.groupIndex);

const groupIndex = args.groupIndex;

debugger;

if (groupIndex % 2 === 0) {

args.element.style.backgroundColor = "#e4f3f8";

} else {

args.element.style.backgroundColor = "#def8da";

}

if (resourceDetails.resource.colorField) {

args.element.style.backgroundColor =

resourceDetails.resourceData[resourceDetails.resource.colorField];

}

[Ashokkumar Karuppasamy]

Hi Isabelle Fuchs,

We have created a separate forum for this query. Please follow the below ticket for further details.

https://www.syncfusion.com/forums/186888/i-need-for-the-parent-resource-a-different-color-from-186812

Regards,

Ashok