InputDate Customization

You can customize the appearance of the InputDate and its drop-down calendar using CSS. You can also use the calendar's formatItem event to customize the appearance of specific dates in the drop-down calendar.

For example, the InputDate below applies custom styles to weekends and holidays:

The current date is Monday, April 7, 2025.

// This file locates: "Scripts/Lesson/C1Input/InputDateCustomization.js".
c1.documentReady(function () {
    var theInputDate = wijmo.Control.getControl('#theInputDate');
    theInputDate.valueChanged.addHandler(function (s, e) {
        showCurrentDate();
    });
 
    // format items in the InputDate's calendar:
    var calendar = theInputDate.calendar;
    calendar.formatItem.addHandler(function (s, e) { // apply styles to weekends and holidays
        var weekday = e.data.getDay(),
            holiday = getHoliday(e.data);
        wijmo.toggleClass(e.item, 'date-weekend', weekday == 0 || weekday == 6);
        wijmo.toggleClass(e.item, 'date-holiday', holiday != null);
        e.item.title = holiday;
    }
      );
 
    // show the currently selected date
    function showCurrentDate() {
        var el = document.getElementById('theInputDateOutput');
        el.textContent = wijmo.Globalize.format(theInputDate.value, 'D');
    }
    showCurrentDate();
 
    // gets the holiday for a given date
    var holidays = {
        '1/1': 'New Year\'s Day',
        '6/14': 'Flag Day',
        '7/4': 'Independence Day',
        '11/11': 'Veteran\'s Day',
        '12/25': 'Christmas Day',
        '1/3/1': 'Martin Luther King\'s Birthday', // third Monday in January
        '2/3/1': 'Washington\'s Birthday', // third Monday in February
        '5/3/6': 'Armed Forces Day', // third Saturday in May
        '9/1/1': 'Labor Day', // first Monday in September
        '10/2/1': 'Columbus Day', // second Monday in October
        '11/4/4': 'Thanksgiving Day', // fourth Thursday in November
    };
    function getHoliday(date) {
        var day = date.getDate(),
            month = date.getMonth() + 1,
            holiday = holidays[month + '/' + day];
        if (!holiday) {
            var weekDay = date.getDay(),
                weekNum = Math.floor((day - 1) / 7) + 1;
            holiday = holidays[month + '/' + weekNum + '/' + weekDay];
        }
        return holiday;
    }
});

// This file locates: "Content/css/Lesson/C1Input/InputDateCustomization.css".
.wj-calendar {
  max-width: 21em;
}
 
.wj-calendar .wj-header {
  color: white;
  background: #808080;
}
 
.wj-calendar .date-holiday:not(.wj-state-selected) {
  font-weight: bold;
  color: #008f22;
  background: #f0fff0;
  outline: 2pt solid #008f22;
}
 
.wj-calendar .date-weekend:not(.wj-state-selected) {
  background-color: #d8ffa6;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1InputController : Controller
    {
        // GET: InputDateCustomization
        public ActionResult InputDateCustomization()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Input.InputDateCustomization_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.InputDateCustomization_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.InputDateCustomization_Text2)
</p>
@Html.C1().InputDate().Id("theInputDate")
<div>
    @Html.Raw(Resources.C1Input.InputDateCustomization_Text3)
</div>