This is a migrated thread and some comments may be shown as answers.

RadDatePicker Week selection

4 Answers 134 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Mehdi
Top achievements
Rank 1
Veteran
Mehdi asked on 30 Jul 2019, 11:26 AM

Hi,

I am using RadDatePicker and I want to make whole week selectable. When user click on any date then whole week row will be selected and input field will be filled with Monday's date. Also I can set default week by date.
In my page, depending on some settings (SomeSettings), I want just the week days be selected (weekends be excluded) when the user clicks on one of the week numbers. Below you can find my solution. As I am calling $(".RadAjax").hide(); currently to solve the AutoPostBack problem after calling sender.selectDate() function, I was wondering if anyone can provide a better solution:

<div id="uxSmallCalendarPanel" style="width: 220px;" runat="server">
    <Telerik:RadCalendar DayCellToolTipFormat="" EnableNavigationAnimation="true" Style="text-align: center;" AutoPostBack="true CalendarTableStyle-BorderWidth="0" Width="100%" EnableMultiSelect="true" BorderStyle="None" runat="server" ID="uxCalendar" SkinID="imcrm" CultureInfo="" >
      <ClientEvents OnRowHeaderClick="confirmRowSelection"/>
   </Telerik:RadCalendar>
 </div>

 

<Telerik:RadAjaxManagerProxy runat="server" ID="uxAjaxManager">
   <AjaxSettings>
      <Telerik:AjaxSetting AjaxControlID="uxSmallCalendarPanel">
         <UpdatedControls>
         <Telerik:AjaxUpdatedControl ControlID="uxSmallCalendarPanel" LoadingPanelID="uxSmallLoadingPanel" />
         </UpdatedControls>
      </Telerik:AjaxSetting>
   </AjaxSettings>
</Telerik:RadAjaxManagerProxy>
 
<script type="text/javascript">
function confirmRowSelection(sender, eventArgs)
{   
     eventArgs.set_cancel(true);

     var year = sender.get_focusedDate()[0];
     var weekNumber = eventArgs.get_domElement().innerHTML;
     var firstDayOfSelectedWeek = new Date(year, 0, (weekNumber - 1) * 7);

 

     for (var i = 0; i < (SomeSettings ? 5 : 7); i++)
     {     
        var selectedDate = new Date(firstDayOfSelectedWeek);
        selectedDate.setDate(selectedDate.getDate() + i);
        sender.selectDate([selectedDate.getFullYear(), selectedDate.getMonth() + 1, selectedDate.getDate()]);
     }

 

     $(".RadAjax").hide();
</script>

4 Answers, 1 is accepted

Sort by
0
Accepted
Eyup
Telerik team
answered on 01 Aug 2019, 08:19 AM
Hello Mehdi,

I've already replied to your formal support ticket, but I will also provide a reply here so other developers may find it as well:

"You can achieve this requirement using the approach demonstrated in the attached web site sample.
I hope this will prove helpful."

Generally, we suggest that our users open a single thread for a specific issue so we can track it better and provide more efficient replies.

Regards,
Eyup
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Mehdi
Top achievements
Rank 1
Veteran
answered on 01 Aug 2019, 12:01 PM

Hi Eyup,

Thank you for the response. So, there is no other way for doing it by 'RadCalendar', and you suggest that I use the 'RadDatePicker' control instead?

And regarding the threads' duplication, actually the reason why I opened this new thread was that the code inside previous one wasn't formatted, and I did this just for better readability.

B.R.

0
Eyup
Telerik team
answered on 05 Aug 2019, 06:37 AM
Hello Mehdi,

Thank you for the clarification about the duplicate records. Generally, you can write a new reply in the same thread if you want to add or modify previous reply. I will remove the other one and we can focus on this one.

As for the specific question, RadCalendar can be used in the same way. It is up to your preference what you will choose.

Regards,
Eyup
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Mehdi
Top achievements
Rank 1
Veteran
answered on 06 Aug 2019, 09:31 AM
Thank you very much
Tags
Calendar
Asked by
Mehdi
Top achievements
Rank 1
Veteran
Answers by
Eyup
Telerik team
Mehdi
Top achievements
Rank 1
Veteran
Share this question
or