Show date on Calendar Day Templates

[Dane]

Hey,

I have a Calendar and i have applied a template to it...

<CalendarDayTemplates>
        <telerik:DayTemplate ID="GEvent" runat="server">
        <Content>
        <div style="text-align:center">
        <img src="../Images/Calendar_Event.png" style="border: 0px;" /> </div>
     </Content>
        </telerik:DayTemplate>
    </CalendarDayTemplates>

I then add these according to the entries in the DB...

foreach (LaunchEvent LE in VW.DAL.DataRepository.LaunchEventProvider.GetAll())
            {
                RadCalendarDay NewDay = new RadCalendarDay(RadCalendar1);
                NewDay.Date = LE.Date;
                NewDay.Repeatable = RecurringEvents.None;
                NewDay.TemplateID = "GEvent";
                NewDay.ItemStyle.CssClass = "CalendarEvent";
                NewDay.ToolTip = LE.Name;
                RadCalendar1.SpecialDays.Add(NewDay);
            }

And it works well except for the fact that It hides the date on any day that i apply a template to. How do i display the date?

All i really need to to is apply an icon onto a date where an event is happening so that ppl can see when the shit is goign down and click on it.

Thanks,
Greg

[Pavlina]

Hello Dane,

In this case it would be necessary to locate a control contained inside a template. Simply call the FindControl method of the container object to obtain a reference to the control in the template.

I suggest that you add a Label/LiteralControl inside a calendar day template which is part of the CalendarDayTemplates collection and in codebehind, on DayRander event, to find this control and set its Text to the value you need.

For more information about how to achieve that, please refer to the following help articles:
Finding Controls inside Templates
Day Templates

Kind regards,
Pavlina
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Chanan Zass]

Greetings,

I've followed your suggestions and tried to find a literal control within a single DayTemplate we're using.
Problem is we can't seem to be able to get to this control. Our code is something like:

 

 

 

Protected Sub cmdDayRender(ByVal sender As Object, ByVal e As Telerik.Web.UI.Calendar.DayRenderEventArgs) Handles RadCalendar1.DayRender
    Dim today As String = e.Day.Date.Day.ToString
    If Not e.Day.TemplateID Is Nothing Then
       Dim myTemplateID As String = e.Day.TemplateID
       Dim myLiteral As Literal = DirectCast(RadCalendar1.CalendarDayTemplates.Item(myTemplateID).FindControl("ltrTemplate"), Literal)
        If Not myLiteral Is Nothing Then
           myLiteral.Text = "<a href='http://www.ourUrl.com/Events.aspx'>" & today & "</a>"
        End If
    End If
End Sub

Our RadCalendar is as simple as:

 

<telerik:RadCalendar ID="RadCalendar1" Runat="server" EnableMultiSelect="False"
   font-names="Arial,Verdana,Tahoma" forecolor="Black" SelectedDate=""
   style="border-color: #ececec" ViewSelectorText="x"
   OnSelectionChanged="cmdSelectionChanged" CultureInfo="Italian (Italy)"
   Skin="WebBlue" Width="180px" TitleFormat="MMMM yyyy" AutoPostBack="True"
   ShowRowHeaders="False" UseRowHeadersAsSelectors="False"
   ShowOtherMonthsDays="False" OnDayRender="cmdDayRender">
            <CalendarDayTemplates>
                <telerik:DayTemplate ID="dayTemplate1">
                    <Content>
                        <asp:Literal ID="ltrTemplate" runat="server" />
                    </Content>
                </telerik:DayTemplate>
             </CalendarDayTemplates>
        </telerik:RadCalendar>

 
Any idea will be welcomed.

[Chanan Zass]

So, here's what I ended up doing:

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<telerik:radajaxmanager id="RadAjaxManager1" runat="server">
  <AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="RadCalendar1">
      <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="RadCalendar1"></telerik:AjaxUpdatedControl>
      </UpdatedControls>
    </telerik:AjaxSetting>
  </AjaxSettings>
