How can I change the UI of the new event pop-up and the event title style?

[Bilal]

I'm using the schedule component and I want to change the pop UI, I managed to remove the location field,
but I couldn't change the date format,

I would also like to be able to add some prefixes to the title of the event, such as lt say the first two letters of the owner text.

[Ram Raju Elaiyaperumal]

Hi Bilal,

Thank you for your query. It seems you are looking to customize the Syncfusion Schedule component's popup UI, specifically the date format and the event title.

 

To change the date format, you can indeed use the format property of the DateTimePicker component. Here's a sample code snippet:

onPopupOpen: function(data) {

                let datePicker;

                if(data.type === "Editor") {

                    let datePickers = data.element.querySelectorAll(".e-datetimepicker");

                    datePickers.forEach((pickerElement) => {

                        let datePicker = pickerElement.ej2_instances[0];

                        if (datePicker) {

                            //datePicker.format = 'yy/M/d h:mm a';

                            //datePicker.format = 'yyyy-MM-dd HH:mm';

                            datePicker.format = 'dd-MMM-yy hh:mm a';

                            datePicker.dataBind();

                        }

                    });

                }

            },

 

This code will change the date format to 'dd-MMM-yy hh:mm a' (e.g., '05-Apr-21 01:00 PM').

As for adding prefixes to the event title, you can modify the event using the event template. Here's an example:

 

getResourceName: function(data) {

                let id = data.AirlineId

                let airline = this.resourceDataSource.find(airline => airline.AirlineId === id);

                return airline.AirlineName;

            }

 

This function will return the airline name based on the AirlineId of the event data. You can then use this function to add a prefix to your event title.

 

Please note that these are just examples and you may need to adjust the code to fit your specific needs.

For your convenience we have prepared a stackblitz sample, kindly check on the sample: Ydknja (forked) - StackBlitz

 

If you have any further questions or need additional assistance, please don't hesitate to ask.

 

Regards,

Ram