TelerikScheduler - Individual independent Appointment colors

[Curt]

 

I'm using the Template override specific background color:

 <ItemTemplate>

                @{
                    var appointment = context as ShiftCalendarBindingModel ?? new ShiftCalendarBindingModel();
                }
                <div style="height: 100%; width:100%; background-color:@(new MarkupString(appointment.BackGroundColor))">
                    <strong>@appointment.ProductionLineName</strong><br />
                    <p>Shift: @appointment.ShiftNumber </p>
                </div>
</ItemTemplate>

The issue is that the appointment background color is clipped off (see attached image) and it shows either the schedule color or the resource color (if used), instead of the appointment color as assigned in the code above. 

Any suggestions on how to assign the background color and have the appointment fully painted, without having to override CSS, which may effect other controls/color/formatting?

Why not have a color property on the appointment itself.  It would be so easy to assign that color property when loading the data, and we could programmatically assign the color any way we'd like based upon the resource, the appointment/appointment type or any type of contextual data we need.   The property would eliminate any "clever" work arounds such as the example code provided.

I've attached an image that shows the "clipping" at the end of the appointment.  Note the colors seen at the clipping is the Resource color.  It would be "white" the calendar background if the resources were not used.

 

Thanks,

Curt

 

 

 

 

[Nadezhda Tacheva]

Hi Curt,

By design, the "k-event" element of the Scheduler has some left padding, so the resize handle and the delete icon can be rendered. The content of the ItemTemplate is rendered as an inner element of the "k-event" div. The ItemTemplate container not fully cover the "k-event" div by default due to the above-mentioned padding.

That said, you can reduce the padding of the "k-event" div, so the template container expands to cover the whole appointment. Other than that, the approach that you are using is actually the one we recommend for setting different colors to the appointments based on the model. Take a look at this knowledge base article to see how the padding specifics is handled - Dynamic appointment colors.

Using these specific CSS rules to adjust the appearance of the appointments will not affect other components since you will be specifically targeting the "k-event" element of the "k-scheduler". Furthermore, you can ensure that you alter the appearance of only this Scheduler instance by adding a custom CSS class to the component and using it to apply the styles. For example:

<style>
    /* remove the default padding, so the template container expands to cover the whole appointment */
    .custom-scheduler .k-event {
        padding: 0px;
    }
</style>

<TelerikScheduler Class="custom-scheduler" ... >

I hope you will find the above information useful. Please let us know if further questions appear.

Regards,
Nadezhda Tacheva
Progress Telerik