Calendar Customization

You can customize the appearance of the whole calendar using CSS, and you can use the calendar's formatItem event to customize the appearance of specific dates.

For example, the calendar below uses a custom style to show weekends and holidays:

April 2025
SunMonTueWedThuFriSat
30 31 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 1 2 3
4 5 6 7 8 9 10
The current date is Tuesday, April 8, 2025.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// This file locates: "Scripts/Lesson/C1Input/CalendarCustomization.js".
c1.documentReady(function () {
    var theCalendar = wijmo.Control.getControl('#theCalendar');
    theCalendar.valueChanged.addHandler(function (s, e) {
        showCurrentDate();
    });
    theCalendar.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('theCalendarOutput');
        el.textContent = wijmo.Globalize.format(theCalendar.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;
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// This file locates: "Content/css/Lesson/C1Input/CalendarCustomization.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1InputController : Controller
    {
        // GET: CalendarCustomization
        public ActionResult CalendarCustomization()
        {
            return View();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h1>
    @Html.Raw(Resources.C1Input.CalendarCustomization_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.CalendarCustomization_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.CalendarCustomization_Text2)
</p>
@Html.C1().Calendar().Id("theCalendar")
<div>
    @Html.Raw(Resources.C1Input.CalendarCustomization_Text3)
</div>