Add date from database with image and tooltip.

5 posts, 1 answers
  1. Dan
    Dan avatar
    14 posts
    Member since:
    Jul 2013

    Posted 08 Aug 2013 Link to this post

    Hi

    How can I add a background icon to certain days of the radcalendar? The database contain few dates and on clicking a button I want to add those days to the radcalendar and assign an image and a custom tooltip.

    Please help
    Dan
  2. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 08 Aug 2013 Link to this post

     Hello,

    Please try the below implementation.
    1)    Create a css like given below and assign the back ground image you want to apply to special cells.
    <style type="text/css">
                .Appointment
                {
                    _ackground: #DFEEFF none repeat scroll 0 0;
                    background: #DFEEFF url(./Root/image10.jpg) center no-repeat;
                    border-color: #F6FAFF -moz-use-text-color #A7C0DF;
                    border-style: solid none;
                    border-width: 1px 0;
                }
            </style>
    2) ASPX Mark Up :

    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
                    <telerik:RadCalendar ID="RadCalendar2" runat="server" OnDayRender="RadCalendar2_DayRender"
                        AutoPostBack="true">
                    </telerik:RadCalendar>
                    <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Position="BottomRight"
                        RelativeTo="Element" ShowEvent="OnMouseOver" HideEvent="LeaveTargetAndToolTip"
                        Width="300px" Height="50px">
                    </telerik:RadToolTipManager>
     
                </telerik:RadAjaxPanel>

    3) .CS Page :
    int i = 0;
        protected void RadCalendar2_DayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
        {
            if (IsSpecialDayfromDB(e.Day.Date))
            {
                TableCell cell = e.Cell;
                cell.CssClass = "Appointment";
                cell.Attributes.Add("id", "Calendar1_" + i.ToString());
                cell.ToolTip = "Custom Tool tip";
                RadToolTipManager1.TargetControls.Add(e.Cell.Attributes["id"], i.ToString(), true);
                i++;
            }
        }
     
        private bool IsSpecialDayfromDB(DateTime date)
        {
            //Check for your special dates from DB
            if (date.ToShortDateString().Equals("8/8/2013") || date.ToShortDateString().Equals("8/20/2013") || date.ToShortDateString().Equals("9/29/2013"))
            {
                return true;
            }
            else
            {
                return false;
            }
        }


    Please refer this link for more details
    Thanks,
    A2H
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 09 Aug 2013 Link to this post

    Hi Dan,

    I guess you are fetching the dates from the database on the click of a button and then adding those to the calendar with some custom styles and tooltip. Here is the complete code I tried to achieve the same requirement.

    ASPX:
    <telerik:RadCalendar ID="RadCalendar1" runat="server" Skin="Web20">
    </telerik:RadCalendar>
    <br />
    <telerik:RadButton ID="RadButton1" runat="server" Text="Get Date from DB" OnClick="RadButton1_Click">
    </telerik:RadButton>

    CSS:
    <style type="text/css">
        .day-style
        {
            background-image: url("../Images/gplus.png") !important;
            background-repeat: no-repeat;
        }
    </style>

    C#:
    protected void RadButton1_Click(object sender, EventArgs e)
    {
        DataTable table1 = GetDataTable();
        foreach (DataRow row in table1.Rows)
        {
            DateTime datevalue = (Convert.ToDateTime(row["date"].ToString()));
            int day = datevalue.Day;
            int month = datevalue.Month;
            int year = datevalue.Year;
     
            RadCalendarDay NewDay = new RadCalendarDay(RadCalendar1);
            NewDay.Date = new DateTime(year, month, day);
            NewDay.Repeatable = RecurringEvents.DayAndMonth;
            NewDay.ToolTip = "Your ToolTip Text";
            NewDay.ItemStyle.CssClass = "day-style";
            RadCalendar1.SpecialDays.Add(NewDay);
        }
    }
     
    public DataTable GetDataTable()
    {
        String ConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
        SqlConnection conn = new SqlConnection(ConnString);
        SqlDataAdapter adapter = new SqlDataAdapter();
        adapter.SelectCommand = new SqlCommand("SELECT date FROM DateTable", conn);
     
        DataTable table1 = new DataTable();
     
        conn.Open();
        try
        {
            adapter.Fill(table1);
        }
        finally
        {
            conn.Close();
        }
     
        return table1;
    }

    Thanks,
    Shinu.
  5. Dan
    Dan avatar
    14 posts
    Member since:
    Jul 2013

    Posted 12 Aug 2013 Link to this post

    Hi Shinu,

    I noticed another issue with CSS. The calendar underline styling is not working in IE version 8. This issue is not appearing in other versions of IE as well as chrome and firefox. Any fix?

    Thanks
    Dan
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 12 Aug 2013 Link to this post

    Hi Dan,

    Please try the following CSS.

    CSS:
    <style type="text/css">
        .RadCalendar .rcMain .rcRow td a
        {
            text-decoration: underline;
        }
    </style>

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