You can customize properties of the date picker day cells using onBeforeCellRender event handler.

Properties that can be customized:

  • CSS class
  • HTML

JavaScript

Example:

javascript html5 date picker navigator day css class

<div id="nav"></div>

<script>

  const nav = new DayPilot.Navigator("nav", {
    // ...
    onBeforeCellRender: (args) => {
      if (args.cell.isCurrentMonth) {
          args.cell.cssClass = "current-month";
      }
    }
  });

  nav.init();

</script>

API

Tutorial

ASP.NET WebForms

Example

protected void DayPilotNavigator1_BeforeCellRender(object sender, DayPilot.Web.Ui.Events.Navigator.BeforeCellRenderEventArgs e)
{
  if (e.Start.DayOfWeek == DayOfWeek.Friday)
  {
      e.CssClass = "weekend";
  }
}

ASP.NET MVC

 
public class Dpn : DayPilotNavigator
{

    // ...

    protected override void OnBeforeCellRender(DayPilot.Web.Mvc.Events.Navigator.BeforeCellRenderArgs e)
    {
        if (e.Start == DateTime.Today.AddDays(1))
        {
            e.CssClass = "tomorrow";
        }
    }
}