Fuse Basic Month Calendar Control

calendar.js

var Observable = require("FuseJS/Observable");
var moment = require("moment.js");

var DAY_NAMES = new Array(
    'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday',
    'Sunday'
)

var SHORT_DAY_NAMES = new Array(
    'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S'
)

var MONTH_NAMES = new Array(
    'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
    'September', 'October', 'November', 'December'
)

var SHORT_MONTH_NAMES = new Array(
    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov',
    'Dec'
)

function build(year, month, selectedDate) {
    var table = [];

    buildHeader(table);

    //init
    for (i = 0; i < 6; ++i) {
        var row = [];
        for (var j = 0; j < 7; ++j) {
            var cell = {
                title: Observable(""),
                isSelectable: Observable(false),
                isSelected: Observable(false),
                isWeekend: (j == 0 || j == 6),
                date: moment(new Date(year, month, 1, 0, 0, 0, 0)).utc().startOf('day'),
            }

            row.push(cell);
        }

        table.push(row);
    }

    update(table, year, month, selectedDate);

    return table;
}

function buildHeader(table) {
    var row = [];
    for (var i = 0; i < 7; ++i) {
        var cell = {
            title: SHORT_DAY_NAMES[i],
            isSelectable: false,
            isHeader: true,
            isWeekend: (i == 0 || i == 6),
        }
        row.push(cell);
    }

    table.push(row);
}

function getDaysInMonth(y, m) {
    return /8|3|5|10/.test(--m) ? 30 : m == 1 ? (!(y % 4) && y % 100) || !(y % 400) ? 29 : 28 : 31;
}

function update(table, year, month, selectedDate) {
    var date = new Date(year, month, 1, 0, 0, 0, 0);
    var firstDayOfMonth = date.getDay();
    console.log("dayOfWeek " + firstDayOfMonth + ", for year: " + year + ", and month " + MONTH_NAMES[month]);

    var totalDays = getDaysInMonth(year, month + 1);
    console.log("number of days in month: " + totalDays);

    var started = false;
    var num = 1;
    for (i = 1; i < 7; ++i) { //1 because need to ignore header
        var row = [];

        for (var j = 0; j < 7; ++j) {
            if (!started && j == firstDayOfMonth)
                started = true;

            if (num > totalDays || !started) {
                var cell = table[i][j];
                cell.title.value = "";
                cell.isSelectable.value = false;
                cell.isSelected.value = false;
            }
            else {
                var cell = table[i][j];
                cell.title.value = num.toString();
                cell.isSelectable.value = true;
                cell.isSelected.value = false;
                cell.date = moment(new Date(year, month, num, 0, 0, 0, 0)).local().startOf('day');

                if (cell.date.isSame(selectedDate)) {
                    cell.isSelected.value = true;
                }

                num++;
            }

        }
    }
}

exports.build = build;
exports.update = update;
exports.MONTH_NAMES = MONTH_NAMES;
exports.SHORT_MONTH_NAMES = SHORT_MONTH_NAMES;

MonthCalendar.ux

