How to create a customizable Javascript calendar using Wijmo 5 FlexGrid control.

Lately I’ve been converting to premium controls for all my UI needs, one of my favorite is Wijmo 5.  I’m not selling the controls :), I just use it, and so far I really like it.  In this post I will share with you one of its control, that is powerful enough, that you could make a calendar out of it.  The controls are expensive by the way at $495 per developer but its really worth it.

Before we begin creating the calendar, you must first download Wijmo using this link.  We shall be using only the evaluation version.  Once downloaded, import it in your project as shown in the image below:

b1

To use the control you need the following Javascript and CSS file below.  To change the theme of the control you just need to change the CSS file, right now we are using the standard theme.

<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" />

Now everything is set, its time to put in the HTML code for the UI.  As you can see below it is just a simple Twitter Bootstrap DIV layout, it is compose of two standard controls, Select and Button.

<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()">Get Calendar</button>
    </div>
</div>

<div class="row">
    <p class="lead">
        <div id="CalendarGrid" class="grid"></div>
    </p>
</div>

Once the UI HTML is ready, its time for the exciting part, the Javascript part :).  There are two functions for this project; MakeCalendarData – prepares the data of the calendar and MakeCalendarGrid – makes the calendar grid.

MakeCalendarData takes in two parameters, the Month and the Year.  In a nutshell, it returns an object called ObservableArray parse per day, e.g., Monday, Tuesday, etc.  which you can provide any content under the switch case routine.  The object return is not an ordinary Javascript array, its an observable array, a Knockout observable array, cool eh!  There is already a built-in Knockout object inside the Wijmo controls, you don’t need to manually code it!

    function MakeCalendarData(Month, Year) {
        var Sun = "", Mon = "", Tue = "", Wed = "", Thu = "", Fri = "", Sat = "";
        var data = new wijmo.collections.ObservableArray();

        // Get the start day, e.g., Monday=1, Tuesday=2, etc.
        var firstDay = new Date(Year, Month, 1);
        var startingDay = firstDay.getDay();

        // Get the month length
        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) { //FEB
            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;
    }

MakeCalendarGrid is a standard Wijmo FlexGrid initialization and customization.  First you make a collection view from the data created in your MakeCalendarData function, then you initialize the DOM.  The rest of the code is just a simple control formatting, just to look good :).

     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;
            }
        };
    }

Here is a sample screen shot of the calendar in production:

b2

That’s it!  You can get the full ASP.NET source code in Github using this link.  Happy coding and if you find this blog helpful, you can make the donation by clicking the Paypal button below.

Advertisements
About

Software developer living in the Philippines.

Posted in Javascript
6 comments on “How to create a customizable Javascript calendar using Wijmo 5 FlexGrid control.
  1. Jody says:

    I’ve featured this in a post we published about surprising uses for grids–great stuff here!

    • hgminerva says:

      Thanks Jody, I will be adding more Wijmo samples in the coming months, hoping you could get me some discount :), I am planning to buy one license for one of my site. Thanks

  2. Mark says:

    How did you get your FlexGrid completely flat?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Author

Harold Glenn P. Minerva
Software Developer / Tech Enthusiast
Living in the Philippines

View Harold Glenn Minerva's profile on LinkedIn

Instagram

Software Engineer - Seasonal and Range Trading Software. Magenta Trader is a powerful stock market visualization software that increases your probability of trading success.

Software Architect and Founder - Easyfis.com is a multi-tenant cloud-based Software-as-a-Service (SaaS) business app that caters to micro, small and medium trading businesses.

CTO and Co-Founder - We give your company the leverage by providing innovative software solutions products such as Point-of-Sales (POS), Financial Information System (FMIS), Payroll and DTR (HRIS), and many more.

%d bloggers like this: