icon's color on new event

[Walter Martin]

When I render a new event of a scheduler in a mobile phone or in a tablet, I see on the header section a left arrow key (on the left part of the header) and a disk image (on the right part of the screen) instead of the "save" and "cancel" buttons usually showed in the same "new event" popup from a PC web page

How can I change the color of the "left" icon and "disk" icon ?

And generally how can I change the content of the header in the

  <ScheduleTemplates>

                    <EditorTemplate>

Thanks

[Ruksar Moosa Sait]

Hi Walter,

1. You can change the color icons by overwriting the default CSS like below.

Left & right icon

.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-prev .e-icon-prev,

.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-next .e-icon-next

{

     color:red;

}

Disk/Today icon

.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-icon-today{

      color:green;

  }

Output Screenshot:

2. It is not possible to change the header contents and we already considered this requirement as a feature request, and it will be published in any of our upcoming releases.

https://www.syncfusion.com/feedback/25993/provide-support-to-customize-header-of-the-editor-window

Kindly try the attached sample and let us if this meets your requirement.

Regards,

Ruksar Moosa Sait

Attachment: ToolbarIconsCSS_d64ad557.zip

[Walter Martin]

The icons I need to change are not those you suggested me.

I was wondering for the "new event" dialog box because if you render it in a mobile phone or in a tablet, the header has a title, a left arrow and a disk image white with background white as you can see in my picture instead of a save and cancel button rendered in a PC in the "new event" dialog footer with a blue background  header

mobile phone                                                 PC

[Vengatesh Maniraj]

Hi Walter,

You can change the icon and text color of the new event dialog header by overriding the below CSS classes.

<style>

    .e-schedule-dialog.e-device .e-save-icon,

    .e-schedule-dialog.e-device .e-back-icon,

    .e-schedule-dialog.e-device .e-title-text {

        color: red !important;

    }

</style>

Regards,

Vengatehs