Approved
Last Updated: 23 Dec 2019 12:27 by ADMIN
Konstantin
Created on: 03 Sep 2018 06:30
Category: Calendar
Type: Feature Request
0
Need Calendar with multiselect without press ctrlKey

Need Calendar with multiselect without press ctrlKey, allway add or remove date from array

10 comments
Missing User
Posted on: 23 Dec 2019 12:27

Hi Konstantin,

My name is Nikolay and I will be the owner of this thread until my colleague Viktor returns.

I can definitely see the value of implementing this feature and so I have transferred this thread to our feedback portal so people can upvote it. Here it will be reviewed by Product Management for future planning and implementation. The items which gain a lot of popularity are acted upon and included in the RoadMap:

Let me know if you have any questions.

Regards,
Nikolay
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.
Patrick
Posted on: 19 Dec 2019 12:09
Syncfusion has it on their multi select control, can you guys at it to Asp.Net core for us?
Patrick
Posted on: 19 Dec 2019 12:08

Syncfusion has it on their multi select control, can you guys at it to Asp.Net core for us?

 

ADMIN
Viktor Tachev
Posted on: 01 Feb 2019 08:00
Hi Konstantin,

Thank you for the suggestion. Indeed using the toDateObject method looks cleaner and I have updated the example. 

For a token of gratitude for suggesting the improvement I have updated your Telerik points.


Regards,
Viktor Tachev
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.
Konstantin
Posted on: 30 Jan 2019 09:53

Please, change in link: https://docs.telerik.com/kendo-ui/knowledge-base/calendar-select-dates-click

Instead of:

var clickedDateString = clickedItem.children("a")[0].title;

var clickedDate = new Date(clickedDateString);

This:

var clickedDate = kendo.calendar.toDateObject(clickedItem.children("a"))

And add:

calendar.trigger('change');

ADMIN
Viktor Tachev
Posted on: 25 Sep 2018 09:27
Hello Konstantin,

In order to have dates selected only by clicking on them you should override the internal logic of the Calendar widget. Thus, the mousedown event for the calendar needs to be handled so the default operation can be prevented. The custom logic for selecting the dates will be placed in that event handler. 


Regards,
Viktor Tachev
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.
Konstantin
Posted on: 24 Sep 2018 03:35

Hello Viktor,

Sorry, I missed it

$('#calendar').data('kendoCalendar').selectWithoutCtrlKey();

The function call for the calendar is more convenient

ADMIN
Viktor Tachev
Posted on: 21 Sep 2018 12:20
Hello Konstantin,

Selecting multiple dates in the Calendar widget without using Ctrl is not available out of the box. Thus, in order to implement the functionality the default click behavior needs to be prevented like illustrated in the example. 

The code from your last post extends the Calendar widget with a custom function, however, there is no logic that would trigger that function. 

Regards,
Viktor Tachev
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.
Konstantin
Posted on: 20 Sep 2018 12:11

Hello Viktor,

Thanks, but this not work, i am change function:

 

kendo.ui.Calendar.prototype.selectWithoutCtrlKey = function() {
        var me = this;

        this.element.on("mousedown",
            "td",
            function(e) {
            
                // get item if the user clicked on an item template
                var clickedItem = $(e.target).closest("td[role='gridcell']");

                // prevent click event for item elements
                // todo: think about multiple add event
                clickedItem.on("click",
                    function(e) {
                        e.stopPropagation();
                        e.preventDefault();
                    });

                if (clickedItem.length > 0) {
                    var clickedDate = me._toDateObject(clickedItem.children("a"));

                    var selectedDates = me.selectDates();

                    if (clickedItem.hasClass("k-state-selected")) {
                        // if date is already selected - remove it from collection
                        selectedDates = $.grep(selectedDates,
                            function(item, index) {
                                return clickedDate.getTime() !== item.getTime();
                            });
                    } else {
                        selectedDates.push(clickedDate);
                    }


                    me.selectDates(selectedDates);
                    me.trigger('change');
                }
            });
    };

 

ADMIN
Viktor Tachev
Posted on: 04 Sep 2018 10:07
Hello Konstantin,

The example below illustrates how to select or deselect dates in the Calendar widget by using only click.


Give the approach a try and let me know how it works for you.


Regards,
Viktor Tachev
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.