Skip a month in the Calendar

19 Dec 20221 minute to read

The following example demonstrates how to skip a month in the Calendar while clicking the previous and next icons. In the example below, the navigated event is used to skip a month with navigateTo method.

CSHTML

@Html.EJS().Calendar("element").Navigated("onNavigate").Render()

<script>
    function onNavigate(args) {
        var date;
        if ((args.event.currentTarget).classList.contains('e-next')) {
            //Increments the month while clicking the next icon.
            date = new Date(args.date.setMonth(args.date.getMonth() + 1));
        }
        if ((args.event.currentTarget).classList.contains('e-prev')) {
            //Decrements the month while clicking the previous icon.
            date = new Date(args.date.setMonth(args.date.getMonth() - 1));
        }
        if (args.view == 'Month') {
            calendarObject = document.getElementById('element').ej2_instances[0];
            calendarObject.navigateTo('Month', date);
        }
    }
</script>

NOTE

View Sample in GitHub.