Calendar not displaying specail day correctly

11 posts, 0 answers
  1. Jerry
    Jerry avatar
    33 posts
    Member since:
    Oct 2008

    Posted 20 Apr 2012 Link to this post

    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
  2. Jerry
    Jerry avatar
    33 posts
    Member since:
    Oct 2008

    Posted 23 Apr 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 24 Apr 2012 Link to this post

    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!
  5. Jerry
    Jerry avatar
    33 posts
    Member since:
    Oct 2008

    Posted 24 Apr 2012 Link to this post

    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. 
  6. Andrey
    Admin
    Andrey avatar
    836 posts

    Posted 25 Apr 2012 Link to this post

    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
    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. Jerry
    Jerry avatar
    41 posts
    Member since:
    Mar 2012

    Posted 26 Apr 2012 Link to this post

    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.
  8. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 26 Apr 2012 Link to this post

    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!
  9. Jerry
    Jerry avatar
    41 posts
    Member since:
    Mar 2012

    Posted 26 Apr 2012 Link to this post

    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.
  10. Andrey
    Admin
    Andrey avatar
    836 posts

    Posted 27 Apr 2012 Link to this post

    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
    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.
  11. Jerry
    Jerry avatar
    41 posts
    Member since:
    Mar 2012

    Posted 30 Apr 2012 Link to this post

    Audrey,

    What was that css code suppose to fix?

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

    Thank you
  12. Andrey
    Admin
    Andrey avatar
    836 posts

    Posted 02 May 2012 Link to this post

    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
    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
UI for ASP.NET Ajax is Ready for VS 2017