Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Appointment must be bind perfectly in the date box without spacing

1 Answer 70 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Janni
Top achievements
Rank 1
Janni asked on 17 Sep 2010, 09:46 AM
appointment-toppading.JPG
Hi Team,

I've implemented the scheduler, where the appointment will be collect from the Database and binds.
In the month view, I'm getting the space(image 1 attached)before the appointment.
It looks something unfit to the date box.
I tried by padding-top and margin-top but nothing is reflected.
My resultant scheduler must like image 2(image attached).
I've attached the image for our preview also pasted the Scheduler.css file here.
Please help me and get me a solution.
Awaiting for your quick reply.

Scheduler.css
--------------

/* RadScheduler Web20 skin */
 
/* common */
.RadScheduler_Web20, .RadScheduler_Web20 a, .RadScheduler_Web20 input, .RadScheduler_Web20 select, .RadScheduler_Web20 textarea
{
    color: #333;
    font: normal 12px/14px "Segoe UI" , Arial, sans-serif;
}
 
.RadScheduler_Web20 textarea
{
    background: #fff;
}
/* header */
 
/* header sprites */
.RadScheduler_Web20 .rsHeader, .RadScheduler_Web20 .rsHeader .rsDatePickerActivator, .RadScheduler_Web20 .rsHeader .rsPrevDay, .RadScheduler_Web20 .rsHeader .rsNextDay
{
    background-image: url('Scheduler/rsSprites.png');
}
 
.RadScheduler_Web20 .rsHeader
{
    border: 1px solid #243567;
}
 
.RadScheduler_Web20 .rsHeader, .RadScheduler_Web20 .rsHeader a
{
    color: #fff;
}
 
.RadScheduler_Web20 .rsHeader a:hover, .RadScheduler_Web20 .rsHeader em
{
    color: #000;
}
 
.RadScheduler_Web20 .rsHeader .rsToday:hover
{
    color: #CCC;
}
 
/* content */
 
.RadScheduler_Web20 .rsContent
{
    background: #fff;
}
 
/* <headers> */
 
.RadScheduler_Web20 .rsHorizontalHeaderTable
{
    color: #fff;
    background: #e4e4e4;
}
 
.RadScheduler_Web20 .rsHorizontalHeaderWrapper
{
    border-color: #a4b7d0;
    background: #dce5f3;
}
 
.RadScheduler_Web20 .rsSpacerCell, .RadScheduler_Web20 .rsAllDayHeader, .RadScheduler_Web20 .rsVerticalHeaderWrapper, .RadScheduler_Web20 .rsVerticalHeaderTable
{
    padding-top : 30px !important;
    background: #dce5f3;
}
 
.RadScheduler_Web20 .rsVerticalHeaderTable th
{
    border-color: #868686 #a2b3c7;
    color: #45709b;
}
 
.RadScheduler_Web20 .rsHorizontalHeaderTable th
{
    border-color: #a4b7d0;
    background-color: #C3D9F1;
    background-image: url('Scheduler/rsSprites.png');
}
 
.RadScheduler_Web20 .rsVerticalHeaderTable th
{
    border-color: transparent #a2b3c7;
    border-top: 0;
}
 
.RadScheduler_Web20 .rsVerticalHeaderTable .rsAlt th
{
    border-color: #a4b7d0 #a2b3c7;
}
 
/* </headers> */
 
/* <all-day-row> */
 
.RadScheduler_Web20 .rsAllDayRow
{
    background: #dce5f3;
}
 
.RadScheduler_Web20 .rsSpacerCell, .RadScheduler_Web20 .rsAllDayHeader, .RadScheduler_Web20 .rsVerticalHeaderTable .rsAllDayHeader
{
    color: #45709b;
    border-color: #a4b7d0 #a2b3c7;
}
 
.RadScheduler_Web20 .rsAllDayRow td, .RadScheduler_Web20 .rsContentTable .rsAllDayRow td
{
    border-color: #a4b7d0;
    border-style: solid;
}
 
.RadScheduler_Web20 .rsVerticalHeaderTable .rsMainHeader th
{
    border-bottom-color: #a4b7d0;
}
 
