Appointments mouse hover and select styles

[Pooja]

Hi,

How can I add styles for appointment mouse hover and appointment select. I tried various custom skins, but I do not find any style applied on appointments for these events. Please suggest.

[Princy]

Hello,

Try the following CSS.
CSS:

.RadScheduler .rsAptOut:hover  .rsAptMid:hover, .rsAptIn:hover .rsAptContent:hover
     {
       background:Red !important;
     }
.RadScheduler .rsAptOut:active .rsAptMid:active , .rsAptIn:active .rsAptContent:active
     {
        background:Green !important;
     }

Thanks,
Princy.

[Ivana]

Hello,

The following CSS should work for your scenario:

.rsAptIn .rsAptContent:hover
{
    background: Red;
}
.rsAptSelected .rsAptIn .rsAptContent
{
    background: Green;
}

I hope this helps.

Regards,
Ivana
the Telerik team

[Pooja]

One problem got resolved , hover color is coming, but still active or selected appointments color is not changing. I have overridden Office2010Silver skin. Attached is the overridden skin file.

/* RadScheduler Office2010Silver skin */

 .RadScheduler_Defualt    .rsAptIn .rsAptContent:hover
{
    background: #F7DFA7;
}
.RadScheduler_Defualt .rsAptSelected .rsAptIn .rsAptContent
{
    background: #fcdb89;
}
/* common */
.RadScheduler_Defualt,
.RadScheduler_Defualt a,
.RadScheduler_Defualt input,
.RadScheduler_Defualt select,
.RadScheduler_Defualt textarea
{
    color: #333333;
    font: normal 12px/14px "Segoe UI", Arial, sans-serif;
}

.RadScheduler_Defualt textarea
{
    background: #ffffff;
}

/* header */

/* header sprites */
.RadScheduler_Defualt .rsHeader,
.RadScheduler_Defualt .rsHeader ul a:hover,
.RadScheduler_Defualt .rsHeader ul a:hover span,
.RadScheduler_Defualt .rsHeader .rsSelected,
.RadScheduler_Defualt .rsHeader .rsSelected em,
.RadScheduler_Defualt .rsHeader .rsDatePickerActivator,
.RadScheduler_Defualt .rsHeader .rsPrevDay,
.RadScheduler_Defualt .rsHeader .rsNextDay
{
    background-image: url('../Images/Calendar/rsSprites.png');
}

.RadScheduler_Defualt .rsHeader
{
    border: 1px solid #a4abb2;
}

.RadScheduler_Defualt .rsHeader,
.RadScheduler_Defualt .rsHeader a:hover
{
    color: #000000;
}

.RadScheduler_Defualt .rsHeader a
{
    color: #3b3b3b;
}

.RadScheduler_Defualt div.rsHeader .rsPrevDay
{
    margin: 6px 0 0 3px;
    background-position: 0 -48px;
}

.RadScheduler_Defualt div.rsHeader .rsNextDay
{
    margin: 6px 6px 0 3px;
    background-position: -16px -48px;
}

.RadScheduler_Defualt div.rsHeader a.rsPrevDay:hover
{
    background-position: -70px -48px;
}

.RadScheduler_Defualt div.rsHeader a.rsNextDay:hover
{
    background-position: -86px -48px;
}

/* content */

.RadScheduler_Defualt .rsContent
{
    background: #fff;
}

/* <headers> */

.RadScheduler_Defualt .rsHorizontalHeaderTable
{
    color: #000000;
    background: #e4e4e4;
}

.RadScheduler_Defualt .rsHorizontalHeaderWrapper {
    border-color: #a7bac5;
    background: #d6e5f3;
}

.RadScheduler_Defualt .rsSpacerCell,
.RadScheduler_Defualt .rsAllDayHeader,
.RadScheduler_Defualt .rsVerticalHeaderWrapper,
.RadScheduler_Defualt .rsVerticalHeaderTable
{
    background: #ffffff;
}

.RadScheduler_Defualt .rsVerticalHeaderTable th
{
    border-color: #868686 #a4abb2;
    color: #3b3b3b;
}

.RadScheduler_Defualt .rsHorizontalHeaderTable th
{
    border-color: #a7bac5;
    background-color: #c3d9f1;
    background-image: url('../Images/Calendar/rsSprites.png');
}

.RadScheduler_Defualt .rsVerticalHeaderTable th
{
    border-color: transparent #a4abb2;
    border-top: 0;
}

.RadScheduler_Defualt .rsVerticalHeaderTable .rsAlt th
{
    border-color: #a4abb2 #a4abb2;
}

/* </headers> */

/* <all-day-row> */

.RadScheduler_Defualt .rsAllDayRow
{
    background: #d6e5f3;
}

