Add date from database with image and tooltip.

[Dan]

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

[A2H]

 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

[Shinu]

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.

[Dan]

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

[Shinu]

Hi Dan,

Please try the following CSS.

CSS:

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

Thanks,
Shinu.