Appointments mouse hover and select styles

5 posts, 0 answers
  1. Pooja
    Pooja avatar
    55 posts
    Member since:
    Feb 2011

    Posted 18 Jan 2012 Link to this post

    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.

  2.
  3. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Jan 2012 Link to this post

    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.
  5. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 20 Jan 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  7. Pooja
    Pooja avatar
    55 posts
    Member since:
    Feb 2011

    Posted 27 Jan 2012 Link to this post

    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;
    }
  8.
  9. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 30 Jan 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top