[Solved] CSS colour change on custom attribute

[JK]

Hi,

This is probably an esay one for you, but must admit I am stuck here.  Using your example "Scheduler\examples\resources",  I am trying to change the color of the appointment if a specific field of mine rather than the resources.

I have tried to use the for each command for the Attribute command but getting nowhere fast. So I ripped it out and just put in a simple if statement.  This unfortunatley errors with "System.NullReferenceException: Object reference not set to an instance of an object.", I have added the field to the "attributes" section of my scheduler, any help would be great! here is my code :

protected void RadScheduler1_AppointmentCreated(object sender, AppointmentCreatedEventArgs e)
    {

        if (e.Appointment.Attributes["AppointmentType"].ToString() == "0")
        {
            e.Appointment.CssClass = "AppointmentGeneral";
        }
        else
        {
            e.Appointment.CssClass = "AppointmentJobCard";
        }

    }

Thanks,

JK

[Peter]

Hello JK,

The code looks correct. Can you send us the code with which you set the Custom Attribute? Here is an example of how to do it in code behind:

protected void Page_Load(object sender, EventArgs e)
    {
        RadScheduler1.CustomAttributeNames = new string[] { "AppointmentType" };
    }

Greetings,
Peter
the Telerik team

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

[JK]

Hi Peter,

I dont set the attributes via code, I use the properties of the scheduler to set them..

<telerik:RadScheduler ID="RadScheduler1" runat="server" CustomAttributeNames="ServiceHistoryID,AppointmentType"
                            DataEndField="EndDate" DataKeyField="AppointmentID" DataRecurrenceField="RecurrenceStorage"
                            DataRecurrenceParentKeyField="RecurrenceParentKey" DataSourceID="DSMYAPPOINTMENTS"
                            DataStartField="StartDate" DataSubjectField="Subject" DayEndTime="20:00:00" DayStartTime="07:00:00"
                            EnableAdvancedForm="False" FirstDayOfWeek="Monday" Font-Names="Trebuchet MS"
                            Height="449px" HoursPanelTimeFormat="HH:mm" LastDayOfWeek="Sunday" MinutesPerRow="60"
                            OnAppointmentClick="RadScheduler1_AppointmentClick"
                            SelectedDate="2007-10-04" SelectedView="WeekView" Skin="WebBlue" StartEditingInAdvancedForm="False"
                            TimeLabelRowSpan="1" TimeZoneOffset="00:00:00" WorkDayEndTime="18:00:00" WorkDayStartTime="08:00:00"
                            OnClientAppointmentInserting="AppointmentInserting" OnClientAppointmentResizeEnd="AppointmentInserting"
                            OnClientAppointmentResizeStart="AppointmentInserting" OnAppointmentDelete="RadScheduler1_AppointmentDelete"
                            OnFormCreated="RadScheduler1_FormCreated" OnAppointmentCreated="RadScheduler1_AppointmentCreated"
                            OnAppointmentUpdate="RadScheduler1_AppointmentUpdate" MonthVisibleAppointmentsPerDay="1">
                            <ResourceTypes>
                                <telerik:ResourceType DataSourceID="MYEMPLOYEE" ForeignKeyField="EmployeeID"
                                KeyField="EmployeeID" Name="Resource Type 0" TextField="FullName" />
                            </ResourceTypes>
                        </telerik:RadScheduler>

Hope thats enough...

[JK]

Hi Peter,

Scratch that!  It was Visual Studio not storing my changes yet AGAIN!!  That part now works.

I am still having trouble with the CSS file though.  I copied your css code and customised it for my needs,  I have placed two png files within the images folder and added the CSS code into my main style sheet, I still dont see a change in the colour.  Do I need to assign the CSS file to the scheduler as I cannot see where that is added on your example...

Here is my CSS snippet..

.RadScheduler_Default .AppointmentGeneral .rsAptWrap
{
    background: #c1adc8 url('../Images/General.png') repeat-x;
    border: solid 1px #9b8fa3;
    border-top: solid 1px #c4bdc9;
}

.RadScheduler_Default .AppointmentJobCard .rsAptWrap
{
    background: #d1bfa5 url('../Images/JobCard.png') repeat-x;
    border: solid 1px #d1bfa5;
    border-top: solid 1px #e3d8c8;
}

Note: your forum would not allow me to add the code as CSS I got an JS error when clicking on the insert button.
thanks,

JK

[JK]

fixed it.  It was becuase I was using a different skin to default, so I needed to adjust my css entries from ".RadScheduler_Default .AppointmentGeneral .rsAptWrap " to ".RadScheduler_WebBlue .AppointmentGeneral .rsAptWrap ".

Sorry,  many a long hour being worked on this project and sometimes I need my 5 hours sleep and look back at it.

Thanks,

JK

[Peter]

Hi Jon,

I am sorry about your troubles customizing the appearance. There is a little trick in this and I regret that the help topic which explains everything in detail is not live yet. Anyway, here is the way to set the class:

.rsApt.AppointmentGeneral .rsAptInner
{
   ...
}

Note that there is no space between ".rsApt" and ".AppointmentGeneral"

Feel free to contact us if you have any concerns or questions.


Cheers,
Peter
the Telerik team

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