How can i use this calendar in angular2/angular4

6 posts, 0 answers
  1. Priyanka
    Priyanka avatar
    3 posts
    Member since:
    Jun 2017

    Posted 22 Sep 2017 Link to this post

    I want to import the calendar in angular2/4 project? What are the steps for installation?
  2. Eduardo Serra
    Admin
    Eduardo Serra avatar
    116 posts

    Posted 22 Sep 2017 Link to this post

    Hello Priyanka,

    If you want to use Kendo UI for jQuery widgets in an Angular application, you can follow the steps described in our Angular documentation; read Kendo UI for jQuery Integration here.

    I hope this helps.

    Regards,
    Eduardo Serra
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Priyanka
    Priyanka avatar
    3 posts
    Member since:
    Jun 2017

    Posted 22 Sep 2017 in reply to Eduardo Serra Link to this post

    i tried that but still i am unable to see the calendar on my ui. I followed the steps in the document with the installation and using import in component. Below is the code i used in my html which i took from  the documentation on the kendo.calendar.ui .

    I cannot see the calendar on my ui when i run the project

    <div id="example">
    <div class="demo-section k-content" style="text-align: center;">
    <h4>Multiple Date Selection</h4>
    <input type="button" value="prev month" id="prev_month" />
    <div id="calendar"></div>
    <div id="calendar2"></div>
    <div id="calendar3"></div>
    </div>
    <script>
    var month=7;
    $(document).ready(function() {
    // create Calendar from div HTML element
    $("#calendar").kendoCalendar({
    value: new Date(2017, month, 1),
    selectable: "multiple",
    weekNumber: true,
    disableDates: ["su", "sa"],
    change: function() {
                                          var calendar = $("#calendar").data("kendoCalendar");
                                                        var value = calendar.selectDates();
                                         console.log(value); //value is the selected date in the calendar
                                      }
    });

    </script>
    </div>

  4. Eduardo Serra
    Admin
    Eduardo Serra avatar
    116 posts

    Posted 26 Sep 2017 Link to this post

    Hello Priyanka,

    The Kendo UI Calendar code you shared works as expected as we can see in the following Kendo UI Dojo.

    It is important to follow the instructions described in the Integration Guide in order for everything to work as expected.

    Are you getting any errors or warnings in your Browser's Developer Tools console? If the problem persist please share the rest of your code including where the modules are imported and component files.

    Thank you.

    Regards,
    Eduardo Serra
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Deepak
    Deepak avatar
    1 posts
    Member since:
    Jan 2018

    Posted 05 Jan Link to this post

    Hi,

    I am using Kendo calendar. I am using the month view to display the data.

    But I want to show the next 2 months data as well in this calendar.

    Do we have any property to show data for next month. Currently I am able to show for current month.

     

    Thanks!

     

    Deepak

  6. Eduardo Serra
    Admin
    Eduardo Serra avatar
    116 posts

    Posted 05 Jan Link to this post

    Hi Deepak,

    The functionality you describe is not supported by the Kendo UI API but has been requested by some of our clients over the past few years; you will find the related Feature Request item in our Feedback and Feature Request Portal here. I encourage you to vote on it so developers take notice and implement it in future releases.

    Alternatively, you could take advantage of our professional Feature Customization Services; read more about them in our website here.

    Thank you for your understanding.

    Regards,
    Eduardo Serra
    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