Calendar Views in Calendar Control

27 Aug 20263 minutes to read

The Calendar has the following pre-defined views that provide a flexible way to navigate back and forth when selecting dates.

View Description
month (default) Displays the days in a month.
year Displays the months in a year.
decade Displays the years in a decade.

Defining the start property allows you to set the initial view rendered by the Calendar.

The following example demonstrates how to set the year as the start view of the Calendar.

@Html.EJS().Calendar("element").Value(@ViewBag.value).Start(Syncfusion.EJ2.Calendars.CalendarView.Year).Render()
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public class CalendarController : Controller
    {
        public ActionResult sample()
        {   
            ViewBag.value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 15);
            return View();
        }
    }
}

Restricting calendar views

By defining the start and depth properties with different views, you can limit the drill-down and drill-up navigation available to the user. The Calendar will drill down to the view set in the depth property and drill up to the view set in the start property. Both properties accept a CalendarView enum value (Month, Year, or Decade), ordered as Month < Year < Decade.

The following example displays the Calendar in decade view, and allows you to select a date in month view.

Depth view should always be smaller than the start view. If the depth and start views are the same, the Calendar view remains unchanged.

@Html.EJS().Calendar("element").Value(@ViewBag.value).Depth(Syncfusion.EJ2.Calendars.CalendarView.Year).Start(Syncfusion.EJ2.Calendars.CalendarView.Decade).Render()
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public class CalendarController : Controller
    {
        public ActionResult sample()
        {   
            ViewBag.value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 15);
            return View();
        }
    }
}

View Sample in GitHub.