Add Animation

The following code shows how to set the easing option to specify a specific animation, such as EaseInBounce, when navigating through the calendar months as well as the duration option to specify how long the animation will last. In this example the duration option is set to 2500 milliseconds.

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#calendar1").wijcalendar(
                        { easing: "easeInBounce", duration: 2500}
                  );
    });
      </script>
<div class="main demo">
      <!-- Begin demo markup -->
            <div id="calendar1"></div>
      <!-- End demo markup -->
      <div class="demo-options">
      <!-- Begin options markup -->
                       
      <!-- End options markup -->
      </div>
</div>

This topic illustrates the following:

Click on the next or previous arrow to navigate to another calendar month and notice the calendar bounces in as it slides in and bounces out as it slides out.