.RadScheduler_Defualt .rsSpacerCell,
.RadScheduler_Defualt .rsAllDayHeader,
.RadScheduler_Defualt .rsVerticalHeaderTable .rsAllDayHeader
{
    color: #a4abb2;
    border-color: #a7bac5 #a4abb2;
}

.RadScheduler_Defualt .rsAllDayRow td,
.RadScheduler_Defualt .rsContentTable .rsAllDayRow td
{
    border-color: #a7bac5;
    border-style: solid;
}

.RadScheduler_Defualt .rsVerticalHeaderTable .rsMainHeader th
{
    border-bottom-color: #A7BAC5;
}

.RadScheduler_Defualt .rsSpacerCell,
.RadScheduler_Defualt .rsContent .rsAllDayHeader
{
    border-bottom-color: #a4abb2;
}

/* </all-day-row> */

.RadScheduler_Defualt .rsContent,
.RadScheduler_Defualt .rsTopWrap .rsFooter
{
    border: 1px solid #a4abb2;
    border-top: 0;
}

.RadScheduler_Defualt .rsContentTable td
{
    border-color: #e8eaec #d0d7e5;
    border-bottom-style: dotted;
}

.RadScheduler_Defualt .rsContentTable .rsAlt td
{
    border-color: #d0d7e5;
    border-bottom-style: solid;
}

.RadScheduler_Defualt .rsMonthView .rsOtherMonth
{
    background-color: #f5f5f5;
}

/* <appointments> */
.RadScheduler_Defualt .rsApt .rsArrowTop,
.RadScheduler_Defualt .rsApt .rsArrowBottom,
.RadScheduler_Defualt .rsApt .rsArrowLeft,
.RadScheduler_Defualt .rsApt .rsArrowRight,
.RadScheduler_Defualt .rsApt .rsAptDelete,
.RadScheduler_Defualt .rsApt .rsAptResize,
.RadScheduler_Defualt .rsApt .rsAptReminder,
.RadScheduler_Defualt .rsApt .rsAptRecurrence,
.RadScheduler_Defualt .rsApt .rsAptRecurrenceException
{
    background-color: transparent;
    background-image: url('../Images/Calendar/rsSprites.png');
    background-repeat: no-repeat;
}

.RadScheduler_Defualt .rsApt .rsAptDelete
{
    width: 22px;
}

.RadScheduler_Defualt .rsAptCreate,
.RadScheduler_Defualt .rsMonthView .rsAptCreate
{
    background-color: #e8eaec;
    background-image: url('../Images/Calendar/rsSprites.png');
    background-repeat: repeat-x;
}

.RadScheduler_Defualt .rsAptCreateRow2,
.RadScheduler_Defualt .rsMonthView .rsAptCreateRow2
{
    background-color: #e8eaec;
    background-image: url('../Images/Calendar/rsSprites.png');
    background-repeat: repeat-x;
}

.RadScheduler_Defualt .rsNonWorkHour,
.RadScheduler_Defualt .rsSunCol,
.RadScheduler_Defualt .rsSatCol
{
    background-color: #f5fcff;
}

.RadScheduler_Defualt .rsAptCreateRow3,
.RadScheduler_Defualt .rsMonthView .rsAptCreateRow3,
.RadScheduler_Defualt .rsAptCreateRow4,
.RadScheduler_Defualt .rsMonthView .rsAptCreateRow4,
.RadScheduler_Defualt .rsAptCreateRow5,
.RadScheduler_Defualt .rsMonthView .rsAptCreateRow5
{
    background: #e8eaec;
}

.RadScheduler_Defualt .rsSelectedSlot,
.RadScheduler_Defualt .rsMonthView .rsSelectedSlot
{
    background: #4e4e4e;
    border-color: #efca86;
}

.RadScheduler_Defualt .rsContentTable td.rsAptCreate.rsSelectedSlot
{
    background: #efca86;
    border-color: #dfba76;
}

.RadScheduler_Defualt .rsContentTable td.rsSelectedSlot
{
    background: #4e4e4e;
    border-color: #efca86;
}

/* <New appointment imageless rendering */
.RadScheduler_Defualt .rsAptIn,
.RadScheduler_Defualt .rsAptMid,
.RadScheduler_Defualt .rsAptContent
{
    background-color: #e1e5e9;
    border-color: #a4abb2;
}

.RadScheduler_Defualt .rsAptIn
{
    background-color: #e8eff8;
}

.RadScheduler_Defualt .rsAptContent
{
    background-image: url('../Images/Calendar/rsAppointmentBg.png');
}
/* </New appointment imageless rendering> */

