Schedule event to have a dropdown component on it

[kotac]

Hi,

Is it possible to place a custom react component (dropdown for example) in the calendar event ? and to have the normal OnSelected handlers to interact with it ? So something like this:

Thanks

[Satheesh Kumar Balasubramanian]

Hi Kotac,

We have prepared sample to render dropdown on schedule event.

https://stackblitz.com/edit/react-dropdown-event-template?file=index.js,index.css,index.html

index.js:    

export class EventTemplate extends SampleBase {

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

  sportsData = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];

  instance = new Internationalization();

  getTimeString(value) {

    return this.instance.formatDate(value, { skeleton: 'hm' });

  }

  onClick(args) {

    args.stopPropagation();

  }

  eventTemplate(props) {

    return (

      <div className="template-wrap">

        <div className="subject">{props.Subject}</div>

        <div className="dropdown" onClick={this.onClick.bind(this)}>

          <DropDownListComponent id="ddlelement" dataSource={this.sportsData} />

        </div>

      </div>

    );

  }

  timelineEventTemplate(props) {

    return (

      <div className="template-wrap" style={{ background: props.PrimaryColor }}>

        <div

          className="subject"

          style={{

            background: props.SecondaryColor,

            borderRightWidth: 15,

            borderLeftWidth: 15,

            borderLeftColor: props.PrimaryColor,

            borderRightColor: props.PrimaryColor,

            borderLeftStyle: 'solid',

            borderRightStyle: 'solid',

          }}

        >

          {props.Subject}

        </div>

      </div>

    );

  }

  render() {

    return (

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

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

          <div className="control-wrapper">

            <ScheduleComponent

              cssClass="event-template"

              width="100%"

              height="550px"

              selectedDate={new Date(2021, 1, 15)}

              readonly={true}

              startHour="08:00"

              endHour="18:00"

              workHours={{ start: '08:00' }}

              eventSettings={{ dataSource: this.data }}

            >

              <ViewsDirective>

                <ViewDirective

                  option={Browser.isDevice ? 'Day' : 'Week'}

                  eventTemplate={this.eventTemplate.bind(this)}

                />

              </ViewsDirective>

              <Inject

                services={[Day, Week, TimelineViews, Resize, DragAndDrop]}

              />

            </ScheduleComponent>

          </div>

        </div>

      </div>

    );

  }

}

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Satheesh Kumar B