Need Calendar with multiselect without press ctrlKey

6 posts, 0 answers
  1. Konstantin
    Konstantin avatar
    8 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
    2090 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
    8 posts
    Member since:
    Mar 2018

    Posted 20 Sep 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
    2090 posts

    Posted 21 Sep 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.
  5. Konstantin
    Konstantin avatar
    8 posts
    Member since:
    Mar 2018

    Posted 23 Sep Link to this post

    Hello Viktor,

    Sorry, I missed it

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

    The function call for the calendar is more convenient

  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2090 posts

    Posted 25 Sep Link to this post

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