Appointment style customization

[Maxime Lepage]

Hello,

I am using the schedule with the timeline week view. I got 2 questions:

- Is it possible to add vertical spacing between the appointments?

- Is it possible to render HTML as the appointment subject, so that I can have bold words in displayed etc.?

Thank you!

[Ashokkumar Karuppasamy]

Hi Maxime Lepage,

Q1) Is it possible to add vertical spacing between the appointments?

Currently, the height and top values of the rendered event are calculated based on the event's. To provide you with the best possible support, we kindly ask for additional information regarding your scenario. Understanding your specific requirements and expectations will allow us to align our assistance more effectively. Please share further details about your scenario or any specific issues you're encountering so that we can offer tailored assistance.

Q2) - Is it possible to render HTML as the appointment subject, so that I can have bold words in displayed etc.?

You can achieve your requirement by utilizing the schedule eventTemplate. By using the event template, you can customize the appearance of the appointments according to your needs. Please refer to the attached demo and user guide for a demonstration of your solution. Feel free to try this approach and let us know if you require any further assistance.

Demo: https://ej2.syncfusion.com/vue/demos/#/material3/schedule/events-template.html

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

Regards,
Ashok

[Maxime Lepage]

Thank you! The event template solved my problem. As for the vertical spacing, I just wanted to have a bigger vertical gap between rendered appointments. Its not

[Ashokkumar Karuppasamy]

Hi Maxime Lepage,

You can achieve your requirements by customizing the schedule event styles to meet your needs. The attached code snippet and sample are provided for your reference. Please try the solution and let us know if you require any further assistance.

Sample: https://stackblitz.com/edit/zsuxay-zvgfaz?file=src%2FApp.vue

    .e-schedule .e-timeline-view .e-appointment, .e-schedule .e-timeline-month-view .e-appointment {

        background: transparent;

        padding: 0 5px;

        border-color : transparent;

    }

    .e-schedule .e-timeline-view .e-appointment .e-appointment-details, .e-schedule .e-timeline-month-view .e-appointment .e-appointment-details {

        background: rebeccapurple;

    }

 

Regards,

Ashok

[Maxime Lepage]

Hi Ashokkumar, thank you for you reply.

I actually mean the vertical spacing, when appointments are on top of each other or below each other, increase whitespace between them on top of each other.

Thank you!

[Ashokkumar Karuppasamy]

Hi Maxime Lepage,

We have mentioned the last update regarding customizing the schedule appointment styles to meet your requirements. Similarly, please try adjusting the padding style to meet your requirements. We have modified the last shared sample accordingly. Please try the solution and let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/zsuxay-wxmrmf?file=src%2FApp.vue

    .e-schedule .e-timeline-view .e-appointment, .e-schedule .e-timeline-month-view .e-appointment {

        background: transparent;

        padding: 5px 5px 0 5px;

        border-color : transparent;

    }

Furthermore, if there is a possibility that we misunderstood your requirement, we would greatly appreciate it if you could provide us with further information about your scenario. This will help us align our understanding with your expectations and provide you with the best possible assistance.

[Maxime Lepage]

Thank you! This works.

[Ashokkumar Karuppasamy]

Hi Maxime Lepage,

Thanks for the update. We're glad to hear that the provided solution meets your requirements.

Regards,
Ashok