Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Using WCF to format RadCalendar

9 Answers 176 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
aozora
Top achievements
Rank 2
aozora asked on 24 Jan 2009, 04:14 AM
Hi all,

I'm currently trying to create an availability calendar using RadCalendar (PresentationType = View) and feed the data from database using WCF.
I'm planning to use client-side event OnCalendarViewChanging to call the WCF service and OnDayRender to format the background color of the cell.

I have a couple of problems in doing so, first I don't know how to pass the current month/target month from RadCalendar to the WCF function.
Second, after the data is returned from WCF, I need to change the background color of sold out dates, but I cannot redraw the calendar because it's already rendered on the client side, so the event OnDayRender wasn't fired anymore.

Is there any idea of how to do this? I'm up for different events and methods to solve this problem, but my boss wants it to be purely client-side using javascript and jquery.

Thank you,
Khonato

9 Answers, 1 is accepted

Sort by
0
Accepted
Rosen
Telerik team
answered on 27 Jan 2009, 12:10 PM
radcalendarwcf.zip
Hi,

I have I attached sample project which demonstrate a simple implementation of the requested functionality. Please feel free to extended it in order to fit more fully to your scenario.

Sincerely yours,
Rosen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
aozora
Top achievements
Rank 2
answered on 28 Jan 2009, 03:25 AM
thank you very much Rosen, i'm currently trying your sample project, i'll get back at you with a good news ^.^

Khonato
0
aozora
Top achievements
Rank 2
answered on 28 Jan 2009, 10:08 AM
Hi Rosen, i'm having some problems with the project sample.. i have tried to modify your javascript with no avail..

when i use the MonthYearFastNavigation or FastNavigation, the calendar only move to next or previous month, so the fastnavigation is not working as it should be..
when i set the MultiViewColumns = 2, the calendar navigation stop working altogether..

i'm trying to put this script on Page_Load on codebehind (c#):
Page.ClientScript.RegisterStartupScript(this.GetType(), "test", "$find('" + RadCalendar1.ClientID + "').navigateToDate([2009, 8, 1]);", true);
the navigation works, but when i get a 'null' error on this line (javascript):
var calendarInstance = $find("<%=RadCalendar1.ClientID %>");

and can i change this?
args.get_cell().style.backgroundColor = "#eeeeee";                        
into css class like:
args.get_cell().cssclass = "NotAvailable";

thank you very much,
Khonato
0
aozora
Top achievements
Rank 2
answered on 29 Jan 2009, 09:58 AM
i'm sorry about the multiviewcolumns, i forgot to set the autopostback = true.
as for the rest of my questions, i've already solved it with the code below, thank you Rosen for showing me the light.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <style type="text/css"> 
    .notAvailable 
    { 
        background-color: #EEEEEE; 
    } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
        <asp:ScriptManager runat="server" ID="ScriptManager1"> 
            <Services> 
                <asp:ServiceReference Path="~/CalendarService.svc"/> 
            </Services> 
        </asp:ScriptManager>             
                   
         
        <telerik:RadCalendar runat="server" ID="RadCalendar1"  
            PresentationType="Preview" ShowOtherMonthsDays="false"  
            ShowRowHeaders="false" EnableNavigationAnimation="true" DayNameFormat="FirstTwoLetters" 
            ondayrender="RadCalendar1_DayRender"> 
            <ClientEvents OnCalendarViewChanging="RadCalendar1_CalendarViewChanging" 
             OnDayRender="RadCalendar1_DayRender"/>             
        </telerik:RadCalendar> 
         
         <script type="text/javascript"> 
 
             var dates = []; 
             var currentRDate = null; 
             var shouldNavigate = false; 
             function onCompleted(result) { 
                 dates = result; 
                 var calendarInstance = $find("<%=RadCalendar1.ClientID %>");                  
                 if (currentRDate && currentRDate != calendarInstance.get_focusedDate()) 
                 { 
                     shouldNavigate = true; 
                     calendarInstance.navigateToDate(currentRDate);                      
                 } 
             } 
 
             function RadCalendar1_CalendarViewChanging(sender, args) 
             { 
                 args.set_cancel(!shouldNavigate); 
                 if (!shouldNavigate) { 
                     currentRDate = sender.get_focusedDate(); 
                     var startDate = new Date(currentRDate[0], currentRDate[1] - 1, 1); 
                     startDate.setMonth(startDate.getMonth() + args.get_step()); 
                     currentRDate = [startDate.getFullYear(), startDate.getMonth() + 1, startDate.getDate()]; 
                     tempuri.org.CalendarService.GetDates(startDate, onCompleted); 
                 }  
                 else 
                 { 
                     shouldNavigate = false;  
                 } 
             } 
              
             function RadCalendar1_DayRender(sender, args) 
             { 
                 var date = new Date(args.get_date()[0], args.get_date()[1] - 1, args.get_date()[2]); 
                 for (var i = 0, len = dates.length; i < len; i++) { 
                    if (date.getDate() == dates[i].getDate() && date.getMonth() == dates[i].getMonth()) 
                    { 
                        args.get_cell().className = "notAvailable"; 
                    } 
                 } 
             } 
        </script>  
    </div> 
    </form> 
