Search results

How To

The following section explains how to customize various aspects of Calendar.

Set today and clear buttons

To configure today and clear buttons in Calendar UI, do the following:

  1. To the created event of the Calendar, add the required elements to make clear and today buttons visible. In the following example, div with two Essential JS 2 button components are used.

  2. When the e-footer class is used, the div tag acts as the footer.

  3. Using these two buttons, today’s date can be selected and cleared.

  4. Bind the required event handler to the button tags to update the value.

Code example is as follows:

tagHelper
<ejs-calendar id="calendar" created="onCreate"></ejs-calendar>

<script>

document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('.e-footer-container .e-clear').addEventListener('click', function () {
    calendarObject = document.getElementById('calendar').ej2_instances[0];
    calendarObject.value = new Date();
    calendarObject.dataBind();
   });
});
    function onCreate() {
    //creates the custom element for clear button.
    var clearBtn = document.createElement('button');
    var footerElement = document.getElementsByClassName('e-footer-container')[0];
    clearBtn.className = 'e-btn e-clear e-flat';
    clearBtn.textContent = 'Clear';
    footerElement.prepend(clearBtn);
    this.element.appendChild(footerElement);
}

</script>

<style>
    .e-clear { /* csslint allow: adjoining-classes*/
        margin-right: 81px;
    }
</style>

Show dates of other months

The following example demonstrates how to show dates of other months.

Using the styles below, you can bring the dates of other months to visibility from its hidden state.

.e-calendar .e-content tr.e-month-hide,
.e-calendar .e-content td.e-other-month>span.e-day {
    display: block;
}

.e-calendar .e-content td.e-month-hide,
.e-calendar .e-content td.e-other-month {
    pointer-events: auto;
    touch-action: auto;
}
tagHelper
<ejs-calendar id="calendar"></ejs-calendar>

<style>

 .e-calendar .e-content tr.e-month-hide, /* csslint allow: adjoining-classes*/  
.e-calendar .e-content td.e-other-month > .e-day { /* csslint allow: adjoining-classes*/  
    display: block;
}

.e-calendar .e-content td.e-month-hide, /* csslint allow: adjoining-classes*/  
.e-calendar .e-content td.e-other-month { /* csslint allow: adjoining-classes*/  
    pointer-events: auto;
    touch-action: auto;
}
</style>

Select a sequence of dates in Calendar

The following example demonstrates how to select the week dates of chosen date in the Calendar using values property, when multiSelection property is enabled. Methods of Moment.js is used in this sample for calculating the start and end of week from the selected date.

tagHelper
multi.cs
@Html.EJS().Calendar("calendar").Change("onChange").IsMultiSelection(true).Render();

<div class='e-btn-group e-vertical'>
    @Html.EJS().Button("workweek").Content("Work Week").Render()
    @Html.EJS().Button("week").Content("Week").Render()
</div>
<script>
    function onChange(args) {
            var obj = document.getElementById('calendar');
            var startOfWeek = moment(args.value).startOf('week');
            var endOfWeek = moment(args.value).endOf('week');
            if (obj.classList.contains('workweek')) {
                getWeekArray(startOfWeek.day(1), endOfWeek.day(5), obj);
            } else if (obj.classList.contains("week")) {
                getWeekArray(startOfWeek, endOfWeek, obj);
            }
        }

    function getWeekArray(startOfWeek, endOfWeek, obj) {
        var days = [];
        var day = startOfWeek;
        while (day <= endOfWeek) {
            days.push(day.toDate());
            day = day.clone().add(1, 'd');
        }
        obj.values = days;
    }

        document.addEventListener('DOMContentLoaded', function () {
            @*selected current week dates when click the button*@
            document.getElementById('workweek').addEventListener('click', function () {
                var obj = document.getElementById('calendar');
                if (obj.classList.contains('week')) {
                    obj.classList.remove('week')
                }
                obj.classList.add('workweek');
            });

            @*selected current week dates when click the button*@
            document.getElementById('week').addEventListener('click', function () {
                var obj = document.getElementById('calendar');
                if (obj.classList.contains('workweek')) {
                    obj.classList.remove('workweek')
                }
                obj.classList.add('week');
            });
        });
</script>
<style>
    .btncontainer {
        display: inline-block;
        float: right;
        margin-left: 85px;
        margin-top: 120px;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class CalendarController : Controller
    {
        // GET: /<controller>/
        public IActionResult Multi()
        {
            return View();
        }
    }
}

Skip a month in the Calendar

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.

tagHelper
<ejs-calendar id="calendar" navigated="onNavigate"></ejs-calendar>

<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('calendar').ej2_instances[0];
        calendarObject.navigateTo('month', date);
    }
}
</script>

Render the Calendar with week numbers

You can enable weekNumbers in the Calendar by using the weekNumber property.

tagHelper
<ejs-calendar id="calendar" weeknumber="true"></ejs-calendar>

Change the first day of the week

The Calendar provides an option to change the first day of the week by using the firstDayOfWeek property. Generally, the day of the week starts from 0 (Sunday) and ends with 6 (Saturday).

By default, the first day of the week is culture specific.

The following example shows the Calendar with Tuesday as the first day of the week.

tagHelper
<ejs-calendar id="calendar" firstdayofweek=2></ejs-calendar>