Need Calendar with multiselect without press ctrlKey

8 posts, 0 answers
  1. Konstantin
    Konstantin avatar
    17 posts
    Member since:
    Mar 2018

    Posted 03 Sep 2018 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
    2249 posts

    Posted 04 Sep 2018 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
    17 posts
    Member since:
    Mar 2018

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

    Posted 21 Sep 2018 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
    17 posts
    Member since:
    Mar 2018

    Posted 23 Sep 2018 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
    2249 posts

    Posted 25 Sep 2018 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.
  7. Konstantin
    Konstantin avatar
    17 posts
    Member since:
    Mar 2018

    Posted 30 Jan Link to this post

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

  8. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2249 posts

    Posted 01 Feb Link to this post

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