How can i use this calendar in angular2/angular4

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

    Posted 22 Sep 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
    96 posts

    Posted 22 Sep 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 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
    96 posts

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