</telerik:radajaxmanager>
<telerik:RadCalendar ID="RadCalendar1" Runat="server" EnableMultiSelect="False"
  font-names="Arial,Verdana,Tahoma" forecolor="Black" SelectedDate=""
  style="border-color: #ececec" ViewSelectorText="x"
  OnSelectionChanged="cmdSelectionChanged" CultureInfo="Italian (Italy)"
  Skin="WebBlue" Width="180px" TitleFormat="MMMM yyyy" AutoPostBack="True"
  ShowRowHeaders="False" UseRowHeadersAsSelectors="False"
  ShowOtherMonthsDays="False" OnDayRender="cmdDayRender">
  <CalendarDayTemplates>
    <telerik:DayTemplate ID="dayTemplate1">
      <Content>
        <asp:HyperLink ID="lnkEvent" runat="server" Font-Bold="true" />
      </Content>
    </telerik:DayTemplate>
  </CalendarDayTemplates>
</telerik:RadCalendar>

Code behind: Page_Load

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
   If Not IsPostBack Then
      Dim ds As DataSet = GetEvents()
      If ds.Tables(0).Rows.Count > 0 Then
         Dim calDate As DateTime = Nothing
         Dim evTitle As String = ""

         ' read data from events dataset and assign to cells
         Dim int As Integer = 1
         For Each row As DataRow In ds.Tables(0).Rows
            If IsDBNull(row("Start")) = False Then
                calDate = CDate(row("Start"))
                evTitle = row("Title")
                Dim NewDay As New RadCalendarDay(RadCalendar1)
                NewDay.[Date] = New DateTime(calDate.Year, calDate.Month, calDate.Day)
                NewDay.Repeatable = Calendar.RecurringEvents.DayAndMonth

                NewDay.TemplateID = "dayTemplate1"
                NewDay.ToolTip = evTitle
                NewDay.ItemStyle.BackColor = Drawing.Color.Beige
                RadCalendar1.SpecialDays.Add(NewDay)
             End If
          Next
       End If
    End If
End Sub

DayRender

Protected Sub cmdDayRender(ByVal sender As Object, ByVal e As Telerik.Web.UI.Calendar.DayRenderEventArgs) Handles RadCalendar1.DayRender
   Dim renderedDay As String = e.Day.Date.AddDays(1).Day.ToString
   Dim myTemplate As DayTemplate
   myTemplate = RadCalendar1.CalendarDayTemplates.Item("dayTemplate1")
   If Not myTemplate Is Nothing Then
      Dim myLink As HyperLink = Nothing
      For Each ctr As Control In RadCalendar1.Controls
         myLink = DirectCast(ctr.FindControl("lnkEvent"), HyperLink)
         If Not myLink Is Nothing Then
            myLink.Text = renderedDay
            myLink.NavigateUrl = "http://ourSite.com/Events.aspx"
         End If
      Next
   End If
End Sub

[Pavlina]

Hi Chanan,

I am sending you a small working project with the implementation request by you. Give it a try and let me know if you have other questions or problems.

Sincerely yours,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Chanan Zass]

Thanks.
But you must have sent an early version of your project.
Your Default.cs file is basically blank:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    private DataSet GetEvents()
    {
        throw new NotImplementedException();
    }
    protected void cmdDayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
    {

    }
    protected void cmdSelectionChanged(object sender, Telerik.Web.UI.Calendar.SelectedDatesEventArgs e)
    {

    }
}

My calendar is actually online right now (http://mobility.provincia.venezia.it, go to the month of May to see a few events).
I'll be glad to see your version of it. Sure it's going to work better than mine, as in my case there's an AJAX callback on each view change (moving to the next month, for example). Would have been nice to be able to set all events for all months in one go. Right now this seems impossible.

[Pavlina]

Hello Chanan,

I reviewed your code and unfortunately I could not determine where could be the problem based on the given information. Please open a formal support ticket and send us a simple working project which reproduces the erroneous behavior. Thus I could do all my best to find a quick resolution of this matter.

Looking forward for your reply. 

Sincerely yours,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Chanan Zass]

Dear Pavlina,

 

I have no problem here. The problem we had initially was resolved and I've actually posted the code we use on one of our sites (it is now a bit better, using the GetEvents() iList instead of a dataset).
So, thanks, all is fine.

[Kentaro Yasutake]

Chanaan,

Can you send me your code for the calendar on your site? I need something very similar and am stuck. Thanks in advance,

David

[Chanan Zass]

I thought I've included the code already.
Anyhow, here's what we have now working here: http://www.mobilitymanager.provincia.venezia.it:

code added in the master page:

<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    <telerik:radajaxmanager id="RadAjaxManager1" runat="server"
            DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadCalendar1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:radajaxmanager>