.RadScheduler_Defualt .rsAptSimple
{
    background-color: #e1e5e9;
    border-color: #a4abb2;
}

/* </appointments> */

/* <month view> */

.RadScheduler_Defualt .rsMonthView .rsDateBox
{
    background-color: #d0dbed;
    background-image: url('../Images/Calendar/rsSprites.png');
    border-bottom: 1px solid #81a5da;
}

.RadScheduler_Defualt .rsMonthView .rsAptCreate .rsDateBox
{
    border-bottom: 1px solid #f99331;
}

.RadScheduler_Defualt .rsMonthView .rsAptCreate
{
    background-image: none;
}

.RadScheduler_Defualt .rsMonthView .rsContentTable td
{
    border-color: #d0d7e5;
    border-style: solid;
}

/* </month view> */

/* <footer> */

.RadScheduler_Defualt div.rsFooter
{
    background-color: #f0fafd;
    background-image: url('../Images/Calendar/rsSprites.png');
    background-repeat: repeat-x;
    border-color: #a2a2a2;
}

.RadScheduler_Defualt div.rsFooter a
{
    color: #000000;
    background-color: transparent;
    background-image: url('../Images/Calendar/rsSprites.png');
    background-repeat: no-repeat;
}

.RadScheduler_Defualt div.rsFooter a:hover
{
    color: #000;
}

/* </footer> */

/* <inline edit form> */

.RadScheduler_Defualt .rsEditOptions a,
.RadScheduler_Defualt .rsAptEditResizeHandle,
.RadScheduler_Defualt .rsAptEditFormWrapper
{
    background-image: url('../Images/Calendar/rsSprites.png');
}

.RadScheduler_Defualt .rsAptEditFormOuter, /* top */
.RadScheduler_Defualt .rsAptEditFormInner  /* bottom */
{
    background-image: url('../Images/Calendar/rsInlineEditHSprite.png');
}

.RadScheduler_Defualt .rsAptEditFormMiddle, /* left */
.RadScheduler_Defualt .rsAptEditFormMiddle2 /* right */
{
    background-image: url('../Images/Calendar/rsInlineEditVSprite.png');
}

.RadScheduler_Defualt .rsAptEditFormWrapper .rsAptEditTextareaWrapper
{
    border-color: #9cb6c5;
    background: #fff;
}

.RadScheduler_Defualt .rsAptEditFormWrapper .rsAptEditTextareaWrapper textarea
{
    background: #fff;
}

/* <inline edit form template and edit background> */

.RadScheduler_Defualt .rsAptEditFormWrapper .rsTemplateWrapper,
.RadScheduler_Defualt .rsAptEditFormWrapper .rsEditOptions
{
    background: #dadcdf;
}

/* </inline edit form template and edit background> */

/* </inline edit form> */

/* <advanced edit form> */

.RadScheduler_Defualt .rsAdvancedEdit .rsAdvContentWrapper
{
    background: #fff;
    border: 1px solid #9ebfdb;
    border-top-color: #9BAFCA;
}

.RadScheduler_Defualt div.rsAdvancedModal div.rsAdvContentWrapper
{
    border-top: 0;
}

.RadScheduler_Defualt div.rsAdvancedModal .rsAdvButtonWrapper
{
    padding: 10px 10px 18px 0;
}

* html .RadScheduler_Defualt div.rsAdvancedModal .rsAdvButtonWrapper
{
    padding: 10px 10px 10px 0;
}

* html .RadScheduler_Defualt div.rsAdvancedModal div.rsAdvContentWrapper
{
    margin-top: -2px;
    background: #fff;
    border: 1px solid #9bafca;
}

/* <xref input skins> */

.RadScheduler_Defualt .rsAdvancedEdit .rsAdvInput,
.RadScheduler_Defualt .rsAdvancedEdit select,
.RadScheduler_Defualt .rsAdvancedEdit .textareaWrapper
{
    border-color: #abc1de;
}

.RadScheduler_Defualt .rsAdvancedEdit .rsInvalid textarea,
.RadScheduler_Defualt .rsAdvancedEdit .rsInvalid input,
.RadScheduler_Defualt .rsAdvancedEdit .rsAdvTimePicker .riEmpty
{
    background-image: url('Input/sprite.gif');
}

.RadScheduler_Defualt .rsAdvancedEdit .textareaWrapper
{
    background: #fff;
}

.RadScheduler_Defualt .rsAdvancedEdit .rsInvalid
{
    border-color: #F32800;
    color: #F32800;
}
/* </xref input skins> */

.RadScheduler_Defualt .rsAdvancedEdit h2,
.RadScheduler_Defualt .rsAdvancedEdit h3
{
    color: #6d8ebb;
}

