How to customize an appointment by changing the color and adding custom fields in subject

[Gilles]

I have looked at all the examples but i dont understand setting up in javacript. Can you give me a simple example to change the color of an appointment and another simple example to display a custom field in addition to the subject in the appointment in javascript environment

[Praveenkumar Narasimhanaidu]

Hi Gilles, 

Greetings from Syncfusion support. 

Q1: Setting appointment color. 

We can set the color to the appointments by using customizing the events. We have prepared a sample for your reference using eventRendered event which can be viewed from following link. 

Sample: https://stackblitz.com/edit/appointment-color-in-scheduler?file=index.ts 

[index.ts] 

 eventRendered: (args: EventRenderedArgs) => { 

    let categoryColor: string = args.data.CategoryColor as string; 

    if (!args.element || !categoryColor) { 

      return; 

    } 

    if (scheduleObj.currentView === "Agenda") { 

      (args.element 

        .firstChild as HTMLElement).style.borderLeftColor = categoryColor; 

    } else { 

      args.element.style.backgroundColor = categoryColor; 

    } 

  } 

Please refer other ways to customize the events using the following link. 

https://ej2.syncfusion.com/documentation/schedule/appointments/?no-cache=1#appointment-customization  

Q2: custom field in addition to the subject. 

We can achieve your requirement by using template option in which you can access all the appointment fields. We have prepared a sample for your reference which can viewed from following link. 

Sample: https://stackblitz.com/edit/custom-subject-field-dadqtv?file=index.html  

[index.html] 

<script id="apptemplate" type="text/x-template"> 

    <div class="template-wrap" style="background:${SecondaryColor}"> 

        <div class="subject">${Subject}</div> 

       <div class="description">${Description}</div> 

    </div> 

</script> 

Kindly try the above solutions and get back to us if you need any further assistance. 

Regards, 

Praveenkumar. 

[Gilles]

Sorry, but we work in .js environment not .ts environment

could you translate your sample in .js

Thanks a lot

[Nevitha Ravi]

Hi Gilles, 

Thanks for your update. 

Please find the following sample for your requirement and get back to us with the previously requested details if you face any problem, 

https://stackblitz.com/edit/schedule-french-locale?file=index.js  

Regards, 

Nevitha 

[Gilles]

it's work !

but how to format the {StartTime} to see just hour and minutes (hh:mm)?

<script id="apptemplate" type="text/x-template">
    <div class="template-wrap">
        <div class="e-subject">${Subject}</div>
        <div class="e-subject">${Buzzee_Content}</div>
       <div class="e-time">${StartTime}</div>
       <div class="e-subject">${Description}</div>

    </div>
</script>

[Nevitha Ravi]

Hi Gilles, 

Thanks for your update. 

You can format the date in the event template with the help of internationalization, please refer to the following sample and UG. 

https://stackblitz.com/edit/schedule-event-template?file=index.js  

var instance = new ej.base.Internationalization(); 

window.getTimeString = function(value) { 

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

}; 

  <script id="apptemplate" type="text/x-template"> 

    <div class="template-wrap" style="background:${SecondaryColor}"> 

        <div class="subject">${Subject}</div> 

        <div class="time">Time: ${getTimeString(data.StartTime)} - ${getTimeString(data.EndTime)}</div> 

    </div> 

</script> 

https://ej2.syncfusion.com/javascript/documentation/schedule/appointments/#using-template  

https://ej2.syncfusion.com/javascript/documentation/common/internationalization/#manipulating-datetime  

Please try the above sample and get back to us if you need any further assistance. 

Regards, 

Nevitha 

[Gilles]

Perfect ! Thanks

[Nevitha Ravi]

Hi Gilles, 

You are most welcome..! Please get back to us if you need any further assistance. 

Regards, 

Nevitha 

[Gilles]

Despite the loading of the fr-ch language and the change of culture.

The code instance.formatDate(value, { skeleton: "hm" }); display 08:00AM 4:00 PM

How to display 08:00 16:00

Regards

[Nevitha Ravi]

Hi Gilles, 

Thanks for your update. 

You can get the 24 hour format with the below code please refer to the following sample. 

https://stackblitz.com/edit/time-format-event-template?file=index.js  

window.getTimeString = function(value) { 

  return instance.formatDate(value, { skeleton: "Hm" }); 

}; 

Also, you can refer the previously shared UG to set different date and time formats. 

https://ej2.syncfusion.com/javascript/documentation/common/internationalization/#manipulating-datetime  

Regards, 

Nevitha