.RadScheduler_Web20 .rsSpacerCell, .RadScheduler_Web20 .rsContent .rsAllDayHeader
{
    border-bottom-color: #a4b7d0;
}
 
/* </all-day-row> */
 
.RadScheduler_Web20 .rsContent, .RadScheduler_Web20 .rsTopWrap .rsFooter
{
    border: 1px solid #6788be;
    border-top: 0;
}
 
.RadScheduler_Web20 .rsContentTable td
{
    border-color: #e6eef8;
    border-bottom-style: dotted;
}
 
.RadScheduler_Web20 .rsContentTable .rsAlt td
{
    border-color: #a4b7d0 #e6eef8;
    border-bottom-style: solid;
}
 
.RadScheduler_Web20 .rsMonthView .rsOtherMonth
{
    background-color: #F9F9F9;
}
 
/* <appointments> */
.RadScheduler_Web20 .rsApt .rsArrowTop, .RadScheduler_Web20 .rsApt .rsArrowBottom, .RadScheduler_Web20 .rsApt .rsArrowLeft, .RadScheduler_Web20 .rsApt .rsArrowRight, .RadScheduler_Web20 .rsApt .rsAptDelete, .RadScheduler_Web20 .rsApt .rsAptResize, .RadScheduler_Web20 .rsApt .rsAptRecurrence, .RadScheduler_Web20 .rsApt .rsAptRecurrenceException
{
    background-color: transparent;
    background-image: url('Scheduler/rsSprites.png');
    background-repeat: no-repeat;
}
 
.RadScheduler_Web20 .rsApt .rsAptDelete
{
    width: 22px;
}
 
.RadScheduler_Web20 .rsAptCreate, .RadScheduler_Web20 .rsMonthView .rsAptCreate
{
    background-color: #ccdcf1;
    background-image: url('Scheduler/rsSprites.png');
    background-repeat: repeat-x;
}
 
.RadScheduler_Web20 .rsAptCreateRow2, .RadScheduler_Web20 .rsMonthView .rsAptCreateRow2
{
    background-color: #ccdcf1;
    background-image: url('Scheduler/rsSprites.png');
    background-repeat: repeat-x;
}
 
.RadScheduler_Web20 .rsSunCol, .RadScheduler_Web20 .rsSatCol
{
    background-color: #f5fcff;
}
 
.RadScheduler_Web20 .rsAptCreateRow3, .RadScheduler_Web20 .rsMonthView .rsAptCreateRow3, .RadScheduler_Web20 .rsAptCreateRow4, .RadScheduler_Web20 .rsMonthView .rsAptCreateRow4, .RadScheduler_Web20 .rsAptCreateRow5, .RadScheduler_Web20 .rsMonthView .rsAptCreateRow5
{
    background: #ccdcf1;
}
 
.RadScheduler_Web20 .rsAptContent, .RadScheduler_Web20 .rsAptIn, .RadScheduler_Web20 .rsAptMid, .RadScheduler_Web20 .rsAptOut
{
    background-image: url('Scheduler/rsAppointmentBg.png'); /*height : auto !important ;*/  
}
/* Added by Daniel for increasing the Month View Height only without affecting other types*/
.RadScheduler_Web20 .rsMonthView .rsAptContent, .RadScheduler_Web20 .rsMonthView .rsAptIn, .RadScheduler_Web20 .rsMonthView .rsAptMid, .RadScheduler_Web20 .rsMonthView .rsAptOut
{
    height: auto !important;
}
/* Added by Daniel for increasing the Timeline View Height only without affecting other types*/
.RadScheduler_Web20 .rsTimelineView .rsAptContent, .RadScheduler_Web20 .rsTimelineView .rsAptIn, .RadScheduler_Web20 .rsTimelineView .rsAptMid, .RadScheduler_Web20 .rsTimelineView .rsAptOut
{
    height: auto !important;
}
/* </appointments> */
 
/* <month view> */
 
.RadScheduler_Web20 .rsMonthView .rsDateBox
{ 
    background-color: #d0dbed;
    background-image: url('Scheduler/rsSprites.png');
    border-bottom: 1px solid #81a5da;
      
}
 