Code of EventsCalendar.ascx:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="EventsCalendar.ascx.vb" Inherits="UserControls_EventsCalendar" %>
    <div>

        <telerik:RadCalendar ID="RadCalendar1" Runat="server" EnableMultiSelect="False"
            font-names="Arial,Verdana,Tahoma" forecolor="Black" SelectedDate=""
            style="border-color: #ececec" ViewSelectorText="x"
            OnSelectionChanged="cmdSelectionChanged" CultureInfo="Italian (Italy)"
            Skin="Forest" Width="210px" TitleFormat="MMMM yyyy" AutoPostBack="True"
            ShowRowHeaders="False" UseRowHeadersAsSelectors="False"
            ShowOtherMonthsDays="False" OnDayRender="cmdDayRender" DayCellToolTipFormat="dddd, dd MMMM yyyy">
            <CalendarDayTemplates>
                <telerik:DayTemplate ID="dayTemplate1">
                    <Content>
                        <asp:HyperLink ID="lnkEvent" runat="server" Text="99" NavigateUrl="http://www.endormedia.com/Events.aspx" Font-Bold="true" />
                    </Content>
                </telerik:DayTemplate>
                </CalendarDayTemplates>

        </telerik:RadCalendar>

        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"
            height="75px" width="75px" MinDisplayTime="500" Transparency="25">
            <img alt="Caricando..."
                src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
                style="border:0px;" />
        </telerik:RadAjaxLoadingPanel>
    </div>

Code of EventsCalendar.ascx.vb:

Imports System.Data
Imports Telerik.Web.UI
Imports System.Data.SqlClient

Partial Class UserControls_EventsCalendar
   Inherits System.Web.UI.UserControl
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

        BindCalData()

    End Sub
    Protected Sub BindCalData()
        Dim strResult As String = ""
        If Not IsPostBack Then
            Dim eventManager As New Telerik.Events.EventsManager("Events")
            Dim fromDate As New DateTime
            fromDate = Today.AddDays(-1).Date
            Dim toDate As New DateTime
            toDAte = Today.AddYears(100).Date
            ' get all events starting yesterday and sorted by startDate
            Dim listOfEvents As IList = eventManager.GetEvents(fromDate, toDate, "[Start] ASC")

            If (listOfEvents.Count > 0) Then
                Dim calDate As DateTime = Nothing
                Dim evTitle As String = ""

                ' read data and assign to cells
                Dim int As Integer = 1
                For Each eventItem As Telerik.Events.IEvent In listOfEvents
                    If IsDBNull(eventItem.Start) = False Then
                        calDate = CDate(eventItem.Start)
                        evTitle = eventItem.EventTitle
                        Dim NewDay As New RadCalendarDay(RadCalendar1)
                        NewDay.[Date] = New DateTime(calDate.Year, calDate.Month, calDate.Day)
                        NewDay.Repeatable = Calendar.RecurringEvents.None

                        NewDay.TemplateID = "dayTemplate1"
                        NewDay.ToolTip = evTitle
                        NewDay.ItemStyle.BackColor = Drawing.Color.AliceBlue
                        NewDay.ItemStyle.BorderStyle = BorderStyle.Solid
                        NewDay.ItemStyle.BorderWidth = 1
                        NewDay.ItemStyle.BorderColor = Drawing.Color.Blue
                        RadCalendar1.SpecialDays.Add(NewDay)
                        int = int + 1
                    End If

                Next

            End If
            RadCalendar1.SelectedDate = Today

        End If

    End Sub
    Protected Sub cmdSelectionChanged(ByVal sender As Object, ByVal e As Telerik.Web.UI.Calendar.SelectedDatesEventArgs) Handles RadCalendar1.SelectionChanged
        ' BindCalData()

    End Sub

    Protected Sub cmdDayRender(ByVal sender As Object, ByVal e As Telerik.Web.UI.Calendar.DayRenderEventArgs) Handles RadCalendar1.DayRender
        Dim renderedDay As String = e.Day.Date.AddDays(1).Day.ToString
        Dim myTemplate As DayTemplate
        myTemplate = RadCalendar1.CalendarDayTemplates.Item("dayTemplate1")
        Dim pubDate As String = ""
        Dim titleUrl As String = ""

        If Not myTemplate Is Nothing Then
            Dim eventManager As New Telerik.Events.EventsManager("Events")
            Dim fromDate As New DateTime
            fromDate = Today.AddDays(-1).Date
            Dim toDate As New DateTime
            toDate = Today.AddYears(100).Date
            ' get all events starting yesterday and sorted by startDate
            Dim listOfEvents As IList = eventManager.GetEvents(fromDate, toDate, "[Start] ASC")

            Dim myLink As HyperLink = Nothing
            For Each ctr As Control In RadCalendar1.Controls
                myLink = DirectCast(ctr.FindControl("lnkEvent"), HyperLink)
                If Not myLink Is Nothing Then
                    If (listOfEvents.Count > 0) Then
                        For Each eventItem As Telerik.Events.IEvent In listOfEvents
                            If CDate(eventItem.Start).Date.ToShortDateString = e.Day.Date.AddDays(1).ToShortDateString Then
                                pubDate = CDate(eventItem.ContentItem.DateCreated).Date.Year.ToString & "-" & CDate(eventItem.ContentItem.DateCreated).Date.Month.ToString("D2") & "-" & CDate(eventItem.ContentItem.DateCreated).Date.Day.ToString("D2")
                                If pubDate.Length > 0 Then
                                    pubDate = Mid(pubDate, 3)
                                End If

                                titleUrl = eventItem.EventTitle

                                titleUrl = Replace(Replace(titleUrl, "'", "_"), "’", "_")
                                titleUrl = Replace(titleUrl, " ", "_")
                                titleUrl = Replace(titleUrl, "__", "_")
                                titleUrl = System.Text.RegularExpressions.Regex.Replace(titleUrl, "[^\w\.-]", "")
                                Exit For
                            End If
                        Next
                    End If


                    myLink.Text = renderedDay
                    myLink.NavigateUrl = "~/it/eventi/" & pubDate & "/" & titleUrl & ".aspx?Events=EventItem"
                End If
            Next

        End If
    End Sub
