ItemStyle

15 posts, 0 answers
  1. Terje
    Terje avatar
    9 posts
    Member since:
    Feb 2011

    Posted 25 Jun 2014 Link to this post

    Hi,
    I am trying to visualize the fact that some dates are unavailable. I first tried to do this in Calendar_DayRender, but I was only able to disable the dates, not colorize them.

    I then tried Calendar_PreRender, and added all unavailable dates (with formatting) into the calendars SpecialDays. What happened then was
    1. still only disabled, no color.
    2. when I go to next month, the backcolor appears. it then stays, and works ok.
    3. ForeColor is never set. It seems that <span> overrides the styling. css for span is set by Telerik.

    Any suggestions on how to fix this?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 25 Jun 2014 in reply to Terje Link to this post

    Hi Terje ,

    In order to change the background color of RadCalendar from code behind please try the following C# code snippet.

    C#:
    protected void rcalendarDemo_PreRender(object sender, EventArgs e)
    {
        rcalendarDemo.CalendarTableStyle.BackColor = System.Drawing.Color.SeaGreen;
    }

    To change the ForeColor as a workaround please try the below CSS.

    CSS:
    .RadCalendar .rcRow a
    {
        color : Red !important;
    }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Terje
    Terje avatar
    9 posts
    Member since:
    Feb 2011

    Posted 25 Jun 2014 in reply to Shinu Link to this post

    Hi Shinu,

    Thank you for your reply.

    My problem is that I want to change the colours on some dates, not the whole calendar.

    Here is my code:
    01.protected void Calendar_PreRender(object sender, EventArgs e)
    02.{
    03.    if (_blockings == null && _bookings == null) return;
    04.    var cal = (RadCalendar) sender;
    05.    cal.CalendarTableStyle.BackColor = Color.SeaGreen;
    06.    cal.SpecialDays.Clear();
    07.    cal.SpecialDays.AddRange(BlockedDates());
    08.    cal.SpecialDays.AddRange(BookedDates());
    09.}
    10. 
    11.private RadCalendarDay[] BlockedDates()
    12.{
    13.     
    14.    var cal = new List<RadCalendarDay>();
    15.    foreach (var blocked in _blockings)
    16.    {
    17.        if (blocked.From_date == null || blocked.To_date == null) continue;
    18.        for (var day = blocked.From_date.Value; day < blocked.To_date.Value; day = day.AddDays(1))
    19.        {
    20.            cal.Add(FormatDate(day, Color.DarkOrange, Color.White));
    21.        }
    22.    }
    23.    var days = cal.ToArray();
    24.    return days;
    25.         
    26.}
    27. 
    28.private RadCalendarDay[] BookedDates()
    29.{
    30.    var cal = new List<RadCalendarDay>();
    31.    foreach (var booking in _bookings)
    32.    {
    33.        if (booking.From_date == null || booking.To_date == null) continue;
    34.        for (var day = booking.From_date.Value; day < booking.To_date.Value; day = day.AddDays(1))
    35.        {
    36.            cal.Add(FormatDate(day, Color.DarkRed, Color.White));
    37.        }
    38.    }
    39.    var days = cal.ToArray();
    40.    return days;
    41.}
    42. 
    43.private RadCalendarDay FormatDate(DateTime day, Color backColor, Color foreColor)
    44.{
    45.            var calDay = new RadCalendarDay {Date = day, IsSelectable = false, IsDisabled = true};
    46.            calDay.ItemStyle.BackColor = backColor;
    47.            calDay.ItemStyle.ForeColor = foreColor;
    48.    return calDay;
    49.}

  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 26 Jun 2014 in reply to Terje Link to this post

    Hi Terje,

    The best approach for adding days to the SpecialDays collection is on Page_Load event. Please have a look into the below code snippet which works fine at my end.

    C#:
    public DateTime[] specialDates = { DateTime.Now, DateTime.Now.AddDays(-2), DateTime.Now.AddDays(2) };
    protected void Page_Load(object sender, EventArgs e)
    {
        List<RadCalendarDay> myDays = new List<RadCalendarDay>();
        foreach (DateTime date in specialDates)
        {
            RadCalendarDay oneDay = new RadCalendarDay();
            oneDay.Date = date;
            oneDay.ItemStyle.CssClass = "special-days";
            myDays.Add(oneDay);
        }
        rcalendarDemo.SpecialDays.AddRange(myDays.ToArray());
    }

    CSS:
    .special-days a
    {
        color: Red !important;
        background-color: Black !important;
    }

    Thanks,
    Shinu.
  6. Terje
    Terje avatar
    9 posts
    Member since:
    Feb 2011

    Posted 26 Jun 2014 Link to this post

    Hi again, and thank you for trying :)

    If you try to combine your answers, then you will see my dilemma. I am not able to put colours to a disabled date. I would also like to be able to have different colours for different meanings. Ex (red for occupied, orange for blocked, gray for unavailable).

    Thanks,

    Terje K.
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 26 Jun 2014 in reply to Terje Link to this post

    Hi Terje,

    Please have a look into the below code snippet to style the disabled day in a RadCalendar.

    ASPX:
    <telerik:RadCalendar ID="rcalendarDemo" runat="server">
        <DisabledDayStyle CssClass="blocked" />
    </telerik:RadCalendar>

    C#:
    public DateTime[] blocked = {  DateTime.Now.AddDays(-3), DateTime.Now.AddDays(3) };
    protected void Page_Load(object sender, EventArgs e)
    {
        List<RadCalendarDay> blockedDates = new List<RadCalendarDay>();
        foreach (DateTime date in blocked)
        {
            RadCalendarDay oneDay = new RadCalendarDay();
            oneDay.Date = date;
            oneDay.IsDisabled = true;
            blockedDates.Add(oneDay);
        }
        rcalendarDemo.SpecialDays.AddRange(blockedDates.ToArray());     
    }

    CSS:
    .blocked a
    {
        color: Orange !important;
    }

    Hope this will helps you.
    Thanks,
    Shinu.
  8. Terje
    Terje avatar
    9 posts
    Member since:
    Feb 2011

    Posted 27 Jun 2014 in reply to Shinu Link to this post

    Hi again Shinu.

    Very nice, but this will not make it possible to have different colors for different meanings. I did get it to work by using template, but somehow the ToDate_Calendar looses its color when I ​select a date in FromDate_Calendar.

    Here is my code.
    01.<telerik:RadCalendar ID="FromDate" RangeMinDate="<%# DateTime.Today %>" OnDayRender="Calendar_DayRender" runat="server" SelectedDate="<%# DateTime.Today %>" Enabled="False"
    02.                            EnableAriaSupport="True" EnableShadows="True" AutoPostBack="True" EnableMultiSelect="False" OnSelectionChanged="RadCalendar_SelectionChanged" ShowOtherMonthsDays="False">
    03.                            <CalendarDayTemplates>
    04.                                <telerik:DayTemplate ID="BlockedTemplate0" runat="server">
    05.                                    <Content>
    06.                                        <div class="blocked">{DayOfMonth}</div>
    07.                                    </Content>
    08.                                </telerik:DayTemplate>
    09.                                <telerik:DayTemplate ID="BookedTemplate0" runat="server">
    10.                                    <Content>
    11.                                        <div class="booked">{DayOfMonth}</div>
    12.                                    </Content>
    13.                                </telerik:DayTemplate>
    14.                            </CalendarDayTemplates>
    15.                        </telerik:RadCalendar>
    16.                        </div>
    17.                        <div style="float: left; width: 50%;">
    18.                            Til Dato:
    19.                        <telerik:RadCalendar ID="ToDate" RangeMinDate="<%# DateTime.Today %>" runat="server" OnDayRender="Calendar_DayRender" Enabled="False" ShowOtherMonthsDays="False"
    20.                            EnableAriaSupport="True" EnableShadows="True" AutoPostBack="True" EnableMultiSelect="False" >
    21.                            <CalendarDayTemplates>
    22.                                <telerik:DayTemplate ID="BlockedTemplate1" runat="server">
    23.                                    <Content>
    24.                                        <div class="blocked">{DayOfMonth}</div>
    25.                                    </Content>
    26.                                </telerik:DayTemplate>
    27.                                <telerik:DayTemplate ID="BookedTemplate1" runat="server">
    28.                                    <Content>
    29.                                        <div class="booked">{DayOfMonth}</div>
    30.                                    </Content>
    31.                                </telerik:DayTemplate>
    32.                            </CalendarDayTemplates>
    33.                        </telerik:RadCalendar>
    34.                        </div>

    01.private IQueryable<CabinWeb.OpenAccess.Booking> _bookings;
    02.private IQueryable<Blocked> _blockings;
    03. 
    04.protected void Page_Load(object sender, EventArgs e)
    05.{
    06.    InitCalendar();
    07.    if (_blockings == null && _bookings == null) return;
    08.    var cal = FromDate;
    09.    cal.SpecialDays.Clear();
    10.    cal.SpecialDays.AddRange(BlockedDates(CalendarType.FromDate));
    11.    cal.SpecialDays.AddRange(BookedDates(CalendarType.FromDate));
    12.    var cal2 = ToDate;
    13.    cal2.SpecialDays.Clear();
    14.    cal2.SpecialDays.AddRange(BlockedDates(CalendarType.ToDate));
    15.    cal2.SpecialDays.AddRange(BookedDates(CalendarType.ToDate));
    16.}
    17. 
    18.private void InitCalendar()
    19.{
    20.    var cabinId = ddlCabin.SelectedValue.ToInt(-1);
    21.    var cabinController = new CabinController(Session["company_id"].ToString().ToInt());
    22.    var cabin = cabinController.GetById(cabinId);
    23.    if (cabin != null)
    24.    {
    25.        FromDate.Enabled = true;
    26.        FromDate.RangeMinDate = DateTime.Today.AddDays(-14);
    27.        FromDate.RangeMaxDate = DateTime.Today.AddDays(100);
    28.        _bookings =
    29.            cabin.Bookings.Where(
    30.                b =>
    31.                    b.To_date > FromDate.RangeMinDate && b.From_date < FromDate.RangeMaxDate &&
    32.                    (b.Cancelled == null || (b.Cancelled != null && b.Cancelled.Value == 0))).AsQueryable();
    33.        _blockings =
    34.            cabin.Blockeds.Where(
    35.                b => b.To_date > FromDate.RangeMinDate && b.From_date < FromDate.RangeMaxDate && b.Active == true).AsQueryable();
    36.    }
    37.}
    38. 
    39.private RadCalendarDay[] BlockedDates(CalendarType calendar)
    40.{
    41.    var version = (calendar == CalendarType.FromDate) ? 0 : 1;
    42.    var template = "BlockedTemplate" + version;
    43. 
    44.    var cal = new List<RadCalendarDay>();
    45.    foreach (var blocked in _blockings)
    46.    {
    47.        if (blocked.From_date == null || blocked.To_date == null) continue;
    48.        var startDate = (calendar == CalendarType.ToDate) ? blocked.From_date.Value.AddDays(1) : blocked.From_date.Value;
    49.        var endDate = (calendar == CalendarType.FromDate) ? blocked.To_date.Value.AddDays(-1) : blocked.To_date.Value;
    50.        for (var day = startDate; day <= endDate; day = day.AddDays(1))
    51.        {
    52.            cal.Add(FormatDate(day, template));
    53.        }
    54.    }
    55.    var days = cal.ToArray();
    56.    return days;
    57. 
    58.}
    59. 
    60.private RadCalendarDay[] BookedDates(CalendarType calendar)
    61.{
    62.    var version = (calendar == CalendarType.FromDate) ? 0 : 1;
    63.    var template = "BookedTemplate" + version;
    64.    var cal = new List<RadCalendarDay>();
    65.    foreach (var booking in _bookings)
    66.    {
    67.        if (booking.From_date == null || booking.To_date == null) continue;
    68.        var startDate = (calendar == CalendarType.ToDate) ? booking.From_date.Value.AddDays(1) : booking.From_date.Value;
    69.        var endDate = (calendar == CalendarType.ToDate) ? booking.To_date.Value.AddDays(1) : booking.To_date.Value;
    70.        for (var day = startDate; day < endDate; day = day.AddDays(1))
    71.        {
    72.            cal.Add(FormatDate(day, template));
    73.        }
    74.    }
    75.    var days = cal.ToArray();
    76.    return days;
    77.}
    78. 
    79.private RadCalendarDay FormatDate(DateTime day, string template)
    80.{
    81.    var calDay = new RadCalendarDay { Date = day, IsSelectable = false, IsDisabled = true };
    82.    calDay.TemplateID = template;
    83.    return calDay;
    84.}

    01.       protected void RadCalendar_SelectionChanged(object sender, SelectedDatesEventArgs e)
    02.        {
    03.            FromDate.Enabled = true;
    04.            var startDate = FromDate.SelectedDate.AddDays(1);
    05.            ToDate.RangeMinDate = startDate;
    06.            ToDate.RangeMaxDate = FirstUnavailableDate(startDate);
    07.        }
    08. 
    09.        private DateTime FirstUnavailableDate(DateTime startDate)
    10.        {
    11.            var defaultDate = startDate.AddDays(100);
    12.            if (_bookings == null && _blockings == null)
    13.                return defaultDate;
    14.            if (!_bookings.Any() && !_blockings.Any())
    15.                return defaultDate;
    16. 
    17.            var futureBookings = _bookings.Where(b => b.From_date >= startDate);
    18.            var futureBlockings = _blockings.Where(b => b.From_date >= startDate);
    19.            var firstBooking = futureBookings.Any() ? futureBookings.Min(b => b.From_date.Value) : defaultDate;
    20.            var firstBlocking = futureBlockings.Any()? futureBlockings.Min(b => b.From_date.Value) : defaultDate;
    21.            var result = firstBooking.CompareTo(firstBlocking);
    22.            return result <= 0 ? firstBooking : firstBlocking;
    23.        }
    24. 
    25.        protected void CabinSelectedIndexChanged(object sender, EventArgs e)
    26.        {
    27.            FromDate.Enabled = true;
    28.            ToDate.Enabled = false;
    29.            FromDate.SelectedDates.Clear();
    30.            ToDate.SelectedDates.Clear();
    31. 
    32.        }
    33. 
    34.        protected void Calendar_DayRender(object sender, DayRenderEventArgs e)
    35.        {
    36.            e.Cell.Text = e.Cell.Text.Replace("{DayOfMonth}", e.Day.Date.Day.ToString());
    37.        }
    38.    }
    39. 
    40.    enum CalendarType
    41.{
    42.    FromDate, ToDate
    43.}

    Thanks,

    Terje K.


  9. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 Jun 2014 in reply to Terje Link to this post

    Hi Terje,

    The posted code is not readable for me. Can you please post the code again for further help.

    Thanks,
    Shinu.
  10. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 30 Jun 2014 Link to this post

    Hi Terje,

    Please use the code formatting tool when submitting code snippets in your tickets so that we could easily read it on our end and do our best to provide proper solution.

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  11. Terje
    Terje avatar
    9 posts
    Member since:
    Feb 2011

    Posted 30 Jun 2014 in reply to Maria Ilieva Link to this post

    I did use the formatting tool. The problem is probably to do with setting the height parameter...

    Im on holiday now, so i dont have access to the code. I Will repost it without height parameter when i get back next week. 

    And to telerik: typing on the forum with a mobile phone is typing blind. Cant See what I write. Cant See what others have written while answering...
  12. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 02 Jul 2014 Link to this post

    Hi Terje,

    I will forward your report for the ticketing system to the corresponding team responsible for our site, so that they could further test the described case and fix the problem as soon as possible.

    As for your code, as soon as we have it in some readable format we will do our best to isolate the root cause of the issue and get back to you with a solution.

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  13. Terje
    Terje avatar
    9 posts
    Member since:
    Feb 2011

    Posted 07 Jul 2014 Link to this post

    Here is my code. I have stripped non-essential code for simplicity:

    front-end:
    <style>
        .booked {
            background-color: darkred;
            color: white;
            font-style: italic;
        }
     
        .blocked {
            background-color: darkorange;
            color: white;
            font-style: italic;
        }
    </style>
    <div style="float: left; width: 50%;">
        Fra Dato:
    <telerik:RadCalendar ID="FromDate" RangeMinDate="<%# DateTime.Today %>" OnDayRender="Calendar_DayRender" runat="server" SelectedDate="<%# DateTime.Today %>" Enabled="False"
        EnableAriaSupport="True" EnableShadows="True" AutoPostBack="True" EnableMultiSelect="False" OnSelectionChanged="RadCalendar_SelectionChanged" ShowOtherMonthsDays="False">
        <CalendarDayTemplates>
            <telerik:DayTemplate ID="BlockedTemplate0" runat="server">
                <Content>
                    <div class="blocked">{DayOfMonth}</div>
                </Content>
            </telerik:DayTemplate>
            <telerik:DayTemplate ID="BookedTemplate0" runat="server">
                <Content>
                    <div class="booked">{DayOfMonth}</div>
                </Content>
            </telerik:DayTemplate>
        </CalendarDayTemplates>
    </telerik:RadCalendar>
    </div>
    <div style="float: left; width: 50%;">
        Til Dato:
    <telerik:RadCalendar ID="ToDate" RangeMinDate="<%# DateTime.Today %>" runat="server" OnDayRender="Calendar_DayRender" Enabled="False" ShowOtherMonthsDays="False"
        EnableAriaSupport="True" EnableShadows="True" AutoPostBack="True" EnableMultiSelect="False" >
        <CalendarDayTemplates>
            <telerik:DayTemplate ID="BlockedTemplate1" runat="server">
                <Content>
                    <div style="background-color: darkorange;color: white;font-style: italic;">{DayOfMonth}</div>
                </Content>
            </telerik:DayTemplate>
            <telerik:DayTemplate ID="BookedTemplate1" runat="server">
                <Content>
                    <div style="background-color: darkred;color: white;font-style: italic;">{DayOfMonth}</div>
                </Content>
            </telerik:DayTemplate>
        </CalendarDayTemplates>
    </telerik:RadCalendar>
    </div>


    code-behind:
        public partial class AdminBookingNew : BasePage
        {
            private IQueryable<CabinWeb.OpenAccess.Booking> _bookings;
            private IQueryable<Blocked> _blockings;
     
            protected void Page_Load(object sender, EventArgs e)
            {
                InitCalendar();
                if (_blockings == null && _bookings == null) return;
                var cal = FromDate;
                cal.SpecialDays.Clear();
                cal.SpecialDays.AddRange(BlockedDates(CalendarType.FromDate));
                cal.SpecialDays.AddRange(BookedDates(CalendarType.FromDate));
                var cal2 = ToDate;
                cal2.SpecialDays.Clear();
                cal2.SpecialDays.AddRange(BlockedDates(CalendarType.ToDate));
                cal2.SpecialDays.AddRange(BookedDates(CalendarType.ToDate));
            }
     
     
            private void InitCalendar()
            {
                var cabinId = ddlCabin.SelectedValue.ToInt(-1);
                var cabinController = new CabinController(Session["company_id"].ToString().ToInt());
                var cabin = cabinController.GetById(cabinId);
                if (cabin != null)
                {
                    FromDate.Enabled = true;
                    FromDate.RangeMinDate = DateTime.Today.AddDays(-14);
                    FromDate.RangeMaxDate = DateTime.Today.AddDays(100);
                    _bookings =
                        cabin.Bookings.Where(
                            b =>
                                b.To_date > FromDate.RangeMinDate && b.From_date < FromDate.RangeMaxDate &&
                                (b.Cancelled == null || (b.Cancelled != null && b.Cancelled.Value == 0))).AsQueryable();
                    _blockings =
                        cabin.Blockeds.Where(
                            b => b.To_date > FromDate.RangeMinDate && b.From_date < FromDate.RangeMaxDate && b.Active == true).AsQueryable();
                }
            }
     
     
            private RadCalendarDay[] BlockedDates(CalendarType calendar)
            {
                var version = (calendar == CalendarType.FromDate) ? 0 : 1;
                var template = "BlockedTemplate" + version;
     
                var cal = new List<RadCalendarDay>();
                foreach (var blocked in _blockings)
                {
                    if (blocked.From_date == null || blocked.To_date == null) continue;
                    var startDate = (calendar == CalendarType.ToDate) ? blocked.From_date.Value.AddDays(1) : blocked.From_date.Value;
                    var endDate = (calendar == CalendarType.FromDate) ? blocked.To_date.Value.AddDays(-1) : blocked.To_date.Value;
                    for (var day = startDate; day <= endDate; day = day.AddDays(1))
                    {
                        cal.Add(FormatDate(day, template));
                    }
                }
                var days = cal.ToArray();
                return days;
     
            }
     
            private RadCalendarDay[] BookedDates(CalendarType calendar)
            {
                var version = (calendar == CalendarType.FromDate) ? 0 : 1;
                var template = "BookedTemplate" + version;
                var cal = new List<RadCalendarDay>();
                foreach (var booking in _bookings)
                {
                    if (booking.From_date == null || booking.To_date == null) continue;
                    var startDate = (calendar == CalendarType.ToDate) ? booking.From_date.Value.AddDays(1) : booking.From_date.Value;
                    var endDate = (calendar == CalendarType.ToDate) ? booking.To_date.Value.AddDays(1) : booking.To_date.Value;
                    for (var day = startDate; day < endDate; day = day.AddDays(1))
                    {
                        cal.Add(FormatDate(day, template));
                    }
                }
                var days = cal.ToArray();
                return days;
            }
     
            private RadCalendarDay FormatDate(DateTime day, string template)
            {
                var calDay = new RadCalendarDay { Date = day, IsSelectable = false, IsDisabled = true };
                calDay.TemplateID = template;
                return calDay;
            }
     
            protected void RadCalendar_SelectionChanged(object sender, SelectedDatesEventArgs e)
            {
                ToDate.Enabled = true;
                var startDate = FromDate.SelectedDate.AddDays(1);
                ToDate.RangeMinDate = startDate;
                ToDate.RangeMaxDate = FirstUnavailableDate(startDate);
            }
     
            private DateTime FirstUnavailableDate(DateTime startDate)
            {
                var defaultDate = startDate.AddDays(100);
                if (_bookings == null && _blockings == null)
                    return defaultDate;
                if (!_bookings.Any() && !_blockings.Any())
                    return defaultDate;
     
                var futureBookings = _bookings.Where(b => b.From_date >= startDate);
                var futureBlockings = _blockings.Where(b => b.From_date >= startDate);
                var firstBooking = futureBookings.Any() ? futureBookings.Min(b => b.From_date.Value) : defaultDate;
                var firstBlocking = futureBlockings.Any() ? futureBlockings.Min(b => b.From_date.Value) : defaultDate;
                var result = firstBooking.CompareTo(firstBlocking);
                return result <= 0 ? firstBooking : firstBlocking;
            }
     
            protected void CabinSelectedIndexChanged(object sender, EventArgs e)
            {
                FromDate.Enabled = true;
                ToDate.Enabled = false;
                FromDate.SelectedDates.Clear();
                ToDate.SelectedDates.Clear();
     
            }
     
            protected void Calendar_DayRender(object sender, DayRenderEventArgs e)
            {
                e.Cell.Text = e.Cell.Text.Replace("{DayOfMonth}", e.Day.Date.Day.ToString());
            }
        }
     
        enum CalendarType
        {
            FromDate, ToDate
        }
    }



  14. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 08 Jul 2014 in reply to Terje Link to this post

    Hi Terje,

    In order to style the disabled dates please try the below CSS which works fine at my end.

    CSS:
    .rcDisabled
    {
        background-color: darkorange;
        color: white;
        font-style: italic;
    }

    Thanks,
    Shinu.
  15. Terje
    Terje avatar
    9 posts
    Member since:
    Feb 2011

    Posted 08 Jul 2014 Link to this post

    Hi again.

    Everything seems to work fine in the first calendar (from-date), but as soon as I click a date on the first calendar, all formatting disappears from the second calendar (to-date). Even the formatting from your suggestion disappears.

    I have attached screenshots of how it looks on init (oninit.png) and after dateselection in first calendar (onclick.png)
  16. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 09 Jul 2014 in reply to Terje Link to this post

    Hi Terje,

    Unfortunately I couldn't replicate the issue at my end. Please have a look into the sample code snippet which works fine at my end.

    ASPX:
    <telerik:RadCalendar ID="FromDate" OnDayRender="Calendar_DayRender" runat="server"  EnableAriaSupport="True" EnableShadows="True" AutoPostBack="True" EnableMultiSelect="False" ShowOtherMonthsDays="False" RangeMinDate="<%# DateTime.Today %>" SelectedDate="<%# DateTime.Today %>">
        <CalendarDayTemplates>
            <telerik:DayTemplate ID="BlockedTemplate0" runat="server">
                <Content>
                    <div>
                        {DayOfMonth}
                    </div>
                </Content>
            </telerik:DayTemplate>
        </CalendarDayTemplates>
    </telerik:RadCalendar>
    <telerik:RadCalendar ID="ToDate"OnDayRender="Calendar_DayRender" runat="server"EnableAriaSupport="True" EnableShadows="True" AutoPostBack="True" EnableMultiSelect="False" ShowOtherMonthsDays="False"  RangeMinDate="<%# DateTime.Today %>"  SelectedDate="<%# DateTime.Today %>"  >
        <CalendarDayTemplates>
            <telerik:DayTemplate ID="BookedTemplate0" runat="server">
                <Content>
                    <div>
                        {DayOfMonth}
                    </div>
                </Content>
            </telerik:DayTemplate>
        </CalendarDayTemplates>
    </telerik:RadCalendar>

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        var cal = FromDate;
        cal.SpecialDays.Clear();
        cal.SpecialDays.AddRange(BlockedDates(CalendarType.FromDate));
        var cal1 = ToDate;
        cal1.SpecialDays.Clear();
        cal1.SpecialDays.AddRange(BookedDates(CalendarType.ToDate));
    }
    private RadCalendarDay[] BlockedDates(CalendarType calendar)
    {
        var version = (calendar == CalendarType.FromDate) ? 0 : 1;
        var template = "BlockedTemplate"+version;
        var cal = new List<RadCalendarDay>();
        var i = 0;
        var startDate = (calendar == CalendarType.ToDate) ? DateTime.Now.AddDays(-1) : DateTime.Now.AddDays(-2);
        var endDate = (calendar == CalendarType.FromDate) ? DateTime.Now.AddDays(-3) : DateTime.Now.AddDays(-4);
        for (var day = startDate; i<3; day = day.AddDays(1))
        {
            cal.Add(FormatDate(day, template));
            i++;
        }
        var days = cal.ToArray();
        return days;
    }
    private RadCalendarDay[] BookedDates(CalendarType calendar)
    {
        var version = (calendar == CalendarType.ToDate) ? 0 : 1;
        var template = "BookedTemplate"+version;
        var cal = new List<RadCalendarDay>();
        var i = 0;
        var startDate = (calendar == CalendarType.ToDate) ? DateTime.Now.AddDays(-1) : DateTime.Now.AddDays(-2);
        var endDate = (calendar == CalendarType.FromDate) ? DateTime.Now.AddDays(-3) : DateTime.Now.AddDays(-4);
        for (var day = startDate; i < 3; day = day.AddDays(1))
        {
            cal.Add(FormatDate(day, template));
            i++;
        }
        var days = cal.ToArray();
        return days;
    }
    private RadCalendarDay FormatDate(DateTime day, string template)
    {
        var calDay = new RadCalendarDay { Date = day, IsSelectable = false, IsDisabled = true };
        calDay.TemplateID = template;
        return calDay;
    }
    protected void Calendar_DayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
    {
       e.Cell.Text = e.Cell.Text.Replace("{DayOfMonth}", e.Day.Date.Day.ToString());
    }
    enum CalendarType
    {
        FromDate, ToDate
    }

    CSS:
    .rcDisabled
    {
        background-color: darkorange;
        color: white;
        font-style: italic;
    }

    Thanks,
    Shinu.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017