Calendar not displaying specail day correctly

[Jerry]

I'm trying to create a calendar that isn't clickable but displays special days to my users.  It will need to cover multiple years.  With the code below it shows my april special day but doesn't show the may one.  Also how can I have the cells have equal sizes?  Also where are these classes located that are added as part of the control?

<telerik:RadCalendar ID="RadCalendar1" runat="server"
      ShowOtherMonthsDays="False" Skin="Outlook" CellAlign="NotSet"
      CellVAlign="NotSet" EnableMultiSelect="False" ShowRowHeaders="False"
      TitleAlign="Center" UseColumnHeadersAsSelectors="False"
      UseRowHeadersAsSelectors="False" DayNameFormat="Short"
      EnableMonthYearFastNavigation="False">
<DayOverStyle CssClass="rcHover"></DayOverStyle>

<FastNavigationStyle CssClass="RadCalendarMonthView RadCalendarMonthView_Outlook"></FastNavigationStyle>

<DisabledDayStyle CssClass="rcDisabled"></DisabledDayStyle>

<WeekendDayStyle CssClass="rcWeekend"></WeekendDayStyle>

<ViewSelectorStyle CssClass="rcViewSel"></ViewSelectorStyle>

<SelectedDayStyle CssClass="rcSelected"></SelectedDayStyle>

<CalendarTableStyle CssClass="rcMainTable" BackColor="#DDEEFF" Height="400px"
        HorizontalAlign="Left" Width="600px"></CalendarTableStyle>

<OtherMonthDayStyle CssClass="rcOtherMonth"></OtherMonthDayStyle>

<OutOfRangeDayStyle CssClass="rcOutOfRange"></OutOfRangeDayStyle>

<SpecialDays>
  <telerik:RadCalendarDay Date="2012/04/21" TemplateID="DateTemplate" />
  <telerik:RadCalendarDay Date="2012/05/22" TemplateID="DateTemplate2" />
</SpecialDays>
<CalendarDayTemplates>
  <telerik:DayTemplate ID="DateTemplate" runat="server">
    <Content>
      <div class="rcTemplate rcDayDate">
        Collection
      </div>
    </Content>
  </telerik:DayTemplate>

  <telerik:DayTemplate ID="DateTemplate2" runat="server">
    <Content>
      <div class="rcTemplate rcDayDate">
        Collection 2
      </div>
    </Content>
  </telerik:DayTemplate>
</CalendarDayTemplates>
    </telerik:RadCalendar>

Thank you

[Jerry]

Does anyone see an issue with my code?  I really need to get this calendar working and I can't see why my second date isn't showing up.

[Richard]

Jerry:

In order to have your second template applied to your May date, you need to set AutoPostBack="true" for your Calendar instance.

<telerik:RadCalendar AutoPostBack="true" ID="RadCalendar1" runat="server" ShowOtherMonthsDays="False"
    Skin="Outlook" CellAlign="NotSet" CellVAlign="NotSet" EnableMultiSelect="False"
    ShowRowHeaders="False" TitleAlign="Center" UseColumnHeadersAsSelectors="False"
    UseRowHeadersAsSelectors="False" DayNameFormat="Short" EnableMonthYearFastNavigation="False">

You should refer to the Understanding the HTML Output and CSS Styling documentation page to get insights on how to define the appearance of your calendar including special day cells.

I hope this helps!

[Jerry]

jumpstart,

Thank you for your reply it helped.  I still havea question though. 

I created a special day but I can't get the entire background to change colors for that special day.  Only a small portion of the cell changes colors.  How can I get the full cell to change colors?

<telerik:RadCalendar ID="RadCalendar1" runat="server" EnableMultiSelect="False"
SelectedDate="" ViewSelectorText="x" CellAlign="Left" CellVAlign="Bottom"
DayNameFormat="Short" EnableViewState="False" Height="400px"
ShowOtherMonthsDays="False" ShowRowHeaders="False" Skin="Office2007"
UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False"
Width="600px" AutoPostBack="True">
<DayOverStyle CssClass="rcHover"></DayOverStyle>
<FastNavigationStyle CssClass="RadCalendarMonthView RadCalendarMonthView_Office2007"></FastNavigationStyle>
<DisabledDayStyle CssClass="rcDisabled"></DisabledDayStyle>
<WeekendDayStyle CssClass="rcWeekend" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" HorizontalAlign="Center" Width="70px"></WeekendDayStyle>
<ViewSelectorStyle CssClass="rcViewSel"></ViewSelectorStyle>
<SelectedDayStyle CssClass="rcSelected"></SelectedDayStyle>
<SpecialDays>
  <telerik:RadCalendarDay Date="04/25/2012" Repeatable="None" TemplateID="CollectTemplate" />
</SpecialDays>
<DayStyle BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" HorizontalAlign="Left" VerticalAlign="Bottom" Width="70px" Wrap="True" />
<CalendarDayTemplates>
  <telerik:DayTemplate ID="CollectTemplate" runat="server">
    <Content>
      <div align="center" style="background-color:Aqua;>
        Collect
      </div>
    </Content>
  </telerik:DayTemplate>
