Search results

Customization

Each day cell of the Calendar can be customized by using the renderDayCell event.

The following section demonstrates how to disable or highlight specific dates in a Calendar.

Disable weekends

You can disable weekends of every month in a Calendar by using the renderDayCell event. The renderDayCell event offers the following arguments on each day cell creation to help you disable the dates.

View Description
date Defines the current date of the Calendar.
isDisabled Specifies whether the current date is to be disabled or not.
isOutOfRange Defines whether the current date is out of range or not.

The following example demonstrates how to disable weekends of every month.

razor
customization.cs
@Html.EJS().Calendar("element").RenderDayCell("disableDate").Value(@ViewBag.value).Render();

<script>
    function disableDate(args) {
        if (args.date.getDay() === 0 || args.date.getDay() === 6) {
            args.isDisabled = true;
        }
    }
</script>
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 sample()
        {
            ViewBag.value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Date);
            return View();
        }
    }
}

Day cell format

You can also highlight specific dates by adding custom CSS or element to the day cell by using the renderDayCell event.

You can customize the appearance of the Calendar by overriding the existing styles. The following list of CSS class names are used to customize the Calendar component.

Class Name Description
e-calendar Applied to the Calendar.
e-header Applied to the header.
e-title Applied to the title.
e-icon-container Applied to the previous and next icon container.
e-prev Applied to the previous icon.
e-next Applied to the next icon.
e-weekend Applied to weekends.
e-other-month Applied to days of other months.
e-day Applied to each day cell.
e-selected Applied to the selected dates.
e-disabled Applied to the disabled dates.

The following example highlights the World Health Day (every 7th April) and World Forest Day (every 21st March) by using the custom icon and ToolTip.

razor
cellformat.cs
@Html.EJS().Calendar("element").Value(@ViewBag.value).RenderDayCell("customDates").Render()

<script>
    var addClass = ej.base.addClass;
    function customDates(args) {
        /*Date need to be customized*/
        var span;
        if (args.date.getDate() === 7 && args.date.getMonth() == 3) {
            span = document.createElement('span');
            span.setAttribute('class', 'e-icons highlight');
            addClass([args.element], ['special']);
            args.element.setAttribute('title', 'World health day !');
            args.element.setAttribute('data-val', 'World health day !');
            args.element.appendChild(span);
        }
        if (args.date.getDate() === 21 && args.date.getMonth() == 2) {
            span = document.createElement('span');
            span.setAttribute('class', 'e-icons highlight');
            addClass([args.element], ['special']);
            args.element.setAttribute('title', 'World forest day !');
            args.element.setAttribute('data-val', 'World forest day !');
            args.element.appendChild(span);
        }
          
    }
</script>
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 SpecialDates()
        {
            ViewBag.value = new DateTime(2017, 3, 10);
            return View();
        }
    }
}

Highlight Weekends

You can highlight the weekends of every month in a Calendar by using the renderDayCell event. The following example demonstrates how to highlights the weekends of every month.

razor
highlight-weekend.cs
@Html.EJS().Calendar("element").RenderDayCell("highlightDate").Value(@ViewBag.value).Render();

<script>
    function highlightDate(args) {
        if (args.date.getDay() === 0 || args.date.getDay() === 6) {
            // To highlight the week end of every month
            args.element.classList.add('e-highlightweekend');
        }
    }
</script>
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 sample()
        {
            ViewBag.value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Date);
            return View();
        }
    }
}