.RadScheduler_Web20 .rsMonthView .rsAptCreate .rsDateBox
{    
    border-bottom: 1px solid #4D9E1F;
}
 
.RadScheduler_Web20 .rsMonthView .rsAptCreate
{
    background-image: none;
}
 
.RadScheduler_Web20 .rsWrap
{
    height: auto !important;
}
/* Added by Daniel for increasing the Month and Timeline View of Content Height only without affecting other types*/
.RadScheduler_Web20 .rsMonthView .rsWrap
{
    min-height: 100px !important;
}
.RadScheduler_Web20 .rsMonthView.div.rsWrap
{
    
    min-height: 100px !important;
}
.RadScheduler_Web20 .rsTimelineView .rsWrap
{
    min-height: 90px !important;
}
/* </month view> */
 
/* <footer> */
 
.RadScheduler_Web20 .rsMonthView .rsRow
{   
    height: auto !important;
}
 
.RadScheduler_Web20 div.rsFooter
{
    background-color: #f0fafd;
    background-image: url('Scheduler/rsSprites.png');
    background-repeat: repeat-x;
    border-color: #a2a2a2;
}
 
.RadScheduler_Web20 div.rsFooter .rsFullTime
{
    color: #000;
    background-position: 0 -248px;
    padding: 3px 0 4px 17px;
    background-color: transparent;
    background-image: url('Scheduler/rsSprites.png');
    background-repeat: no-repeat;
}
 
.RadScheduler_Web20 div.rsFooter .rsFullTime:hover
{
    color: #333;
    background-position: 0 -271px;
}
 
/* </footer> */
 
/* <inline edit form> */
 
.RadScheduler_Web20 .rsAptEditResizeHandle, .RadScheduler_Web20 .rsAptEditFormWrapper
{
    background-image: url('Scheduler/rsSprites.png');
}
 
.RadScheduler_Web20 .rsAptEditFormOuter, /* top */ .RadScheduler_Web20 .rsAptEditFormInner /* bottom */
{
    background-image: url('Scheduler/rsInlineEditHSprite.png');
}
 
.RadScheduler_Web20 .rsAptEditFormMiddle, /* left */ .RadScheduler_Web20 .rsAptEditFormMiddle2 /* right */
{
    background-image: url('Scheduler/rsInlineEditVSprite.png');
}
 
.RadScheduler_Web20 .rsAptEditFormWrapper .rsAptEditTextareaWrapper
{
    border-color: #bcd2f1;
    background: #fff;
}
 
.RadScheduler_Web20 .rsAptEditFormWrapper .rsAptEditTextareaWrapper textarea
{
    background: #fff;
}
 
/* <inline edit form template and edit background> */
 
.RadScheduler_Web20 .rsAptEditFormWrapper .rsTemplateWrapper, .RadScheduler_Web20 .rsAptEditFormWrapper .rsEditOptions
{
    background: #e7f1ff;
}
 
/* </inline edit form template and edit background> */
 
/* </inline edit form> */
 
/* <advanced edit form> */
 
.RadScheduler_Web20 .rsAdvancedEdit .rsAdvContentWrapper
{
    background: #fff;
    border: 1px solid #6788be;
    border-top-color: #47689e;
}
 
/* <xref input skins> */
 
.RadScheduler_Web20 .rsAdvancedEdit .rsAdvInput, .RadScheduler_Web20 .rsAdvancedEdit select, .RadScheduler_Web20 .rsAdvancedEdit .textareaWrapper
{
    border-color: #6788be;
}
 
.RadScheduler_Web20 .rsAdvancedEdit .rsInvalid textarea
{
    background-image: url('Input/sprite.gif');
}
 
.RadScheduler_Web20 .rsAdvancedEdit .textareaWrapper
{
    background: #fff;
}
 
.RadScheduler_Web20 .rsAdvancedEdit .rsInvalid
{
    border-color: #F32800;
    color: #F32800;
}
/* </xref input skins> */
 
.RadScheduler_Web20 .rsAdvancedEdit h2, .RadScheduler_Web20 .rsAdvancedEdit h3
{
    color: #5e83a8;
}
 
.RadScheduler_Web20 .rsAdvancedEdit h2
{
    border-bottom: 1px solid #CCC;
}
 