End Class

Hope this is clear. You should edit the code to fit you environment and culture (our site is for Italian public only, for example).

[Kentaro Yasutake]

Chanan,

Thank you for the code! One question I have is about these lines ...

Dim eventManager As New Telerik.Events.EventsManager("Events")
Dim listOfEvents As IList = eventManager.GetEvents(fromDate, toDate, "[Start] ASC")

I want the Calendar to highlight  custom dates based on the start dates of events in our database. When clicked, the Calendar sends user to page with eventid in url.

How do bind my custom data? Is this what you are doing above? Please explain and I thank you again in advance!

David

[Chanan Zass]

Yes, what this code does is calling the Sitefinity default Events Provider and creating a list of events sorted by start date.
Sorry, the current site I've mentioned has no current events so you could see that it does exactly what you wish it to do.

Dim eventManager As New Telerik.Events.EventsManager("Events")
Dim listOfEvents As IList = eventManager.GetEvents(fromDate, toDate, "[Start] ASC")

[Tadhg Hayes]

Hi Chanan,

Thanks for posting your code. I'm using it on a site I'm developing at the moment. I have one problem, it is running really slow since more events have been added. There are currently about 5-10 events a month.
Have you come across this issue?

Regards,
Áine

[Chanan Zass]

How slow is it?
The calendar is pretty slow when you switch months (about 500-1000 milliseconds) but that does not change with extra events, at least in our case.
Which Sitefinity version do you use?

[Tadhg Hayes]

It takes about 30secs to load the page with the control in it. Maybe I haven't configured it correctly. I'm using Sitefinity version 3.6. Any other ideas of what could be wrong?

[Chanan Zass]

We're using version 3.6 as well, with no problem.
I'd check your radajaxmanager and make sure you don't load the whole page each time to switch months, but load only the radcalendar.
Othere than that, there plenty elements that might affect it (events provider, cache settings, etc.).
I'd check how slow the calendar is with NO events at all. Seems to me unlikely that it is affected by the number of events.

[talal]

Sorry to re-open this post.. I could not find any newer solution so here it goes:

It is kinda annoying that something that you would think a simple preference is imposed on you.

All i need is to have the day showing in the template.

I need the template to have a BG image (which i know how to make and it is working ok) but the day itself disappears.

I understand from the post that i can write a whole bunch of code to go over the calendar day by day and add a label etc.

but if only the template allows for a keyword or something so that i can use the keyword in the template itself to show the date.

Telerik is starting to sound like APPLE.. nice interface but with weird restrictions.. :)

[Pavlina]

Hello Talal,

I am sending you a simple example which demonstrates the desired functionality. Please examine it and let me know if it works as expected or if I am leaving something important out. If you need further assistance, do not hesitate to contact us again.

Best wishes,
Pavlina
the Telerik team