Appointment Category Colors in Legend

[Shane Ham]

How can I show the built in Appointment Category styles in a legend? I see where this is done on the Alex, Bob example but it appears that the color box is rendered with a span that has a custom style applied.

[Peter]

Hello Shane,

The background images for the appointment styles can be found in your local installation of the Telerik.Web.UI suit -> Skins\Common\Scheduler and the css rules are defined in Scheduler.css in the Skins folder.


Regards,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Shane Ham]

Thanks Peter but I don't think that I need to show an image. It appeared in the example that the span just had a background color set. I am guessing that the embedded images are mapped to named colors so to speak?

[Peter]

Hi Shane,

The background images for the appointment styles use gradients so the color will vary from top to bottom. You can download any color picker and get the color code by clicking somewhere in the middle of the image. Here is a light and easy to use tool that you help you with this task:
http://www.freedownloadsarchive.com/Multimedia_and_Design/Image_Editing/download-GetColor____Color_Picker_27452.html


Best wishes,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Shane Ham]

Thanks for the prompt responses Peter. Perhaps I am going about this wrong way. Let me explain what I am trying to do.

I am trying to do something similiar to the First Look example where the bottom panel bar has 10 checkboxes. Lets call them factors.
Each factor is mapped to a corresponding rsCategory + color in the database. I just want to show the color next to the checkbox. I thought that the styles were embedded. Doing something like this does not seem to give me the desired result. 

<span class="rsCategoryBlue">&nbsp;&nbsp;&nbsp;&nbsp;</span>

Now I am certainly able to display the color as you suggested, I'm just not sure that that is the best way. If you guys change the pngs in the future I would have to make changes as well. It would be better just to use the embedded styles I think.

[Peter]

Hi Shane,

I see what you mean and it makes perfect sense. Here is how to fetch a background image from the WebResource:

* * *
 <div style="background:transparent url('<%= ClientScript.GetWebResourceUrl(typeof(RadScheduler), "Telerik.Web.UI.Skins.Common.Scheduler.rsAppointmentRedBg.png") %>') no-repeat -10px -10px" >text</div>
* * *

This code will get you the background image for the rsCategoryRed style. You can get the other 9 images in the same way, just change the name of the image accordingly.


Greetings,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Hadi]

Hi Peter,

I'm actually trying to do something similar to this. 
I would like to make changes on the Telerik demo http://demos.telerik.com/aspnet-ajax/webmail/calendar.aspx in order to display appointment color just next to the calendar name.


I wrote this:

     class CheckBoxTemplate : ITemplate
    {
        private RadScheduler _radScheduler;
        private RadAjaxManager _radAjaxManager;
        private RadAjaxLoadingPanel _radAjaxLoadingPanel;
        private ClientScriptManager _clientScript;

        public RadScheduler RadScheduler
        {
            get
            {
                return _radScheduler;
            }
            set
            {
                _radScheduler = value;
            }
        }

        public RadAjaxManager RadAjaxManager
        {
            get
            {
                return _radAjaxManager;
            }
            set
            {
                _radAjaxManager = value;
            }
        }

        public RadAjaxLoadingPanel RadAjaxLoadingPanel
        {
            get
            {
                return _radAjaxLoadingPanel;
            }
            set
            {
                _radAjaxLoadingPanel = value;
            }
        }

        public ClientScriptManager ClientScript
        {
            get
            {
                return _clientScript;
            }
            set
            {
                _clientScript = value;
            }
        }

        public void InstantiateIn(Control container)
        {
            IEnumerable<ResourceStyleMapping> Ressources = RadScheduler.ResourceStyles.OfType<ResourceStyleMapping>();
            HtmlGenericControl OuterDiv = new HtmlGenericControl("div");
            OuterDiv.Attributes["class"] = "rpCheckBoxPanel";
            foreach (ResourceStyleMapping Resource in Ressources)
            {
                HtmlGenericControl InnerDiv = new HtmlGenericControl("div");
                HtmlGenericControl ColorDiv = new HtmlGenericControl("div");
                ColorDiv.Attributes["style"] = "background:transparent url('" + ClientScript.GetWebResourceUrl(typeof(RadScheduler), "Telerik.Web.UI.Skins.Common.Scheduler.rsAppointment" + Resource.ApplyCssClass.Replace("rsCategory", "") + "Bg.png") + "') no-repeat -10px -10px";
                ColorDiv.InnerHtml = "    ";
                InnerDiv.Controls.Add(ColorDiv);
                CheckBox CheckBox = new CheckBox();
                CheckBox.ID = "chkType" + int.Parse(Resource.Key.ToString());
                CheckBox.Text = Resource.Text;
                CheckBox.Checked = true;
                CheckBox.AutoPostBack = true;
                CheckBox.CheckedChanged += new EventHandler(CheckBoxes_CheckedChanged);
                InnerDiv.Controls.Add(CheckBox);
                OuterDiv.Controls.Add(InnerDiv);
                AjaxSetting Setting = new AjaxSetting(CheckBox.ID);
                Setting.UpdatedControls.Add(new AjaxUpdatedControl(RadScheduler.ID, RadAjaxLoadingPanel.ID));
                RadAjaxManager.AjaxSettings.Add(Setting);
            }
            container.Controls.Add(OuterDiv);
        }

        protected void CheckBoxes_CheckedChanged(object sender, EventArgs e)
        {
            RadScheduler.Rebind();
        }
    }

However, i'm afraid the following is not displaying what it supposed to:

ColorDiv.Attributes["style"] = "background:transparent url('" + ClientScript.GetWebResourceUrl(typeof(RadScheduler), "Telerik.Web.UI.Skins.Common.Scheduler.rsAppointment" + Resource.ApplyCssClass.Replace("rsCategory", "") + "Bg.png") + "') no-repeat -10px -10px";

Do you have any idea on how to fix this?

Many thanks,

[Peter]

Hi Hadi,

My last suggestion in this thread was intended for a very old version of the Telerik.Web.UI controls. Now, you can simply set the BackColor property of the appointment in AppointmentDataBound. The rsAppointment[Color]Bg.png images have been obsoleted and are no longer served by the web resources of the Telerik.Web.UI assembly.


All the best, Peter
the Telerik team

[Hadi]

Hi Peter,

Thanks you for your answer. Actually my goal is not to set the appointment color but to get the appointment color set by Telerik cssclass and use it as a bgcolor for the related item in the appointment type list.

Any advise is very appreciated.

Regards,

[Peter]

Hi Hadi,

Is there any specific reason why you need to set the CssClass property of the appointment instead of the BackColor property? With the latter, you don't need to extract the background image, since only color will be used.

Greetings,
Peter
the Telerik team

[Hadi]

Well its simply that i like the colors of the rsCategory[Color] CSS models in Telerik Scheduler.

Now if you are trying to say that these CSS models can became obsolete in future versions, i might then use a specific color by appointment type instead using BackColor property.

Please advise.

Regards,

[Peter]

Hello Hadi,

The CssClass property will no become obsolete, but it is much easier to style appointments with the BackColor property. You can still preserve the rounded corners and gradient of the appointment by setting AppointmentStyleMode="Default".

Best wishes,
Peter
the Telerik team

[Hadi]

okay thanks.

regards,