RadCalender to show four days only

[Amit]

Hello

I want to use telerik radcalender to show the one row and four columns to show
four days at time insted of full month to give nice information of days to client, 
so his functionality to adjust the exception of that day will improve and fast.


so please give me suggestion ,solution or any helpful example.

thanks and regard
Amit

[Princy]

Hi Amit,

You can set RangeMaxDate and RangeMinDate properies of RadCalendar as follows to achieve your scenario.

ASPX:

<telerik:RadCalendar ID="RadCalendar11" runat="server" RangeMaxDate="07/09/2012" RangeMinDate="07/04/12">
</telerik:RadCalendar>

CSS:

<style type="text/css">
 .rcOutOfRange
 {
  visibility:hidden!important;
 }
</style>

Thanks,
Princy.

[Amit]

Hello thanks Princy  for reply.

But I want to do it dynamically,
and there is no fixed range for date so on next button click next four day will come up with exception data 
so please suggest me any nice solution.

Thanks.

[Princy]

Hi Amit,

Try the following code to change the values dynamically.

DateTime max = new DateTime(2012,11,9);
DateTime min = new DateTime(2012,11,6);
RadCalendar1.RangeMaxDate = max;
RadCalendar1.RangeMinDate = min;

Hope this helps.

Thanks,
Princy.

[Amit]

Thanks 

I realy aapriciate your response I have used it .
Can you please give me small one page example which have calender display one row of four day.
if possible otherwise I have to use other way.

[Princy]

Hi Amit,

Here is the full code that I tried based on your scenario.

ASPX:

<telerik:RadCalendar ID="RadCalendar1" runat="server" >
</telerik:RadCalendar>
<telerik:RadDatePicker runat="server" ZIndex="1" ID="RadDatePicker1" onselecteddatechanged="PeriodStartCalendar_SelectedDateChanged" AutoPostBack="true" >
</telerik:RadDatePicker>

C#:

protected void RadDatePicker1_SelectedDateChanged(object sender, Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e)
{
  TimeSpan span = new TimeSpan(2, 0, 0, 0);
  RadCalendar1.RangeMaxDate = e.NewDate.Value.Date.AddDays(2);
  RadCalendar1.RangeMinDate = e.NewDate.Value.Date.Subtract(span);
}

Thanks,
Princy.

[Amit]

Thanks for your reply
But I want to show four days of week to view at a time in single month,
there will be navigation button to navigate to next four day.
so don't want the range I want the four days at a time to show
like we are showing a complete week,instead of it I want to show only four day

Thanks
Amit

[Eyup]

Hello Amit,

You could increase the actual size as well as the font-size of the date cells and show only one row. Then, you could traverse the cells and conditionally set their display to none.

I hope this will prove helpful.

Greetings,
Eyup
the Telerik team

[Amit]

Thanks lot

Can you please little demo so I can get the idea to devlop as required.

Thank you very much in advance

[Eyup]

Hello Amit,

Please provide a screenshot or video demonstrating the desired appearance and elaborate some more on the requested functionality. How do you want the user to be able to navigate through the day sections?

If you send us some detailed information we could prepare and attach a sample example.

Greetings,
Eyup
the Telerik team

[Amit]

where add the attachment
please tell me

[Eyup]

Hello Amit,

I am afraid the requested functionality is not supported. However, I have created a sample web site where I implemented the desired functionality and appearance. Please check out the attached application and let me know about the result.

DISCLAIMER: The provided project is created for the latest RadControls version and for FireFox browser alone. It is not fully tested and it will require further configuration to work under other browsers.

Kind regards,
Eyup
the Telerik team

[Amit]

Dear Eyup,

     Thanks for Reply.
I have opened your zip example,I come to know that it requires .Net framework 4.5.
    Unfortunatly, I have vs 2008 and .Net frame work 3.5 at my laptop.
How could I resolve this issue.

Thanks
Amit.

[Pavlina]

Hello Amit,

Attached to this message is a modified website which should work without problems with .Net 3.5 Framework and VS 2008. Give it a try and let us know if you need additional assistance.

Greetings,
Pavlina
the Telerik team

[Amit]

Hello ,

Thank you very much for your support.
your example is working fine .

There is only one problem

function traverseCells(calendar) is not working in internet explore very well
I have made one change to find cell in ie 
 var dayCells;
 if (document.getElementsByClassName)
{
dayCells = calendar.get_element().getElementsByClassName("rcMainTable")[0].getElementsByTagName("td");
}
 else
{
dayCells = $(".rcMainTable", calendar.get_element())[0].getElementsByTagName("td");
}


following Function line is not working in internet explore 
var fDate = calendar.get_focusedDate();
calendar.set_focusedDate([fDate[0], fDate[1], fDate[2] - fDate[2] % 4 + 1]);
var firstDate = new Date(calendar.get_focusedDate());
firstDate gets value "NaN";

please suggest any solution

Thanks you very much you have solved my half problem now I can work on it to get my desiered functionality.
Regards,
Amit

 

 

 

[Eyup]

Hello Amit,

Try the following:

var newFDate = calendar.get_focusedDate();
var firstDate = new Date(newFDate[0], newFDate[1] - 1, newFDate[2]);

Hope this helps.

Greetings,
Eyup
the Telerik team

[Amit]

Hello,

I have attached image, what I am trying to achieve.
you have given me the basic solution for this but it is not properly working in Internet server.

Thanks and regards
Amit

[Princy]

Hi Amit,

One suggestion is that you can use RadScheduler to achieve your scenario. Please take a look into this demo and documentation.

Thanks,
Princy.