Need Calendar with multiselect without press ctrlKey

4 posts, 0 answers
  1. Konstantin
    Konstantin avatar
    6 posts
    Member since:
    Mar 2018

    Posted 03 Sep Link to this post

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

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2020 posts

    Posted 04 Sep Link to this post

    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.
  3. Konstantin
    Konstantin avatar
    6 posts
    Member since:
    Mar 2018

    Posted 2 days and 4 hours ago Link to this post

    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');
                    }
                });
        };

     

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2020 posts

    Posted 1 day and 4 hours ago Link to this post

    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.
Back to Top