.RadScheduler_Web20 .rsAdvancedEdit h2 span
{
    background: #fff;
}
 
.RadScheduler_Web20 .rsAdvancedEdit .rsAdvRecurrenceFreq
{
    border-right: 1px solid #fff;
}
 
.RadScheduler_Web20 .rsAdvancedEdit ul.rsRecurrenceOptionList /* ??? */
{
    border-right: 1px solid #CCC;
}
 
.RadScheduler_Web20 .rsAdvancedEdit div.rsAdvPatternPanel
{
    border-left: 0;
}
 
.RadScheduler_Web20 .rsAdvancedEdit .rsAdvancedSubmitArea
{
    border-color: #CCC;
}
 
/* </advanced edit form> */
 
/* <date/time picker> */
 
.RadScheduler_Web20 .rsAdvancedEdit .rsAdvEditClose, .RadScheduler_Web20 .rsTimePick .RadInput_Web20 input.riEnabled, .RadScheduler_Web20 .rsTimePick .RadInput_Web20 input.riHover, .RadScheduler_Web20 .rsTimePick .RadInput_Web20 input.riFocused, .RadScheduler_Web20 .rsTimePick .RadInput_Web20 input.riEmpty
{
    background-image: url('Scheduler/rsSprites.png');
}
 
/* </date/time picker> */
 
/* <modal dialogs> */
 
.RadScheduler_Web20 .rsAdvancedEdit .rsAdvTitle, .RadScheduler_Web20 .rsModalWrapper .rsModalOuter
{
    border-color: #416094;
    background-image: url('Scheduler/rsModalOuterBg.png');
}
 
.RadScheduler_Web20 .rsAdvancedEdit .rsAdvInnerTitle, .RadScheduler_Web20 .rsModalWrapper .rsModalOuterTitle
{
    background-image: url('Scheduler/rsModalOuterTitleBg.png');
}
 
.RadScheduler_Web20 .rsAdvancedEdit .rsAdvInnerTitle
{
    color: #FFF;
}
 
.RadScheduler_Web20 div.rsModalWrapper .rsModalWindowClose
{
    background-image: url('Scheduler/rsSprites.png');
    height: 19px;
    margin-top: -24px;
    width: 31px;
    opacity: 0.8;
    -moz-opacity: 0.8;
    filter: alpha(opacity=80);
}
 
.RadScheduler_Web20 .rsModalWrapper .rsModalWindowClose:hover
{
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
}
 
 
.RadScheduler_Web20 .rsModalWrapper .rsModalTitle
{
    color: #fff;
    background-image: url('Scheduler/rsSprites.png');
}
 
.RadScheduler_Web20 .rsModalWrapper .rsModalInner
{
    border-color: #6788be;
    background: #fff;
}
 
.RadScheduler_Web20 .rsModalWrapper .rsModalIcon
{
    background-image: url('Scheduler/rsSprites.png');
}
 
/* Inline Edit buttons + ModalDialog buttons */
.RadScheduler_Web20 .rsModalWrapper .rsModalButtons a, .RadScheduler_Web20 .rsAdvancedEdit div.rsAdvancedSubmitArea a, .RadScheduler_Web20 .rsTopWrap .rsAptEditFormWrapper .rsEditOptions a
{
    color: #FFF;
    background-image: url('Scheduler/rsSprites.png');
}
 
.RadScheduler_Web20 .rsModalWrapper .rsModalButtons a:hover, .RadScheduler_Web20 .rsAdvancedEdit div.rsAdvancedSubmitArea a:hover, .RadScheduler_Web20 .rsTopWrap .rsAptEditFormWrapper .rsEditOptions a:hover
{
    color: #0f3789;
}
 
/* </modal dialogs> */


Thanks,
Daniel.B

1 Answer, 1 is accepted

Sort by
0
Peter
Telerik team
answered on 22 Sep 2010, 01:20 PM
Hello Janni,

Please, add the following css rule to your page:

.rsDateWrap
      {
           height: 15px !important;   
       }


Greetings,
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
Tags
Scheduler
Asked by
Janni
Top achievements
Rank 1
Answers by
Peter
Telerik team
Share this question
or