<Panel ux:Class="MonthCalendar">
    <object ux:Property="CurrentDate" />

    <JavaScript>
        var self = this;
        var Observable = require("FuseJS/Observable");
        var moment = require("moment.js");        
        calendar = require("calendar.js");

        var today = moment().local().startOf('day'); 

        var year = Observable(today.year());
        var month = Observable(today.month()); //0-indexed
        var monthValue = calendar.MONTH_NAMES[month.value];
        var monthName = Observable(monthValue);

        var selectedDate = today;

        self.CurrentDate.onValueChanged(module, function(item) {
            if(self.CurrentDate.value) {
                doSelectDate(self.CurrentDate.value.value);
            }
		});
        
        var table = calendar.build(year.value, month.value, selectedDate);

        exports.jumpToToday = () => {
            doSelectDate(today);
        }

        exports.nextYear = () => {
            year.value = year.value +1; 
            calendar.update(table, year.value, month.value, selectedDate);
        }

        exports.prevYear = () => {
            year.value = year.value -1; 
            calendar.update(table, year.value, month.value, selectedDate);
        }

        exports.nextMonth = () => {
            var val = month.value +1;
            if(val > 11) {
                val = 0;
                year.value = year.value +1; 
            }
            month.value = val;
            var monthValue1 = calendar.MONTH_NAMES[val];
            monthName.value = monthValue1;

            calendar.update(table, year.value, month.value, selectedDate);
        }
        exports.prevMonth = () => {
            var val = month.value -1;
            if(val < 0) {
                val = 11;
                year.value = year.value -1; 
            }
            month.value = val;
            var monthValue1 = calendar.MONTH_NAMES[val];
            monthName.value = monthValue1;

            calendar.update(table, year.value, month.value, selectedDate);
        };
        exports.selectDate = (item) => {
            //there has to be at least one date selected.
            doSelectDate(item.data.date);
        }

        function doSelectDate(date) {
            selectedDate = date;

            year.value = date.year();
            month.value = date.month();
            var monthValue1 = calendar.MONTH_NAMES[month.value];
            monthName.value = monthValue1;

            if(self.CurrentDate && self.CurrentDate.value)
                self.CurrentDate.value.value = selectedDate;

            calendar.update(table, year.value, month.value, selectedDate);
        }

        exports.table = table;
        exports.year = year;
        exports.monthName = monthName;
    </JavaScript>

        <StackPanel Width="80%" Alignment="Center">
            <StackPanel Orientation="Horizontal"  Background="#eeeeee" Padding="4" ContentAlignment="Center">
                <Text Value="{monthName}" Alignment="Center" Margin="4"/>
                <Text Value="{year}" Alignment="Center" Margin="4"/>
            </StackPanel>    
            <DockPanel Background="#eeeeee">
                <Panel Dock="Left" Margin="8" Clicked="{prevYear}" Width="30" HitTestMode="LocalBounds">
                    <Text Value="<<"  Alignment="Center" />
                </Panel>
                <Panel Dock="Left" Margin="8" Clicked="{prevMonth}" Width="30" HitTestMode="LocalBounds">
                    <Text Value="<"  Alignment="Center"/>
                </Panel>
                <Panel Dock="Right" Margin="8" Clicked="{nextYear}" Width="30" HitTestMode="LocalBounds">
                    <Text Value=">>"  Alignment="Center"/>
                </Panel>
                <Panel Dock="Right" Margin="8" Clicked="{nextMonth}" Width="30" HitTestMode="LocalBounds">
                    <Text Value=">"  Alignment="Center"/>
                </Panel>

                <Panel Margin="4" Clicked="{jumpToToday}">
                    <Text Value="Today" Alignment="Center" />
                </Panel>
            </DockPanel>
            <Each Items="{table}">
                <StackPanel>
                    <Grid ColumnCount="7" Margin="0">
                        <Each Items="{}">
                            <WhileTrue Value="{isHeader}">
                                <Panel Background="#999999" Margin="0" Padding="4">
                                <Text Value="{title}" Alignment="Center"/>
                            </Panel>
                            </WhileTrue>
                            <WhileFalse Value="{isHeader}"  >
                                <Panel Margin="0" Padding="4" Clicked="{selectDate}">
                                    <WhileTrue Value="{isSelected}">
                                    
                                    <Circle  Width="24" Height="24" Color="#0f0">
                                            <Stroke Width="1">
                                                <SolidColor Color="#040" />
                                            </Stroke>
                                        <Text Value="{title}" Alignment="Center"/>
                                    </Circle>
                                    
                                    </WhileTrue>
                                    <WhileFalse Value="{isSelected}">
                                            <Text Value="{title}" Alignment="Center"/>
                                    </WhileFalse>
                                </Panel>
                            </WhileFalse>
                            
                        </Each>
                    </Grid>
                </StackPanel>
            </Each>
        </StackPanel>
</Panel>