</body> 
</html> 
 

and for the codebehind to load the data on first load

public partial class _Default : System.Web.UI.Page  
{ 
    IList<DateTime> objResult = null; 
    protected void Page_Load(object sender, EventArgs e) 
    { 
        CalendarService objCalendarService = new CalendarService(); 
        DateTime startDate = new DateTime(RadCalendar1.FocusedDate.Year, RadCalendar1.FocusedDate.Month, 1); 
        objResult = objCalendarService.GetDates(startDate); 
        objCalendarService = null; 
    } 
    protected void RadCalendar1_DayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e) 
    { 
        for (int i = 0; i < objResult.Count; i++) 
        { 
            if (e.Day.Date == objResult[i]) 
            { 
                e.Cell.CssClass = "notAvailable"; 
            } 
        } 
    } 
} 
 


sincerely yours,
Khonato
0
Rosen
Telerik team
answered on 29 Jan 2009, 11:11 AM
Hello,

I'm glad that you have managed to solved the problem you were facing. Please let us know if you need further assistance. 

Kind regards,
Rosen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
aozora
Top achievements
Rank 2
answered on 30 Jan 2009, 03:48 AM
Hi Rosen,

Is there any way to use MultiViewColumns = 2 without activating AutoPostback?
and what is the tooltip property for client side code? the server side is easy:

e.Cell.ToolTip = "Not Available";

I've tried:

args.get_cell().toolTip = "Not Available";

but it's not working..

Thank you,
Khonato
0
aozora
Top achievements
Rank 2
answered on 30 Jan 2009, 08:32 AM
Hello,

I've solved the tooltip problem:

client side:
args.get_cell().title = "Not available\r\nPlease select another date";

server side:
e.Cell.ToolTip = "Not available\r\nPlease select another date";

\r\n : line break

But I still don't know how to use the MultiViewColumns = 2 without activating AutoPostBack..
And my boss also asked me to erase the code behind on Page_Load and RadCalendar1_DayRender because he wants to put it on a multitab control and he doesn't want it to be loaded at the same time on Page_Load, any idea of how to do this?
If I use RadTabStrip and put two different usercontrols on each tab, will the Page_Load event of those usercontrols be fired at the same time?

Best regards,
Khonato
0
Accepted
Rosen
Telerik team
answered on 02 Feb 2009, 02:27 PM
Hello,

I'm afraid that you should use AutoPostBack option when using MultiViewColumn functionality.
As to your other question indeed the load events will be raised for both of the user control. However if you want to execute logic only when a given tab is selected you may use RadTabStrip's TabClick event.

Greetings,
Rosen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
aozora
Top achievements
Rank 2
answered on 09 Feb 2009, 09:51 AM
this is a simple workaround that works for me, i use two radcalendar and connect them using javascript so i don't need to do postback for MultiViewColumns = 2.