</CalendarDayTemplates>
<CalendarTableStyle CssClass="rcMainTable"></CalendarTableStyle>
<OtherMonthDayStyle CssClass="rcOtherMonth"></OtherMonthDayStyle>
<OutOfRangeDayStyle CssClass="rcOutOfRange"></OutOfRangeDayStyle>
</telerik:RadCalendar>

Thank you so much for your help. 

[Andrey]

Hello,

The problem comes from the height of the calendar that you set declaratively in the mark-up. In order to achieve your goal you need to remove this height and set it through CSS to all td elements in RadCalendar with the following classes:

.Special
        {
            background-color: Aqua;
        }

        .Special,
        table.RadCalendar .rcRow td
        {
            height:80px;
        }

        table.RadCalendar .rcRow td.rcOtherMonth
        {
            height:0;
            line-height: 1px;
        }

and RadCalendar declaration:

<telerik:RadCalendar ID="RadCalendar1" runat="server" EnableMultiSelect="False" SelectedDate=""
            ViewSelectorText="x" CellAlign="Left" CellVAlign="Bottom" DayNameFormat="Short"
            EnableViewState="False" ShowOtherMonthsDays="False" ShowRowHeaders="False"
            Skin="Office2007" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False"
            Width="600px" AutoPostBack="True">
            <DayOverStyle CssClass="rcHover"></DayOverStyle>
            <FastNavigationStyle CssClass="RadCalendarMonthView RadCalendarMonthView_Office2007">
            </FastNavigationStyle>
            <DisabledDayStyle CssClass="rcDisabled"></DisabledDayStyle>
            <WeekendDayStyle CssClass="rcWeekend" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"
                HorizontalAlign="Center" Width="70px"></WeekendDayStyle>
            <ViewSelectorStyle CssClass="rcViewSel"></ViewSelectorStyle>
            <SelectedDayStyle CssClass="rcSelected"></SelectedDayStyle>
            <SpecialDays>
                <telerik:RadCalendarDay Date="04/25/2012" Repeatable="None" TemplateID="CollectTemplate"/>
            </SpecialDays>
            <DayStyle BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" HorizontalAlign="Left"
                VerticalAlign="Bottom" Width="70px" Wrap="True" />
            <CalendarDayTemplates>
                <telerik:DayTemplate ID="CollectTemplate" runat="server">
                    <Content>
                        <div align="center" class="Special">
                            Collect
                        </div>
                    </Content>
                </telerik:DayTemplate>
            </CalendarDayTemplates>
            <CalendarTableStyle CssClass="rcMainTable"></CalendarTableStyle>
            <OtherMonthDayStyle CssClass="rcOtherMonth"></OtherMonthDayStyle>
            <OutOfRangeDayStyle CssClass="rcOutOfRange"></OutOfRangeDayStyle>
        </telerik:RadCalendar>

Give these suggestions a try and check whether this is the desired behavior.

All the best,
Andrey
the Telerik team

[Jerry]

Audrey,

Thank you for your suggestions.  That worked. 

I still having a problem with vertically aligning the text I want to display.  What is the best way to do that?

How can I make the calendar none selectable?  I don't want the hover color to change or to have the user select a cell and have the select color change.  My goal is to have a calendar that is visible and the user can change months to see what special dates are coming up but I don't want them to select anything within the calendar excet to change months.

Thank you so much for all of your help.

[Richard]

Jerry:

You can reference the Calendar/Read-Only Calendar online demo for insights in making your calendar not clickable. Basically, it's a single property setting for you:

<telerik:RadCalendar PresentationType="Preview" AutoPostBack="true" ID="RadCalendar1" runat="server" >

Please explain better which text needs vertical alignment. Perhaps include a screenshot?

Cheers!

[Jerry]

Thank you so much for the help.

That worked prefectly.

I got around the issue with the vertical align but using a <br /> in my content area of my daytemplate.

<telerik:DayTemplate ID="CollectTemplate" runat="server">
   <Content>
     <div align="center" class="Special_collection">
       <br />Collection
     </div>
   </Content>
</telerik:DayTemplate>

I'm sure it's a simple change in the css but I couldn't find a way to do it.

Thank you again.

[Andrey]

Hello,

You could use the following CSS class to achieve your goal:

table.RadCalendar_Office2007 .rcRow .rcHover,
table.RadCalendar_Office2007 .rcRow .rcHover a,
table.RadCalendar_Office2007 .rcRow .rcSelected,
table.RadCalendar_Office2007 .rcRow .rcSelected a
{
    background: none;
    border-color: #000;
}

Give this approach a try and check whether the issue is resolved.
Kind regards,
Andrey
the Telerik team

[Jerry]

Audrey,

What was that css code suppose to fix?

I added it to my css and refreshed my page and nothing changed. 

Thank you

[Andrey]

Hello,

The CSS code was intended to fix the vertical align issue you have shared. I have tested the code before sending it to you.

Could you share your implementation?
All the best,
Andrey
the Telerik team