Skinning the sheduler - Please Help!

[John]

Hello - I am using the Q1 2008 release.

I need to create a custom skin for a scheduler.

I want to copy and existing skin into a newly named folder and start editing the images and css.

I have looked for help online but cant get any of the tutorials to work so please dont point me in the direction of them.

The problem is that, even if I copy a skin from the folder that comes with the install, it dowesn't work when I set the skin of the control to it.

How do I actually register a skin?

It's really weired as I have imported the css as usual but it just doesn't seem to be working.

Would be useful if I could get this fixed ASAP

Thanks

[Helen]

Hi John,

Please find attached a project which will help you to get started.

Let us know how it goes.

Regards,
Helen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[John]

Thanks - I got your project working and I've also managed to get mine working as well - I had forgotten to change the style names in the css file.

i.e. If I copied the Vista skin folder over to my project and renamed it 'MySkin' I then need to go into the css file for each control and chage any occurance of _Vista to _MySkin.

What I did notice from your project is that it has the same problem that I am now having - on the calendar pop-up, the image location for the image that you click on to open the calendar is wrong and you are missing images - same as in my project - how do I set the image location for the date picker/calendar controls that are embedded in the sheduler?

Thanks

[Helen]

Hello John,

Yes, you have to change the skin name in the css file in order to get the custom skin working.

As for the missing images  - you have to include the css files of Calender and Input also in your project, since the Calendar and Input are integrated in the advanced form.

Please find attached the modified project.

Note that you have to adjust the images depending on your project structure. You may examine the images address using the page properties - see the attached screenshot for more details.


Hope this helps.

Regards,
Helen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[John]

Brilliant - thanks, I'll take a look at this.

Much appreciated.

[John]

Thanks - I've looked at your example but what you've done is make sure that the 2 images - datePickerPopup and datePickerPopupHover are in the same folder as the sheduler control - so when you run the app, it looks right next itself for those 2 images.

My scheduler is in a page which is in the root of my web application so are you saying I have to have those 2 images in the root of my application as well? Or is there a way of specifying where those images are stored?

Thanks.

[HHalim]

You have to define the imagespath property:

protected void RScheduler_FormCreated(object sender, SchedulerFormCreatedEventArgs e)
{
RadDatePicker startDate = (RadDatePicker)e.Container.FindControl("StartDate");
RadDatePicker endDate = (RadDatePicker)e.Container.FindControl("EndDate");
startDate.ImagesPath = ResolveUrl("~/Skins/Web20/Calendar/");
endDate.ImagesPath = ResolveUrl("~/Skins/Web20/Calendar/");
}

 I hope this helps.

[David Espino]

Hi there:

I have some issues with skinning Scheduler too. I've just created the attached Style with the StyleBuilder tool. I've tried to add the file compresed with the control but this page does not allow rar or zip files.
Here are the facts:

-I'm using a RadScheduler in a main page, here's the markup

 

<telerik:RadScheduler runat="server" ID="RadScheduler1" Width="750px" SelectedView="DayView"

 

 

 

EnableEmbeddedSkins="false" Skin="IARScheduler"

 

 

 

TimeZoneOffset="00:00:00" DayStartTime="00:00:00" DayEndTime="23:59:59"

 

 

 

ProviderName="IarDataProvider" ReadOnly="false" StartInsertingInAdvancedForm="true"

 

 

 

EnableDescriptionField="true" OnAppointmentCreated="RadScheduler1_AppointmentCreated"

 

 

 

OnClientFormCreated="schedulerFormCreated"

 

 

 

Localization-Show24Hours="" Localization-ShowBusinessHours=""

 

 

 

CustomAttributeNames="Location,Reminder,SendNotification,RecurrenceRuleFriendlyText"

 

 

 

OnAppointmentDelete="RadScheduler1_AppointmentDeleted" OnOccurrenceDelete="RadScheduler1_OccurrenceDelete">

 

 

 

<AdvancedForm Modal="true" />

 

 

 

 

<AppointmentTemplate>

 

 

 

<asp:Label runat="server" ID="RecurrenceIcon" />

 

 

<%

# Eval("Subject") %>

 

 

 

</AppointmentTemplate>

 

 

 

<AdvancedEditTemplate>

 

 

 

<scheduler:AdvancedForm runat="server" ID="AdvancedEditForm1" Mode="Edit"

 

 

 

Subject='<%# Bind("Subject") %>'

 

 

 

Description='<%# Bind("Description") %>'

 

 

 

Start='<%# Bind("Start") %>'

 

 

 

End='<%# Bind("End") %>'

 

 

 

RecurrenceRuleText='<%# Bind("RecurrenceRule") %>'

 

 

 

Location='<%# Bind("Location") %>'

 

 

 

Reminder='<%# Bind("Reminder") %>'

 

 

 

ReminderRecurrence='<%# Bind("ReminderRecurrence") %>'

 

 

 

MemberID='<%# Bind("Members") %>'

 

 

 

GroupID='<%# Bind("Groups") %>'

 

 

 

SendNotification='<%# Bind("SendNotification") %>'

 

 

 

RecurrenceRuleFriendlyText =<%#Bind("RecurrenceRuleFriendlyText") %>

 

 

 

/>

 

 

 

</AdvancedEditTemplate>

 

 

 

<AdvancedInsertTemplate>

 

 

 

<scheduler:AdvancedForm runat="server" ID="AdvancedInsertForm1" Mode="Insert"

 

 

 

Subject='<%# Bind("Subject") %>'

 

 

 

Start='<%# Bind("Start") %>'

 

 

 

End='<%# Bind("End") %>'

 

 

 

Description='<%# Bind("Description") %>'

 

 

 

RecurrenceRuleText='<%# Bind("RecurrenceRule") %>'

 

 

 

Location='<%# Bind("Location") %>'

 

 

 

Reminder='<%# Bind("Reminder") %>'

 

 

 

ReminderRecurrence='<%# Bind("ReminderRecurrence") %>'

 

 

 

MemberID='<%# Bind("Members") %>'

 

 

 

GroupID='<%# Bind("Groups") %>'

 

 

 

SendNotification='<%# Bind("SendNotification") %>'

 

 

 

RecurrenceRuleFriendlyText =<%#Bind("RecurrenceRuleFriendlyText") %>

 

 

 

/>

 

 

 

</AdvancedInsertTemplate>

 

 

 

<TimelineView UserSelectable="false" />

 

 

 

<TimeSlotContextMenuSettings EnableDefault="true" />

 

 

 

<AppointmentContextMenuSettings EnableDefault="true" />

 

 

 

</telerik:RadScheduler>

 

 

-I'm using the Style generaded by the stylebuilder. I just changed colors and borders colors from "Outlook" base skin.

-I'm using a user control as the Dialog to Add and Edit appointment. I just realized that there are many controls that "inherits" skin from the Scheduler control, so I added the EnableEmbeddedSkins="false" Skin="IARScheduler" to all rad controls using skins.

I don't know what is missing. Could you please help me with this issue?

Thanks a lot

[Peter]

Hi David,

You settings are correct. However, you need to create and register a custom skin for each Telerik control that you use in the advanced form. Let me know if you have further questions of if you need more help on this case.


Regards,
Peter
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.