i'm having a little problem with q3 2008 version because i cannot remove individual navigation buttons like i do in q1 2008 version, i've posted a new thread about this problem:
http://www.telerik.com/community/forums/aspnet-ajax/calendar/radcalendar-q3-2008-remove-individual-navigation-buttons-not-working.aspx

and the tooltip \r\n doesn't work in firefox, anyone can help me?

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <style type="text/css"> 
    .notAvailable 
    { 
        background-color: #EEEEEE; 
    } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
        <asp:ScriptManager runat="server" ID="ScriptManager1"> 
            <Services> 
                <asp:ServiceReference Path="~/CalendarService.svc"/> 
            </Services> 
        </asp:ScriptManager>             
 
        <script type="text/javascript"> 
 
                 var dates = []; 
                 var currentRDate1 = null; 
                 var currentRDate2 = null; 
                 var shouldNavigate1 = false; 
                 var shouldNavigate2 = false; 
                 function onCompleted(result) { 
                     dates = result; 
                     var calendarInstance1 = $find("<%= RadCalendar1.ClientID %>"); 
                     var calendarInstance2 = $find("<%= RadCalendar2.ClientID %>"); 
                     if (currentRDate1 && currentRDate1 != calendarInstance1.get_focusedDate() && 
                         currentRDate2 && currentRDate2 != calendarInstance2.get_focusedDate()) { 
                         shouldNavigate1 = true; 
                         shouldNavigate2 = true; 
                         calendarInstance1.navigateToDate(currentRDate1); 
                         calendarInstance2.navigateToDate(currentRDate2); 
                     } 
                 } 
 
                 function RadCalendar1_CalendarViewChanging(sender, args) { 
                     args.set_cancel(!shouldNavigate1); 
                     if (!shouldNavigate1) { 
                         currentRDate1 = sender.get_focusedDate(); 
                         var startDate = new Date(currentRDate1[0], currentRDate1[1] - 1, 1); 
                         startDate.setMonth(startDate.getMonth() + args.get_step()); 
                         currentRDate1 = [startDate.getFullYear(), startDate.getMonth() + 1, startDate.getDate()]; 
                         startDate.setMonth(startDate.getMonth() + 1); 
                         currentRDate2 = [startDate.getFullYear(), startDate.getMonth() + 1, startDate.getDate()]; 
                         startDate.setMonth(startDate.getMonth() - 1); 
                         tempuri.org.CalendarService.GetDates(startDate, onCompleted); 
                     } 
                     else { 
                         shouldNavigate1 = false; 
                     } 
                 } 
 
                 function RadCalendar2_CalendarViewChanging(sender, args) { 
                     args.set_cancel(!shouldNavigate2); 
                     if (!shouldNavigate2) { 
                         currentRDate2 = sender.get_focusedDate(); 
                         var startDate = new Date(currentRDate2[0], currentRDate2[1] - 1, 1); 
                         startDate.setMonth(startDate.getMonth() + args.get_step()); 
                         currentRDate2 = [startDate.getFullYear(), startDate.getMonth() + 1, startDate.getDate()]; 
                         startDate.setMonth(startDate.getMonth() - 1); 
                         currentRDate1 = [startDate.getFullYear(), startDate.getMonth() + 1, startDate.getDate()]; 
                         tempuri.org.CalendarService.GetDates(startDate, onCompleted); 
                     } 
                     else { 
                         shouldNavigate2 = false; 
                     } 
                 } 
 
                 function RadCalendar_DataRender(date, args) { 
                     var date = new Date(args.get_date()[0], args.get_date()[1] - 1, args.get_date()[2]); 
                     for (var i = 0, len = dates.length; i < len; i++) { 
                         if (date.getDate() == dates[i].getDate() && date.getMonth() == dates[i].getMonth()) { 
                             args.get_cell().className = "notAvailable"; 
                             args.get_cell().title = "Not\r\nAvailable"; 
                             return; 
                         } 
                     } 
                 } 
 
                 function RadCalendar_DayRender(sender, args) { 
                     toolTip = ""; 
                     var date = new Date(args.get_date()[0], args.get_date()[1] - 1, args.get_date()[2]); 
                     if (sender._element.id == "<%= RadCalendar1.ClientID %>") { 
                         if (date.getMonth() == currentRDate1[1] - 1) 
                             RadCalendar_DataRender(date, args); 
                     } 
                     else { 
                         if (date.getMonth() == currentRDate2[1] - 1) 
                             RadCalendar_DataRender(date, args); 
                     } 
                 } 
        </script>  
 
        <div style="float:left">                   
        <telerik:RadCalendar runat="server" ID="RadCalendar1"  
            PresentationType="Preview" ShowOtherMonthsDays="false"  
            ShowRowHeaders="false" EnableNavigationAnimation="true" DayNameFormat="FirstTwoLetters" 
            ondayrender="RadCalendar_DayRender"> 
            <ClientEvents OnCalendarViewChanging="RadCalendar1_CalendarViewChanging" 
             OnDayRender="RadCalendar_DayRender"/>             
        </telerik:RadCalendar> 
        </div> 
        <div> 
        <telerik:RadCalendar runat="server" ID="RadCalendar2"  
            PresentationType="Preview" ShowOtherMonthsDays="false"  
            ShowRowHeaders="false" EnableNavigationAnimation="true" DayNameFormat="FirstTwoLetters" 
            ondayrender="RadCalendar_DayRender"> 
            <ClientEvents OnCalendarViewChanging="RadCalendar2_CalendarViewChanging" 
             OnDayRender="RadCalendar_DayRender"/>             
        </telerik:RadCalendar> 
        </div>         
    </div> 
    </form> 
