I have a radscheduler on my page. I want to adjust the height of the appointment. I played with the rowheight parameter and adaptiverowheight parameter but nothing seems to change.
<telerik:RadScheduler ID="radScheduler" runat="server" OnLoad="radScheduler_Load" SelectedView="MonthView"
DataKeyField="AppointmentID" DataSubjectField="AppointmentInformation" DataStartField="BeginningDayDate" DataEndField="EndingDayDate" Height="700px"
OnAppointmentCreated="radScheduler_AppointmentCreated" OnAppointmentInsert="radScheduler_AppointmentInsert" OnAppointmentUpdate="radScheduler_AppointmentUpdate"
OnAppointmentDelete="radScheduler_AppointmentDelete" Font-Bold="true" ShowHeader="true" OnClientAppointmentClick="OnClientAptClick"
OnClientAppointmentEditing="OnClientAptEditing"
OnAppointmentClick="radScheduler_AppointmentClick" AllowInsert="false" RowHeight="10px" AppointmentStyleMode="Default">
<MonthView HeaderDateFormat="MMMM yyyy" VisibleAppointmentsPerDay="30" AdaptiveRowHeight="false" />
Why is this not changing? What am i missing?If you need more info,please ask.Thanks. The telerik version is : 2013.1.417.40
EDIT: I got some of it working by modifying the css. But I ended up with not the desired result.Please see attached image. As you can see there are 3 appointments for 22nd Day. But there is space between them. I want them to be adjacent to each other. How do i do that?
6 Answers, 1 is accepted
Please have a look into the following sample code.
ASPX:
<
telerik:RadScheduler
OnClientAppointmentMoveEnd
=
"onAppointmentMoveEnd"
Font-Bold
=
"true"
SelectedView
=
"MonthView"
runat
=
"server"
ID
=
"schPlanning"
DataKeyField
=
"Libelle"
DataSubjectField
=
"SujetEvenement"
DataDescriptionField
=
"Libelle"
DataStartField
=
"Debut"
AllowInsert
=
"false"
DataEndField
=
"Fin"
Height
=
"700px"
ShowHeader
=
"true"
RowHeight
=
"40px"
AppointmentStyleMode
=
"Default"
>
<
MonthView
HeaderDateFormat
=
"MMMM yyyy"
VisibleAppointmentsPerDay
=
"30"
AdaptiveRowHeight
=
"false"
/>
</
telerik:RadScheduler
>
C#:
protected
void
Page_Load(
object
sender, EventArgs e)
{
Appointment meetingAppointment =
new
Appointment();
meetingAppointment.Subject =
"Subject1"
;
meetingAppointment.Start = DateTime.Now;
meetingAppointment.End = DateTime.Now;
schPlanning.InsertAppointment(meetingAppointment);
Appointment meetingAppointment1 =
new
Appointment();
meetingAppointment1.Subject =
"Subject2"
;
meetingAppointment1.Start = DateTime.Now;
meetingAppointment1.End = DateTime.Now;
schPlanning.InsertAppointment(meetingAppointment1);
Appointment meetingAppointment3 =
new
Appointment();
meetingAppointment3.Subject =
"Subject3"
;
meetingAppointment3.Start = DateTime.Now;
meetingAppointment3.End = DateTime.Now;
schPlanning.InsertAppointment(meetingAppointment3);
}
Please provide your full code if it doesn't help.
Thanks,
Shinu.
Hi Shinu,
I bind my radscheduler to a datatable that I populate by the result of a stored procedure. So, something like this
radScheduler.DataSource = dt 'Datatable filled by stored procedure
radScheduler.DataBind()
I modified the css by telerik and I overwrite it. My entire css is like this. I GET my desired result though. My question is without overwriting the css cannot I just bind the datatable to radscheduler and be done with it?
<style type="text/css">
.RadCalendar .rcMain {
border-style: dashed;
border-width: 0 1px 1px;
padding: 0;
}
.RadCalendar_Default .rcMainTable {
height: 650px !important;
width: 100% !important;
}
.RadCalendar_Default {
width: 100% !important;
}
.RadCalendar .rcRow TD {
border-color: black !important;
}
.rsMonthView .rsWrap {
height: 20px !important;
}
.rsMonthView .rsDateWrap {
height: 24px !important;
}
.rsMonthView .rsLastWrap {
height: 24px !important;
}
.rsMonthView .rsApt {
height: 48px !important;
}
.rsPrevDay {
/*visibility:hidden !important;*/
}
.rsNextDay {
/*visibility:hidden !important;*/
}
.rsToday {
visibility:hidden !important;
}
.rsDatePickerActivator {
visibility:hidden !important;
}
.rsHeader {
text-align:center !important;
font-weight:900 !important;
}
.RadScheduler .rsHeader h2 {
font-weight : bold !important;
}
.rsHeaderDay {
visibility:hidden !important;
}
.rsHeaderWeek {
/*visibility:hidden !important;*/
}
.rsSelected {
/*visibility:hidden !important;*/
}
.rsLast {
visibility:hidden !important;
}
.right {
position:absolute;
right:20px;
}
.rsAptContent {
height :16px !important;
}
.rsAptIn {
height:0px !important;
}
.rsAptMid {
height:0px !important;
}
.rsAptOut {
height:0px !important;
}
.radiobuttonlistRCR {
color:blue;
}
.radiobuttonlistDC {
color:maroon;
}
.rsAptEditSizingWrapper {
visibility:hidden !important;
}
</style>
The height of the appointments in RadScheduler does not depend on the databinding. It depends on the RowHeight propery and on the CSS property set. You can also customize the month view to show auto height of the appointments as it is described in this KB article.
Regards,
Plamen
Telerik
Sorry for the late reply. I got some other tasks. I tried your link for the KB article but the link doesn't exist anymore. But I found this link
http://www.telerik.com/support/kb/aspnet-ajax/scheduler/details/auto-expand-the-height-of-the-appointment-to-accomodate-the-entire-subject-in-month-view
When I used this and removed my css. So the css now in my page is the css in the above link. My page doesn't show up as desired. It shrunk to half its size and still the appointment subject was also not expanded. Its bizarre. My radscheduler is like this
<
br
><
telerik:RadScheduler
ID
=
"radScheduler"
runat
=
"server"
SelectedView
=
"MonthView"
<br> DataKeyField="AppointmentID" DataSubjectField="AppointmentInformation" DataStartField="BeginningDayDate" DataEndField="EndingDayDate" Height="1000px" <
br
> OnAppointmentUpdate="radScheduler_AppointmentUpdate" OnAppointmentDelete="radScheduler_AppointmentDelete" Font-Bold="true" ShowHeader="true" <
br
> OnClientAppointmentEditing="OnClientAptEditing" AllowEdit="true" AllowDelete="true" CustomAttributeNames="CompanyLocation,AppointmentInformation"<
br
> EnableCustomAttributeEditing="true" OnAppointmentClick="radScheduler_AppointmentClick" AllowInsert="false" RowHeight="70px" AppointmentStyleMode="Default" OnClientAppointmentMoving="ClientMovingApt"<
br
> DisplayDeleteConfirmation="false" OnNavigationComplete="radScheduler_NavigationComplete" OnAppointmentContextMenuItemClicked="radScheduler_AppointmentContextMenuItemClicked" OnClientAppointmentMoveEnd="OnClientAppointmentMoving" ><
br
> <
TimeSlotContextMenuSettings
EnableDefault
=
"true"
/>
Please take a look at it and let me know what changes I need to make. Take a look at the attached image.
<
MonthView
HeaderDateFormat
=
"MMMM yyyy"
VisibleAppointmentsPerDay
=
"30"
AdaptiveRowHeight
=
"true"
><
br
> <
br
> </
MonthView
>
Yes indeed the solution in the KB is possible only when AdaptiveRowHeight="false". In cases when AdaptiveRowHeight="true" the only way to control the height of the appointments is by setting a larger general height of the RowHeight property of RadScheduler.
Hope this information will be helpful.
Regards,
Plamen
Telerik