WijMo.js 5.2使用FlexGrid实现日历

Index.cshtml

@{
    ViewBag.Title = "Home Page";
}
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/wijmo/controls/wijmo.min.js" type="text/javascript"></script>
<script src="/wijmo/controls/wijmo.input.min.js"></script>
<script src="/wijmo/controls/wijmo.grid.min.js" type="text/javascript"></script>
<script src="/wijmo/controls/wijmo.chart.min.js"></script>
<link href="/wijmo/styles/wijmo.min.css" rel="stylesheet" />
<br />
<br />
<div class="row">
    <div class="col-lg-2">
        <select id="WebinarMonth" class="form-control">
            <option value="0">January</option>
            <option value="1">February</option>
            <option value="2">March</option>
            <option value="3">April</option>
            <option value="4">May</option>
            <option value="5">June</option>
            <option value="6">July</option>
            <option value="7">August</option>
            <option value="8">September</option>
            <option value="9">October</option>
            <option value="10">November</option>
            <option value="11">December</option>
        </select>
    </div>
    <div class="col-lg-2">
        <select id="WebinarYear" class="form-control">
            <option value="2015">2015</option>
            <option value="2016">2016</option>
            <option value="2016">2017</option>
            <option value="2016">2018</option>
            <option value="2016">2019</option>
        </select>
    </div>
    <div class="col-lg-2">
        <button id="GetCalendar" type="submit" class="btn btn-primary btn-block" onclick="GetCalendar()">获取日历</button>
    </div>
</div>
<div class="row">
    <p class="lead">
        <div id="CalendarGrid" class="grid"></div>
    </p>
</div>
<script type="text/javascript">
    var CalendarData;
    var CalendarGrid;

    function MakeCalendarData(Month, Year) {
        var Sun = "", Mon = "", Tue = "", Wed = "", Thu = "", Fri = "", Sat = "";
        //var Sunevent = "事件1", Monevent = "事件2", Tueevent = "事件3", Wedevent = "事件4", Thuevent = "事件5", Frievent = "事件6", Satevent = "事件7";
        var data = new wijmo.collections.ObservableArray();

        //获取开始日期，例如, Monday=1, Tuesday=2, etc.
        var firstDay = new Date(Year, Month, 1);
        var startingDay = firstDay.getDay();

        //获取月份长度
        var cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        var monthLength = cal_days_in_month[Month];
        if (Month == 1) { //二月
            if ((Year % 4 == 0 && Year % 100 != 0) || Year % 400 == 0) {
                monthLength = 29;
            }
        }

        var day = 1;
        for (var i = 0; i < 9; i++) {
            for (var j = 0; j <= 6; j++) {
                if (day <= monthLength && (i > 0 || j >= startingDay)) {
                    switch (j) {
                        case 0:
                            Sun = day.toString();
                            break;
                        case 1:
                            Mon = day.toString();
                            break;
                        case 2:
                            Tue = day.toString();
                            break;
                        case 3:
                            Wed = day.toString();
                            break;
                        case 4:
                            Thu = day.toString();
                            break;
                        case 5:
                            Fri = day.toString();
                            break;
                        case 6:
                            Sat = day.toString();
                            break;
                    }
                    day++;
                }
            }

            data.push({
                Sunday: Sun,
                Monday: Mon,
                Tuesday: Tue,
                Wednesday: Wed,
                Thursday: Thu,
                Friday: Fri,
                Saturday: Sat,
            });

            if (day > monthLength) {
                break;
            }
            else {
                Sun = ""; Mon = ""; Tue = ""; Wed = ""; Thu = ""; Fri = ""; Sat = "";
            }
        }
        return data;
    }
    function MakeCalendarGrid(Month, Year) {

        CalendarData = new wijmo.collections.CollectionView(MakeCalendarData(Month, Year));

        CalendarData.pageSize = 5;

        CalendarGrid.dispose();
        CalendarGrid = new wijmo.grid.FlexGrid('#CalendarGrid');
        CalendarGrid.initialize({
            columns: [
                        {
                            "header": "Sunday",
                            "binding": "Sunday",
                            "width": "7*",
                            "allowSorting": false,
                            "isContentHtml": true,
                            "wordWrap": true
                        },
                        {
                            "header": "Monday",
                            "binding": "Monday",
                            "width": "7*",
                            "allowSorting": false,
                            "isContentHtml": true,
                            "wordWrap": true
                        },
                        {
                            "header": "Tuesday",
                            "binding": "Tuesday",
                            "width": "7*",
                            "allowSorting": false,
                            "isContentHtml": true,
                            "wordWrap": true
                        },
                        {
                            "header": "Wednesday",
                            "binding": "Wednesday",
                            "width": "7*",
                            "allowSorting": false,
                            "isContentHtml": true,
                            "wordWrap": true
                        },
                        {
                            "header": "Thursday",
                            "binding": "Thursday",
                            "width": "7*",
                            "allowSorting": false,
                            "isContentHtml": true
                        },
                        {
                            "header": "Friday",
                            "binding": "Friday",
                            "width": "7*",
                            "allowSorting": false,
                            "isContentHtml": true,
                            "wordWrap": true
                        },
                        {
                            "header": "Saturday",
                            "binding": "Saturday",
                            "width": "7*",
                            "allowSorting": false,
                            "isContentHtml": true,
                            "wordWrap": true
                        }
            ],
            autoGenerateColumns: false,
            itemsSource: CalendarData,
            isReadOnly: true,
            selectionMode: wijmo.grid.SelectionMode.Cell
        });
        CalendarGrid.trackChanges = true;
        CalendarGrid.itemFormatter = function (panel, r, c, cell) {
            if (panel.cellType == wijmo.grid.CellType.Cell) {
                var flex = panel.grid;
                flex.rows[r].height = 80;
            }
        };
    }
    function GetCalendar() {
        var m = parseInt($("#WebinarMonth").val());
        var y = parseInt($("#WebinarYear").val());

        MakeCalendarGrid(m, y);
    }

    $(document).ready(function () {
        CalendarGrid = new wijmo.grid.FlexGrid('#CalendarGrid');

        var d = new Date();
        var m = d.getMonth();
        var y = d.getFullYear();

        $("#WebinarMonth").val(m);
        $("#WebinarYear").val(y);

        MakeCalendarGrid(m, y);
    });
</script>

运行结果如图: