Your search did not match any results.
Calendar

Overview

Documentation
The Calendar is a widget that displays a calendar and allows an end user to select the required date within a specified date range.
<div id="calendar-demo"> <div id="example"> @(Html.DevExtreme().Calendar() .ID("calendar-container") .Value(DateTime.Now) .Disabled(false) .ZoomLevel(CalendarZoomLevel.Month) .OnValueChanged("calendar_valueChanged") ) </div> <div class="options"> @(Html.DevExtreme().CheckBox() .Text("Specified min value") .OnValueChanged("minValue_changed") .ElementAttr(new Dictionary<string, object> { { "class", "option" } }) ) @(Html.DevExtreme().CheckBox() .Text("Specified max value") .OnValueChanged("maxValue_changed") .ElementAttr(new Dictionary<string, object> { { "class", "option" } }) ) @(Html.DevExtreme().CheckBox() .Text("Monday as the first day of a week") .OnValueChanged("firstDayOfWeek_changed") .ElementAttr(new Dictionary<string, object> { { "class", "option" } }) ) @(Html.DevExtreme().CheckBox() .Text("Use the Custom Cell Template") .Value(false) .OnValueChanged("useCustomTemplate") .ElementAttr(new Dictionary<string, object> { { "class", "option" } }) ) @(Html.DevExtreme().CheckBox() .Text("Disabled") .OnValueChanged("disabledState_changed") .ElementAttr(new Dictionary<string, object> { { "class", "option" } }) ) </div> <div class="dx-fieldset bottom-option"> <div class="dx-field"> <div class="dx-field-label">Zoom level:</div> <div class="dx-field-value"> @(Html.DevExtreme().SelectBox() .DataSource(new string[] { "month", "year", "decade", "century" }) .Value("month") .OnValueChanged("zoomLevel_changed") ) </div> </div> </div> <div class="dx-fieldset bottom-option"> <div class="dx-field"> <div class="dx-field-label">Selected date:</div> <div class="dx-field-value"> @(Html.DevExtreme().DateBox() .ID("selected-date") .Value(DateTime.Now) .OnValueChanged("selectedDate_changed") ) </div> </div> </div> </div> <script> var date = new Date().getTime(); function getCalendarInstance() { return $("#calendar-container").dxCalendar("instance"); } function getCellTemplate(data) { var dayNumber = data.date.getDay(), cssClass = ""; if(dayNumber === 0 || dayNumber === 6) cssClass = "weekend"; $.each([[1, 0], [4, 6], [25, 11]], function (_, item) { if(data.date.getDate() === item[0] && data.date.getMonth() === item[1]) { cssClass = "holyday"; return false; } }); return "<span class='" + cssClass + "'>" + data.text + "</span>"; } function calendar_valueChanged(data) { $("#selected-date").dxDateBox("instance").option("value", data.value); } function minValue_changed(data) { var calendar = getCalendarInstance(); if(data.value) { calendar.option("min", new Date(date - 1000 * 60 * 60 * 24 * 3)); } else { calendar.option("min", undefined); } } function maxValue_changed(data) { var calendar = getCalendarInstance(); if(data.value) { calendar.option("max", new Date(date + 1000 * 60 * 60 * 24 * 3)); } else { calendar.option("max", undefined); } } function firstDayOfWeek_changed(data) { var calendar = getCalendarInstance(); if(data.value) { calendar.option("firstDayOfWeek", 1); } else { calendar.option("firstDayOfWeek", 0); } } function useCustomTemplate(data) { getCalendarInstance().option("cellTemplate", data.value ? getCellTemplate : "cell"); } function disabledState_changed(data) { getCalendarInstance().option("disabled", data.value); } function zoomLevel_changed(data) { getCalendarInstance().option("zoomLevel", data.value); } function selectedDate_changed(data) { getCalendarInstance().option("value", data.value); } </script>
using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class CalendarController : Controller { public ActionResult Overview() { return View(); } } }
#example { display: inline-block; margin-bottom: 10px; width: 100%; max-width: 385px; } #calendar-container { margin: auto; } .options { display: inline-block; vertical-align: top; margin-left: 10px; } .options > .option { display: block; margin-bottom: 5px; } .bottom-option { margin-top: 8px; margin-bottom: 8px; } .dx-calendar-cell:not(.dx-calendar-other-month) .weekend, .dx-calendar-cell:not(.dx-calendar-other-month) .holyday { text-shadow: none; font-weight: bold; } .dx-calendar-cell:not(.dx-calendar-other-month) .weekend { color: #3030FF; } .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .weekend { color: #8080FF; } .dx-calendar-cell:not(.dx-calendar-other-month) .holyday { color: #FF3030; } .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .holyday { color: #FF8080; }