<Panel ux:Class="MonthCalendar">
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var moment = require("moment.js");
        calendar = require("calendar.js");

        var today = moment().utc().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;

        var table = calendar.build(year.value, month.value, selectedDate);

        exports.jumpToToday = () => {
            selectedDate = today;

            year.value = today.year();
            month.value = today.month();
            var monthValue1 = calendar.MONTH_NAMES[month.value];
            monthName.value = monthValue1;
            calendar.update(table, year.value, month.value, selectedDate);
        }

        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.
            selectedDate = item.data.date;

            console.log("Selected Date: " + JSON.stringify(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="4" Clicked="{prevYear}">
                    <Text Value="<<"  Alignment="Center" />
                </Panel>
                <Panel Dock="Left" Margin="4" Clicked="{prevMonth}">
                    <Text Value="<"  Alignment="Center"/>
                </Panel>
                <Panel Dock="Right" Margin="4" Clicked="{nextYear}">
                    <Text Value=">>"  Alignment="Center"/>
                </Panel>
                <Panel Dock="Right" Margin="4" Clicked="{nextMonth}">
                    <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>