How to set multiple date in the calendar with mvvm?

3 posts, 0 answers
  1. Federico
    Federico avatar
    21 posts
    Member since:
    Oct 2017

    Posted 15 Nov Link to this post

    How to set multiple date in the calendar with mvvm.

    I have my calendar :

    <div id="calendar1" data-role="calendar"
              data-bind="value: Cvalue,
              dates: Csource,
              events:{change: ConChange}">
    </div>

     

    JS, view model:

    Cvalue:null,
    Csource:[],
    Conchange:function(){
    }
                    

     

    Csource contains:

    [
     {"nome":"1"},{"data":"21/112017"},
     {"nome":"2"},{"data":"22/112017"},
     {"nome":"3"},{"data":"26/112017"},
     {"nome":"4"},{"data":"28/112017"},
     {"nome":"5"},{"data":"29/112017"}
     ]

     

     

    Cain i see this dates with different color in the calendar?

    and at onChange of day, i'd like to print the name of date;

     

     

     

     

     

     

     

  2. Federico
    Federico avatar
    21 posts
    Member since:
    Oct 2017

    Posted 15 Nov in reply to Federico Link to this post

    something like this attached image
  3. Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 17 Nov Link to this post

    Hello, Federico,

    The multiple dates can beset using our selectDates property:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/calendar#configuration-selectDates

    http://dojo.telerik.com/ipAnE/5

    Currently setting them directly from the model is not possible, but we have an open issue for that:

    https://github.com/telerik/kendo-ui-core/issues/3775

    In scenarios, where days have to be in different colors a custom template has to be used to programmatically set all of the dates and their color:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/calendar#configuration-month.content

    If the selectDates configuration is used, then the selectDates method can be used in the change event to retrieve the currently selected dates:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/calendar#methods-selectDates

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top