Conditionally style cell background on hover

[d f]

Hi, looking to style the schedular conditionally based on # of appointments booked per cell. I'm not showing the timescale (week) and schedular is divided into three parts per resource grouping. If there are no appointments per cell detected, then I can fill up the entire background on hover. Whereas if there are 1, 2 or more appointments per cell detected, then I can style cell background on hover accordingly (1/2 space or 1/3, etc). Can you show me a sample typescript react snipped utilizing the relevant component APIs to make this magic happen?!

Thanks!
Mel

[d f]

Any update? thanks!

[d f]

update anyone? I can get the hover working per event or an empty cell, but what about if there are multiple events booked per cell (including hidden ones using the +more)? Then it gets challenging..

[Venkateshwaran Saravanakumar]

Hi,

Sample: https://stackblitz.com/edit/react-scheduler-cell-customization-hover-rbdvx6?file=index.js,index.css

We have reviewed your query and prepared a sample to meet your requirements using Schedule's getCellDetails, getEvents, and getResourcesByIndex methods, along with the hover event as shown in the below shared snippet. Try the shared sample and let us know if you need any further assistance.

[index.js]

function onmousehover(args) {

 

    if (!args.element.classList.contains('e-resource-cells')) {

      var elements = document.querySelectorAll('[class^="e-background-color"]');

      elements.forEach(element => {

        element.classList.remove(...Array.from(element.classList));

      });

 

      var cellDetails = scheduleObj.current.getCellDetails(args.element);

      var eventDetail;

      if (cellDetails) {

        eventDetail = scheduleObj.current.getEvents(cellDetails.startTime, cellDetails.endTime, cellDetails.groupIndex);

      }

      var resDetails = (scheduleObj.current.getResourcesByIndex(cellDetails.groupIndex)).resourceData.Id;

      var resEventDetail = eventDetail.filter(item => resDetails == item.TaskId);

      console.log(resEventDetail);

       if (resEventDetail.length == 0) {
        args.element.classList.add('e-background-color');
      } else if (resEventDetail.length == 1) {
        args.element.classList.add('e-background-color1');
      } else if (resEventDetail.length == 2) {
        args.element.classList.add('e-background-color2');
      }
      else {
        args.element.classList.add('e-background-color3');
      }

      args.element.addEventListener('mouseleave', function () {
        args.element.classList.remove('e-background-color', 'e-background-color1', 'e-background-color2', 'e-background-color3');      }); 
  }  } 

[index.css]

.schedule-cell-customization.e-schedule .e-vertical-view.e-timescale-disable .e-work-cells.e-background-color {
  background: grey;
}

.schedule-cell-customization.e-schedule .e-vertical-view.e-timescale-disable .e-work-cells.e-background-color1 {
  background: yellow;}.schedule-cell-customization.e-schedule .e-vertical-view.e-timescale-disable .e-work-cells.e-background-color2 {  background: rgb(52, 216, 11);
}

 .schedule-cell-customization.e-schedule .e-vertical-view.e-timescale-disable .e-work-cells.e-background-color3 {  
background: red;
}

 

Regards,
Venkatesh

[d f]

Can you provide the relevant typescript snippet as well? starting from the top

import React from 'react';

[Venkateshwaran Saravanakumar]

Hi,

In response to your inquiry, we have provided a typescript-coded React Scheduler sample.

[App.tsx]

import * as React from "react";

import * as ReactDOM from "react-dom";

import { useRef } from "react";

import dataSource from "./datasource.json";

import "./App.css";

import { extend } from "@syncfusion/ej2-base";

import {

  Day,

  WorkWeek,

  Week,

  Month,

  Agenda,

  ScheduleComponent,

  ResourcesDirective,

  ResourceDirective,

  Inject,

  Resize,

  DragAndDrop,

} from "@syncfusion/ej2-react-schedule";

 

const App = () => {

  const scheduleObj = useRef(null);

 

  const timeScale = { enable: false };

 

  const group = { resources: ["Owners"] };

  const ownerData = [

    { OwnerText: "Nancy", Id: 1, OwnerColor: "#ffaa00" },

    { OwnerText: "Steven", Id: 2, OwnerColor: "#f8a398" },

    { OwnerText: "Michael", Id: 3, OwnerColor: "#7499e1" },

  ];

 

  const data = extend([], dataSource.resourceData, null, true);

  function onmousehover(args) {

    if (

      !args.element.classList.contains("e-resource-cells") &&

      !args.element.classList.contains("e-appointment")

    ) {

      var elements = document.querySelectorAll('[class^="e-background-color"]');

      elements.forEach((element) => {

        element.classList.remove(...Array.from(element.classList));

      });

 

      var cellDetails = scheduleObj.current.getCellDetails(args.element);

      var eventDetail;

      if (cellDetails) {

        eventDetail = scheduleObj.current.getEvents(

          cellDetails.startTime,

          cellDetails.endTime

        );

      }

      var resDetails = scheduleObj.current.getResourcesByIndex(

        cellDetails.groupIndex

      ).resourceData.Id;

      var resEventDetail = eventDetail.filter(

        (item) => resDetails == item.TaskId

      );

      console.log(resEventDetail);

 

      if (resEventDetail.length == 0) {

        args.element.classList.add("e-background-color");

      } else if (resEventDetail.length == 1) {

        args.element.classList.add("e-background-color1");

      } else if (resEventDetail.length == 2) {

        args.element.classList.add("e-background-color2");

      } else {

        args.element.classList.add("e-background-color3");

      }

 

      args.element.addEventListener("mouseleave", function () {

        args.element.classList.remove(

          "e-background-color",

          "e-background-color1",

          "e-background-color2",

          "e-background-color3"

        );

      });

    }

  }

 

  return (

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

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

        <div className="control-wrapper">

          <ScheduleComponent

            width="100%"

            height="650px"

            selectedDate={new Date(2023, 0, 10)}

            ref={scheduleObj}

            eventSettings={{ dataSource: data }}

            hover={onmousehover.bind(this)}

            timeScale={timeScale}

            cssClass="schedule-cell-customization"

            group={group}

          >

            <ResourcesDirective>

              <ResourceDirective

                field="TaskId"

                title="Owner"

                name="Owners"

                allowMultiple={true}

                dataSource={ownerData}

                textField="OwnerText"

                idField="Id"

                colorField="OwnerColor"

              ></ResourceDirective>

            </ResourcesDirective>

            <Inject

              services={[

                Day,

                Week,

                WorkWeek,

                Month,

                Agenda,

                Resize,

                DragAndDrop,

              ]}

            />

          </ScheduleComponent>

        </div>

      </div>

    </div>

  );

};

export default App;

 

 

Regards,

Venkatesh

Attachment: ReactTsScheduler_f4e7355b.zip