How can we customize the library CSS on an event.

[Sudhanshu Jain]

For example i want to draw appointment as a line .so i want to override class="e-appointment e-lib e-draggable".here i can set the update css class and provide the new attributes.

[Vinitha Devi Murugan]

Hi Sudhanshu, 

 

Syncfusion Greetings 

 

We have prepared the sample to show the appointment as a line using below CSS 

 

https://stackblitz.com/edit/react-4k3mh5-dlc6eu?file=index.css 

 

.e-appointment.e-lib.e-draggable.e-schedule-event-clone.e-drag-clone { 

    height: 4px !important; 

} 

 

.e-appointment.e-lib.e-draggable{ 

    height: 7px !important; 

} 

 

 

 

Kindly check the above sample and revert us with further details, if we have misunderstood your requirement or else if you need any further assistance on this. 

 

Regards, 

M.Vinitha devi 

[Sudhanshu Jain]

I want library Css change on event.So in this page i will have some appointments as rectangle and some will be as line .So if i apply above fix it will give all the appointments as line .

So i want create  event template i will create different task template .

Please have a look in below eventTemplate.

eventTemplate (props: Object) {
  const taskType = getLodash(props, 'type');
  if (props.taskType === 'task') {
    return (
      <div className={styles.taskBarTemplate}
        style={{ background: props.statusColor }}>
        {props.taskAtRisk ? <div className={styles.cornIconMargin}>
          <CornWarning/></div> : null}
        <div className={styles.nameTimeMargin}>
          <div className={styles.nameFont}>{props.tId}</div>
          <div>
            {moment(props.startTime).format('h:mm a')} - {
              moment(props.endTime).format('h:mm a')}
          </div>
        </div>
      </div>
    );
  } else if (props.taskType === 'breakTime') {
    return (
      <div className={styles.breakTimeTemplate}>
        {<BreakTime/>}
      </div>
    );
  } else if (props.taskType === 'travelTime') {
    return /*There i want to change library CSS .So that if props.taskType === "travleTime" it will change library CSS only for that.
  }
}

[Vinitha Devi Murugan]

Hi Sudhanshu, 

 

Thanks for your update. 

 

We achieved your requirement by making use of eventRendered event of the scheduler for the same we have prepared below sample. 

 

https://stackblitz.com/edit/react-4k3mh5-lxujbr?file=index.css 

 

onEventRendered(args) { 

    if (args.data.EventType === "Requested") { 

      args.element.classList.add("request"); 

    } else if (args.data.EventType === "Confirmed") { 

      args.element.classList.add("confirm"); 

    } else if (args.data.EventType === "New") { 

      args.element.classList.add("new"); 

    } 

  } 

 

Kindly try with the above sample and let us know, if you need any further assistance on this. 

 

Regards, 

M.Vinitha devi