.RadScheduler_Defualt .rsAdvancedEdit h2
{
    border-bottom: 1px solid #CCC;
}

.RadScheduler_Defualt .rsAdvancedEdit h2 span
{
    background: #fff;
}

.RadScheduler_Defualt .rsAdvancedEdit .rsAdvancedSubmitArea
{
    border-color: #CCC;
}

.RadScheduler_Defualt .rsAdvancedEdit div.rsAdvancedSubmitArea a
{
    color: #333;
    background-image: url('../Images/Calendar/rsSprites.png');
}

/* </advanced edit form> */

/* <date/time picker> */

.RadScheduler_Defualt .rsTimePick .RadInput_Defualt input.riEnabled,
.RadScheduler_Defualt .rsTimePick .RadInput_Defualt input.riHover,
.RadScheduler_Defualt .rsTimePick .RadInput_Defualt input.riFocused
{
    background-image: url('../Images/Calendar/rsSprites.png');
}

/* </date/time picker> */

/* <modal dialogs> */

.RadScheduler_Defualt .rsModalBgTopLeft,
.RadScheduler_Defualt .rsModalBgTopRight,
.RadScheduler_Defualt .rsModalBgBottomLeft,
.RadScheduler_Defualt .rsModalBgBottomRight
{
    background-image: url('../Images/Calendar/rsModalBg.png');
}

div.RadScheduler_Defualt .rsAnimating
{
    background-image: url('../Images/Calendar/rsModalBgIE6.png');
}

* html .RadScheduler_Defualt .rsModalBgTopLeft,
* html .RadScheduler_Defualt .rsModalBgTopRight,
* html .RadScheduler_Defualt .rsModalBgBottomLeft,
* html .RadScheduler_Defualt .rsModalBgBottomRight
{
    background-image: url('../Images/Calendar/rsModalBgIE6.png');
}

.RadScheduler_Defualt .rsAdvancedEdit .rsAdvTitle,
.RadScheduler_Defualt .rsAdvancedEdit .rsAdvInnerTitle
{
    background-image: url('../Images/Calendar/rsModalTitleBg.png');
}

.RadScheduler_Defualt .rsAdvancedEdit a.rsAdvEditClose,
.RadScheduler_Defualt div.rsModalWrapper .rsModalWindowClose
{
    background-image: url('../Images/Calendar/rsSprites.png');
    height:19px;
    margin-top:-26px;
    width:30px;
}
.RadScheduler_Defualt div.rsModalWrapper .rsModalWindowClose
{
    margin-top: -24px;
}

.RadScheduler_Defualt .rsAdvancedEdit a.rsAdvEditClose:hover,
.RadScheduler_Defualt .rsModalWrapper a.rsModalWindowClose:hover
{
    background-position: -78px -526px;
}

.RadScheduler_Defualt .rsModalWrapper .rsModalTitle
{
    color: #000;
    background-image: url('../Images/Calendar/rsSprites.png');
}

.RadScheduler_Defualt .rsModalWrapper .rsModalInner
{
    border-color: #a4abb2;
    background: #fff;
}

.RadScheduler_Defualt .rsModalWrapper .rsModalIcon,
.RadScheduler_Defualt .rsModalWrapper .rsModalButtons a
{
    background-image: url('../Images/Calendar/rsSprites.png');
}

/* Inline Edit buttons + ModalDialog buttons */
.RadScheduler_Defualt .rsModalWrapper .rsModalButtons a,
.RadScheduler_Defualt .rsTopWrap .rsAptEditFormWrapper .rsEditOptions a
{
    color: #333;
}

/* </modal dialogs> */

.RadScheduler_Defualt .rsBottomIndicator .rsOvertimeArrow
{
    background: transparent url('../Images/Calendar/rsSprites.png') no-repeat -180px -31px;
}

.RadScheduler_Defualt .rsTopIndicator .rsOvertimeArrow
{
    background: transparent url('../Images/Calendar/rsSprites.png') no-repeat -134px -31px;
}




.RadScheduler_Defualt .rsAptSelected .rsAptIn,
.RadScheduler_Defualt .rsAptSelected .rsAptMid,
.RadScheduler_Defualt .rsAptSelected .rsAptContent {
    border-color: #fcdb89;
    background-image: none;
}

[Ivana]

Hello Pooja,

Here is a simple CSS you can use to achieve the desired appearance:

.rsApt .rsAptIn .rsAptContent:hover
{
    background: Red;
}
.rsAptSelected .rsAptIn .rsAptContent
{
    background: Green;
}

(You could use the developer tool of your browser to learn more about the classes applied to the elements of the RadScheduler control.)

I hope this helps.

Greetings,
Ivana
the Telerik team