</body> 
</html> 
 

Default.aspx.cs

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
 
public partial class _Default : System.Web.UI.Page  
{ 
    IList<DateTime> objResult = null; 
    protected void Page_Load(object sender, EventArgs e) 
    { 
        RadCalendar2.FocusedDate = RadCalendar1.FocusedDate.AddMonths(1); 
        CalendarService objCalendarService = new CalendarService(); 
        DateTime startDate = new DateTime(RadCalendar1.FocusedDate.Year, RadCalendar1.FocusedDate.Month, 1); 
        objResult = objCalendarService.GetDates(startDate); 
        objCalendarService = null; 
    } 
 
    private void RadCalendar_DataRender(DateTime date, Telerik.Web.UI.Calendar.DayRenderEventArgs e) 
    { 
        for (int i = 0; i < objResult.Count; i++) 
        { 
            if (e.Day.Date == objResult[i]) 
            { 
                e.Cell.CssClass = "notAvailable"; 
                e.Cell.ToolTip = "Not\r\nAvailable"; 
                return; 
            } 
        } 
    } 
 
    protected void RadCalendar_DayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e) 
    { 
        if (((Telerik.Web.UI.RadCalendar)sender).ID == RadCalendar1.ID) 
        { 
            if (e.Day.Date.Month == RadCalendar1.FocusedDate.Month) 
                RadCalendar_DataRender(e.Day.Date, e); 
        } 
        else 
        { 
            if (e.Day.Date.Month == RadCalendar2.FocusedDate.Month) 
                RadCalendar_DataRender(e.Day.Date, e); 
        } 
    } 
} 
 

CalendarService.cs

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Runtime.Serialization; 
using System.ServiceModel; 
using System.Text; 
 
// NOTE: If you change the class name "CalendarService" here, you must also update the reference to "CalendarService" in Web.config. 
public class CalendarService : ICalendarService 
{ 
    //public IList<DateTime> GetDates() 
    //{ 
    //    return new List<DateTime>() {DateTime.Now}; 
    //} 
 
    public IList<DateTime> GetDates(DateTime startDate) 
    { 
        var list = new List<DateTime>(); 
        for (int i = 0; i < 4; i++) 
        { 
            list.Add(startDate.AddDays(i)); 
            list.Add(startDate.AddDays(i).AddMonths(1)); 
        } 
        return list; 
    } 
} 
 

Best regards,
Khonato
Tags
Calendar
Asked by
aozora
Top achievements
Rank 2
Answers by
Rosen
Telerik team
aozora
Top achievements
Rank 2
Share this question
or