ScheduleComponent event template customization

[Justin Schnurer]

According do the documentation (as referenced here: https://ej2.syncfusion.com/react/documentation/schedule/appointments/#using-template), I should be able to set the ScheduleComponent's eventSettings.template​ equal to a function that receives props and returns a JSX element.

See the code below for a very simple example of what I am attempting to do (which apparently matches what is done in the documentation linked above):

<ScheduleComponent

            selectedDate={new Date()}

            eventSettings={{

              dataSource: data,

              template: (props: any) => (

                <div>

                  {props.Subject}<br />

                  My favorite event.

                </div>

              )

            }}

...

This code ​does not work​. The template​ property accepts only strings.

(property) EventSettingsModel.template?: string | undefined

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the event background. All the event fields mapped to Schedule from dataSource can be accessed within this template code. {% codeBlock src="schedule/event-template-api/index.ts" %}{% endcodeBlock %}

@default

null

Type '(props: any) => JSX.Element' is not assignable to type 'string'.ts(2322)

1. How can I set the template to a function instead of a string?
2. If it MUST be a string, how can I set a string that allows me to access the event's properties?
3. Is there documentation somewhere that shows the correct way of doing this?

[Ravikumar Venkatesan]

Hi Justin,

Greetings from Syncfusion support.

We have validated your query “ScheduleComponent event template customization” at our end. You can resolve the reported problem by changing the type of the template function to any type as highlighted in the below code snippet. We have prepared a working sample for your reference.

[index.js]

eventSettings={{ dataSource: data, template: ((props: any): JSX.Element => (<div>{props.Subject}<br />My favorite event.</div>)) as any }}

You can use the template as a string as shown in the below code snippet. You can refer to the below demo samples for how to use the string templates with the Schedule.

https://ej2.syncfusion.com/javascript/demos/#/material/schedule/cell-template.html

https://ej2.syncfusion.com/javascript/demos/#/material/schedule/date-header-template.html

https://ej2.syncfusion.com/javascript/demos/#/material/schedule/tooltip.html

[index.js]

eventSettings= {{ dataSource: data, template: '<div>${Subject}<br />My favorite event.</div>' }}

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

Regards,

Ravikumar Venkatesan

If this post is helpful, kindly consider accepting it as the solution so that other members can locate it more quickly.

Attachment: ej2reacttsxscheduleeventtemplatesample_794efcc.zip

[Justin Schnurer]

Thanks, I am able to force the template into a string field by casting it as any in this way:

template: ((props: IScheduleCalendarItem) => <CalendarItem item={props} />) as any,

Now I am using the template to change what my event looks like, but I don't have the ability to change the blue background color of the item from here.

This is what it looks like now:

 

Notice that there are blue edges on the left and right. This is because the events are rendered in this structure:

When I use the eventSettings.template in this way, I only have control over the div that is inside of the calendar event and I do not have the ability to control the parent div.

In my CSS file, I am using this style to change the layout of the parent div:

.e-appointment-details {

  flex: auto;

  display: flex;

  > div {

    flex: auto;

    display: flex;

  }

}

This at least lets me stretch my div to fill (most) of the parent div. However, since I have turned on drag/drop and resizing for events, the little handles on the left and right still show up.

​I would like to change the background color (and border color) of a calendar item based on some property of the event.

The items that I bind to the Schedule component have a property named "status". Ideally, I would like to change the background color and border color of the main calendar event div based on this status:

If status = "Recommended", green;
If status = "Approved", blue;

etc.

How can I control the color of a calendar event item based on one of its properties?

[Justin Schnurer]

Hi again. I have found a solution. I have implemented the eventRendered​ handler of the ScheduleComponent. In it, I check the a​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​rgs.data.MYPROPERTY​ and then add a classname to the rendered element. This then allows me to style the overall item based on classname.

[Ravikumar Venkatesan]

Hi Justin,

Thanks for the update.

We are happy that you have found the solution for your requirement. Kindly let us know if you need any further assistance on this.

Regards,

Ravikumar Venkatesan