<?xml version="1.0" encoding="utf-8"?>
<!--

////////////////////////////////////////////////////////////////////////////////
//
//    Copyright 2014 Ardisia Labs LLC. All Rights Reserved.
//
//    This file is licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////

-->
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"  
          xmlns:mx="library://ns.adobe.com/flex/mx"
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:calendar="ardisia.scheduling.calendar.*"
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          xmlns:calendarClasses="components.shared.calendarClasses.*" 
          xmlns:datePicker="ardisia.scheduling.datePicker.*" 
          xmlns:calendarPicker="components.shared.calendarClasses.calendarPicker.*" 
          xmlns:colorPicker="ardisia.components.colorPicker.*" 
          xmlns:calendarList="components.shared.calendarClasses.calendarList.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import spark.events.IndexChangeEvent;
            
            import ardisia.scheduling.dataTypes.CalendarDefinitionData;
            import ardisia.scheduling.dataTypes.SchedulingData;
            
            import components.shared.calendarClasses.calendarList.skins.CalendarListSkin;
            import components.shared.calendarClasses.calendarPicker.skins.CalendarPickerSkin;
            import components.shared.calendarClasses.skins.CalendarButtonBar;
            import components.shared.calendarClasses.skins.LeftArrowButtonSkin;
            import components.shared.calendarClasses.skins.RightArrowButtonSkin;
            
            //----------------------------------
            //     variables
            //----------------------------------
            
            protected var calendars:Array;
            
            protected var listenersAdded:Boolean;
            
            //----------------------------------
            //     methods
            //----------------------------------
            
            public function creationComplete():void
            {
                demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, viewstackChangeHandler);
                
                // load sample data
                calendars = [];
                
                // work calendar
                var workCalendar:CalendarDefinitionData = new CalendarDefinitionData();
                workCalendar.title = "Work";
                workCalendar.color = 0x662C91;
                calendars.push(workCalendar);
                
                // personal calendar
                var personalCalendar:CalendarDefinitionData = new CalendarDefinitionData();
                personalCalendar.title = "Personal";
                personalCalendar.color = 0xF37D22;
                calendars.push(personalCalendar);
                
                // data stub
                var today:Date = new Date();
                var items:Array = [];
                
                for (var i:int = 0; i < 60; i++)
                {
                    // all day event
                    var newItem:SchedulingData = generateCalendarData(true);
                    
                    var day:int = Math.random() * 77;
                    newItem.dtStart = new Date(today.fullYear, today.month - 1, 
                        today.date + day);
                    newItem.dtEnd = new Date(today.fullYear, today.month - 1, 
                        today.date + day + 1);
                    newItem.allDay = true;
                    items.push(newItem);
                    
                    // timed
                    newItem = generateCalendarData(false);
                    
                    day = Math.random() * 90;
                    var hour:int = 8 + Math.random() * 7;
                    var duration:int = 1 + Math.random() * 5;
                    newItem.dtStart = new Date(today.fullYear, today.month - 1, 
                        today.date + day, hour);
                    newItem.dtEnd = new Date(today.fullYear, today.month - 1, 
                        today.date + day, duration + hour);
                    newItem.allDay = false;
                    items.push(newItem);
                }
                
                // make sure that each month has 1 day per week with overflow
                for (i = 0; i < 40; i++)
                {
                    day = i * 7 + Math.random() * 7;
                    for (var j:int = 0; j < 0; j++)
                    {
                        // all day event
                        newItem = generateCalendarData(true);
                        
                        newItem.dtStart = new Date(today.fullYear, today.month - 1, 
                            today.date + day);
                        newItem.dtEnd = new Date(today.fullYear, today.month - 1, 
                            today.date + day + 1);
                        newItem.allDay = true;
                        items.push(newItem);
                    }
                }
                
                // add 1 multi-day event per week
                for (i = 0; i < 40; i++)
                {
                    newItem = generateCalendarData(true);
                    
                    day = i * 7 + Math.random() * 7;
                    duration = 2 + int(Math.random() * 2);
                    newItem.dtStart = new Date(today.fullYear, today.month - 1, 
                        today.date + day);
                    newItem.dtEnd = new Date(today.fullYear, today.month - 1, 
                        today.date + day + duration);
                    newItem.allDay = true;
                    
                    items.push(newItem);
                }
                for (i = 0; i < 4; i++)
                {
                    newItem = generateCalendarData(false);
                    
                    day = i * 7 + Math.random() * 7;
                    hour = 8 + Math.random() * 5;
                    duration = 1 + Math.random() * 5;
                    newItem.dtStart = new Date(today.fullYear, today.month - 1, 
                        today.date + day, hour);
                    newItem.dtEnd = new Date(today.fullYear, today.month - 1, 
                        today.date + day, duration + hour);
                    newItem.allDay = false;
                    newItem.freq = "weekly";
                    items.push(newItem);
                }
                
                interactionManager.calendars = calendars;
                
                calendar.dataProvider = new ArrayCollection(items);
                
                // apply subcolumns
                calendarColumn.subColumnsCalendars = new ArrayCollection(calendars);
                
                displayModeButtonBar.selectedIndex = 2;
                displayModeButtonBar.dispatchEvent(new IndexChangeEvent(IndexChangeEvent.CHANGE, false, false, -1, 2));
                
                viewstackChangeHandler();
                
                demoAppWrapper.expandingContainer2.closeContainer();
                demoAppWrapper.expandingContainer2.enabled = false;
                
                validateNow();
                
                interactionManager.updateCalendar();
            }
            
            protected function generateCalendarData(allDay:Boolean):SchedulingData
            {
                var rand:int = int(Math.random() * 100);
                var schedulingData:SchedulingData = new SchedulingData();
                
                schedulingData.calendar = rand < 75 ? calendars[0] : calendars[1];
                
                // allday
                if (allDay)
                {
                    // work calendar
                    if (schedulingData.calendar == calendars[0])
                    {
                        if (rand < 10)
                        {
                            schedulingData.summary = "Corporate retreat";
                            schedulingData.location = "Woods";
                            schedulingData.description = "Falling exercises.";
                        }
                        else if (rand < 20)
                        {
                            schedulingData.summary = "Conference";
                            schedulingData.location = "conference center";
                            schedulingData.description = "New techniques in our business.";
                        }
                        else if (rand < 30)
                        {
                            schedulingData.summary = "Budget Report";
                            schedulingData.description = "Try to finish.";
                        }    
                        else if (rand < 40)
                        {
                            schedulingData.summary = "Sales Report";
                            schedulingData.description = "Try to finish.";
                        }
                        else if (rand < 50)
                        {
                            schedulingData.summary = "Jane in Accounting - Birthday";
                            schedulingData.description = "Tell her happy birthday.";
                        }
                        else if (rand < 60)
                        {
                            schedulingData.summary = "Taco Day In Cafeteria";
                            schedulingData.location = "cafeteria";
                            schedulingData.description = "Skip bagged lunch.";
                        }
                        else if (rand < 70)
                        {
                            schedulingData.summary = "Fill Out Evaluation Forms";
                        }
                        else if (rand < 80)
                        {
                            schedulingData.summary = "Pickup Paycheck from HR";
                        }
                        else if (rand < 90)
                        {
                            schedulingData.summary = "Train Intern";
                            schedulingData.location = "third floor";
                            schedulingData.description = "Find time to train in the new intern.";
                        }
                        else if (rand <= 100)
                        {
                            schedulingData.summary = "Update Dashboard";
                        }
                    }
                        
                    // personal calendar
                    else
                    {
                        rand = int(Math.random() * 100);
                        
                        if (rand < 10)
                        {
                            schedulingData.location = "Home";
                            schedulingData.summary = "Jogging";
                            schedulingData.description = "Jog at least 5 miles today.";
                        }    
                        else if (rand < 20)
                        {
                            schedulingData.summary = "Garden";
                            schedulingData.description = "Get rid of weeds around roses.";
                        }
                        else if (rand < 30)
                        {
                            schedulingData.summary = "Trash Pickup";
                        }
                        else if (rand < 40)
                        {
                            schedulingData.summary = "Call parents";
                        }
                        else if (rand < 50)
                        {
                            schedulingData.summary = "Travel";
                            schedulingData.location = "Paris, France";
                            schedulingData.description = "See the Louvre.";
                        }
                        else if (rand < 60)
                        {
                            schedulingData.summary = "Festival";
                            schedulingData.location = "Downtown";
                        }
                        else if (rand < 70)
                        {
                            schedulingData.summary = "Change Oil";
                            schedulingData.description = "Buy new oil filter.";
                        }
                        else if (rand < 80)
                        {
                            schedulingData.summary = "Study";
                        }
                        else if (rand < 90)
                        {
                            schedulingData.summary = "Old Friend in town";
                            schedulingData.description = "College buddy.";
                        }
                        else if (rand <= 100)
                        {
                            schedulingData.summary = "Cook Dinner";
                            schedulingData.description = "Try new recipe.";
                        }
                    }
                }
                // timed
                else
                {
                    // work calendar
                    if (schedulingData.calendar == calendars[0])
                    {
                        if (rand < 10)
                        {
                            schedulingData.summary = "Meeting";
                            schedulingData.location = "Conference Room A";
                            schedulingData.description = "Bill will be presenting q1 financials.";
                        }
                        else if (rand < 20)
                        {
                            schedulingData.summary = "Downtown Meeting";
                            schedulingData.location = "Downtown";
                        }
                        else if (rand < 30)
                        {
                            schedulingData.summary = "Warehouse Meeting";
                            schedulingData.location = "Warehouse";
                        }
                        else if (rand < 40)
                        {
                            schedulingData.summary = "Call sales rep";
                            schedulingData.location = "Conference room";
                        }
                        else if (rand < 50)
                        {
                            schedulingData.summary = "Pick up consultant";
                            schedulingData.location = "Airport";
                            schedulingData.description = "New consultant in town.";
                        }
                        else if (rand < 60)
                        {
                            schedulingData.summary = "Continuing Education Class";
                            schedulingData.location = "Rm. 335";
                            schedulingData.description = "CLE #101";
                        }
                        else if (rand < 70)
                        {
                            schedulingData.summary = "Talk to HR";
                            schedulingData.description = "Want more money";
                        }
                        else if (rand < 80)
                        {
                            schedulingData.summary = "Catch up on Emails";
                        }
                        else if (rand < 90)
                        {
                            schedulingData.summary = "Visit Factory Floor";
                            schedulingData.location = "Factory Floor";
                            schedulingData.description = "Look into production glitches.";
                        }
                        else if (rand <= 100)
                        {
                            schedulingData.summary = "Distribution Center";
                            schedulingData.location = "Check in.";
                        }
                    }
                        
                    // personal calendar
                    else
                    {
                        rand = int(Math.random() * 100);
                        
                        if (rand < 10)
                        {
                            schedulingData.summary = "Workout";
                            schedulingData.location = "Gym";
                            schedulingData.description = "Upper body and cardio.";
                        }
                        else if (rand < 20)
                        {
                            schedulingData.summary = "Go To Movie";
                            schedulingData.location = "Theater";
                            schedulingData.description = "New blockbuster.";
                        }
                        else if (rand < 30)
                        {
                            schedulingData.summary = "Watch TV Show";
                        }
                        else if (rand < 40)
                        {
                            schedulingData.summary = "Board game";
                            schedulingData.location = "Jill's House";
                            schedulingData.description = "Monopoly";
                        }
                        else if (rand < 50)
                        {
                            schedulingData.summary = "Pickup Basketball";
                            schedulingData.location = "Park";
                        }
                        else if (rand < 60)
                        {
                            schedulingData.summary = "Walk Dog";
                            schedulingData.location = "Park";
                        }
                        else if (rand < 70)
                        {
                            schedulingData.summary = "Clean House";
                            schedulingData.description = "Getting messy.";
                        }
                        else if (rand < 80)
                        {
                            schedulingData.summary = "Scottish Festival";
                            schedulingData.location = "Walnut Creek";
                            schedulingData.description = "Don't forget to see herding dogs.";
                        }
                        else if (rand < 90)
                        {
                            schedulingData.summary = "Anniversary Meal";
                            schedulingData.location = "Guiginos";
                        }
                        else if (rand <= 100)
                        {
                            schedulingData.summary = "Cooking Class";
                            schedulingData.location = "CLE Building";
                        }
                    }
                }
                
                return schedulingData;
            }
            
            //----------------------------------
            //     event handlers
            //----------------------------------
            
            protected function viewstackChangeHandler(event:IndexChangeEvent = null):void
            {
                switch (demoAppWrapper.viewstack.selectedIndex)
                {
                    
                    case 0:
                        demoAppWrapper.expandingContainer1.enabled = true;
                        demoAppWrapper.expandingContainer1.openContainer();
                        demoAppWrapper.expandingContainer2.enabled = false;
                        demoAppWrapper.expandingContainer2.closeContainer();
                        
                        interactionManager.calendar = calendar;
                        interactionManager.calendarList = calendarList;
                        interactionManager.dateDisplay = dateDisplayLabel;
                        interactionManager.calendarPicker = calendarPicker;
                        interactionManager.datePicker = datePicker;
                        interactionManager.addNewButton = addNewButton;
                        interactionManager.incrementDisplayedDatesButton = incrementDisplayedDatesButton;
                        interactionManager.decrementDisplayedDatesButton = decrementDisplayedDatesButton;
                        interactionManager.displayModeButtonBar = displayModeButtonBar;
                        interactionManager.disableGridLabelDayZoom = false;
                        
                        break;
                    
                    case 1:
                        demoAppWrapper.expandingContainer1.enabled = false;
                        demoAppWrapper.expandingContainer1.closeContainer();
                        demoAppWrapper.expandingContainer2.enabled = true;
                        demoAppWrapper.expandingContainer2.openContainer();
                        
                        interactionManager.calendar = calendarColumn;
                        interactionManager.calendarList = null;
                        interactionManager.dateDisplay = null;
                        interactionManager.calendarPicker = null;
                        interactionManager.datePicker = null;
                        interactionManager.addNewButton = columnAddNewButtonGridExample;
                        interactionManager.incrementDisplayedDatesButton = null;
                        interactionManager.decrementDisplayedDatesButton = null;
                        interactionManager.displayModeButtonBar = null;
                        interactionManager.disableGridLabelDayZoom = true;
                        
                        break;
                    
                    case 2:
                        demoAppWrapper.expandingContainer1.enabled = false;
                        demoAppWrapper.expandingContainer1.closeContainer();
                        demoAppWrapper.expandingContainer2.enabled = true;
                        demoAppWrapper.expandingContainer2.openContainer();
                        
                        interactionManager.calendar = calendarGrid;
                        interactionManager.calendarList = null;
                        interactionManager.dateDisplay = null;
                        interactionManager.calendarPicker = null;
                        interactionManager.datePicker = null;
                        interactionManager.addNewButton = gridAddNewButtonGridExample;
                        interactionManager.incrementDisplayedDatesButton = null;
                        interactionManager.decrementDisplayedDatesButton = null;
                        interactionManager.displayModeButtonBar = null;
                        interactionManager.disableGridLabelDayZoom = true;
                        
                        break;
                    
                }
            }
            
            protected function subColumnCalendarsChangeHandler(event:Event):void
            {
                switch (event.currentTarget)
                {
                    
                    case columnSubColumnCalendarsSelect:
                        var enabled:Boolean = columnSubColumnCalendarsSelect.selected;
                        if (!enabled)
                        {
                            calendarColumn.subColumnsCalendars = null
                        }
                        else
                        {
                            calendarColumn.subColumnsCalendars = new ArrayCollection(calendars);
                        }
                        
                        break;
                    
                }
            }
            
            protected function removedFromStageHandler(event:Event):void
            {
                
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
        <calendarClasses:CalendarInteractionManager id="interactionManager"/>
        
    </fx:Declarations>
    
    <!-- states -->
    <s:states>
        <s:State name="stockholm" />
        <s:State name="london" />
        <s:State name="spark" />
    </s:states>
    
    <!-- application -->
    <containers:DemoApplicationWrapper id="demoAppWrapper" 
                                       width="100%" height="100%"
                                       westRegionTitle="Calendar Description"
                                       description="A calendar.&#13;&#13;This calendar is highly performant and designed to be capable of displaying large numbers of item renderers at once. Also, the Ardisia Calendar supports a massive amount of customization."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:expandingContainerContent>
            
            <!--- expanding container #1 -->
            <data:ExpandingContainerData>
                <data:label>Date &amp; Calendar Pickers</data:label>
                <data:content>
                    <datePicker:DatePicker id="datePicker" 
                                           width="275" height="200" 
                                           firstDayOfWeek="1"/>
                    <calendarPicker:CalendarPicker id="calendarPicker"
                                                   width="100%"
                                                   skinClass="components.shared.calendarClasses.calendarPicker.skins.CalendarPickerSkin"/>
                </data:content>
            </data:ExpandingContainerData>
            
            <!--- expanding container #2 -->
            <data:ExpandingContainerData>
                <data:label>API</data:label>
                <data:content>
                    <s:FormHeading label="Displayed Days of the Week"/>
                    <s:FormItem label="Days:">
                        <s:CheckBox id="showMondaySelect" 
                                    label="Monday" 
                                    selected="true"/>
                        <s:CheckBox id="showTuesdaySelect" 
                                    label="Tuesday" 
                                    selected="true"/>
                        <s:CheckBox id="showWednesdaySelect" 
                                    label="Wednesday" 
                                    selected="true"/>
                        <s:CheckBox id="showThursdaySelect" 
                                    label="Thursday" 
                                    selected="true"/>
                        <s:CheckBox id="showFridaySelect" 
                                    label="Friday" 
                                    selected="true"/>
                        <s:CheckBox id="showSaturdaySelect" 
                                    label="Saturday" 
                                    selected="true"/>
                        <s:CheckBox id="showSundaySelect" 
                                    label="Sunday" 
                                    selected="true"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Select what days to display for all display modes."/>
                        </s:helpContent>
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"
                                           paddingTop="5" paddingBottom="5"/>
                    <s:FormHeading label="Selection &amp; Dragging"/>
                    <s:FormItem label="Multi Select:">
                        <s:CheckBox id="allowMultipleSelectionSelect" 
                                    selected="true"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="True to enable multiple selection. Hold the SHIFT or CTRL key to select multiple item renderers at once."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Drag Enabled:">
                        <s:CheckBox id="dragEnabledSelect" 
                                    selected="true"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Enables or disables item renderer dragging."/>
                        </s:helpContent>
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"
                                           paddingTop="5" paddingBottom="5"/>
                    <s:FormHeading label="Item Renderer Margins"/>
                    <s:FormItem label="Margin Left:">
                        <s:HSlider id="itemMarginLeftSelect" 
                                   width="100"
                                   value="1" minimum="-10" maximum="10" />
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Left margin for the available space for renderer layout"/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Margin Right:">
                        <s:HSlider id="itemMarginRightSelect" 
                                   width="100"
                                   value="1" minimum="-10" maximum="10" />
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Right margin for the available space for renderer layout."/>
                        </s:helpContent>
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"
                                           paddingTop="5" paddingBottom="5"/>
                    <s:FormHeading label="Background"/>
                    <s:FormItem label="Color:">
                        <colorPicker:ColorPicker id="backgroundColorSelect"
                                                 showColorSpacePicker="true" enableOutsideHoverColorSelect="true"
                                                 selectedColor="#FFFFFF"/>
                    </s:FormItem>
                    <s:FormItem label="Alpha:">
                        <s:HSlider id="backgroundAlphaSelect"
                                   width="100" 
                                   value="1" minimum="0" maximum="1" snapInterval="0" />
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"
                                           paddingTop="5" paddingBottom="5"/>
                    <s:FormHeading label="Grid Line Colors"/>
                    <s:FormItem label="Primary:">
                        <colorPicker:ColorPicker id="primaryGridLineColorSelect" 
                                                 showColorSpacePicker="true" enableOutsideHoverColorSelect="true"
                                                 selectedColor="#C0C0C0" />
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Color of the primary lines for the grid and the time lines."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Secondary:">
                        <colorPicker:ColorPicker id="secondaryGridLineColorSelect" 
                                                 showColorSpacePicker="true" enableOutsideHoverColorSelect="true"
                                                 selectedColor="#CDCDCD" />
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Color of the secondary lines for the grid and time lines."/>
                        </s:helpContent>
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"
                                           paddingTop="5" paddingBottom="5"/>
                    <s:FormHeading label="Context Colors"/>
                    <s:FormItem label="Today:">
                        <colorPicker:ColorPicker id="todayFillColorSelect" 
                                                 showColorSpacePicker="true" enableOutsideHoverColorSelect="true"
                                                 selectedColor="#E1F0FF" />
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Fill color for today's date."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Selected:">
                        <colorPicker:ColorPicker id="selectedPeriodFillColorSelect" 
                                                 showColorSpacePicker="true" enableOutsideHoverColorSelect="true"
                                                 selectedColor="#EEEEEE" />
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Fill color for selected period."/>
                        </s:helpContent>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Full Calendar Example</data:tabLabel>
                <data:exampleDescription>Full featured example of the Ardisia Calendar component. Fully integrated into the interaction manager, date picker, calendar picker, and a display mode selector.</data:exampleDescription>
                <data:toolbarContent>
                    <s:Group height="30" width="100%">
                        <s:Label id="dateDisplayLabel"
                                 verticalCenter="2"
                                 left="0"
                                 fontSize="14"
                                 fontWeight="bold"/>
                        <s:HGroup verticalCenter="0" horizontalCenter="0"
                                  verticalAlign="middle"
                                  gap="-1">
                            <s:Button id="decrementDisplayedDatesButton" 
                                      icon="@Embed(source='icons/arrow-left.png')"
                                      skinClass.london="components.shared.calendarClasses.skins.LeftArrowButtonSkin"
                                      rollOver="decrementDisplayedDatesButton.depth=2;"
                                      rollOut="decrementDisplayedDatesButton.depth=0;"/>
                            <s:ButtonBar id="displayModeButtonBar"
                                         depth="1"
                                         requireSelection="true" 
                                         selectedIndex="2"
                                         labelField="label"
                                         skinClass.london="components.shared.calendarClasses.skins.CalendarButtonBar">
                                <s:dataProvider>
                                    <s:ArrayCollection>
                                        <fx:Object label="Day"/>
                                        <fx:Object label="Week"/>
                                        <fx:Object label="Month"/>
                                        <fx:Object label="List"/>
                                    </s:ArrayCollection>
                                </s:dataProvider>
                            </s:ButtonBar>
                            <s:Button id="incrementDisplayedDatesButton" 
                                      icon="@Embed(source='icons/arrow-right.png')"
                                      skinClass.london="components.shared.calendarClasses.skins.RightArrowButtonSkin"
                                      rollOver="incrementDisplayedDatesButton.depth=2;"
                                      rollOut="incrementDisplayedDatesButton.depth=0;"/>
                        </s:HGroup>
                        <s:HGroup right="10"
                                  verticalCenter="0"
                                  verticalAlign="middle">
                            <s:Button id="todayButton"
                                      label="Today"
                                      click="datePicker.selectedDate=new Date()"/>
                            <s:Button id="addNewButton" 
                                      label="Add New"
                                      icon="@Embed(source='icons/plus.png')"/>
                        </s:HGroup>
                    </s:Group>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:HGroup top="6" right="6" bottom="6" left="6"
                              gap="-1"
                              verticalAlign="justify">
                        <calendarList:CalendarList id="calendarList"
                                                   minWidth="250"
                                                   visible="false" includeInLayout="false"
                                                   skinClass="components.shared.calendarClasses.calendarList.skins.CalendarListSkin"/>
                        <calendar:Calendar id="calendar" 
                                           width="100%" height="100%"/>
                    </s:HGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #2 -->
            <data:PrimaryContentData>
                <data:tabLabel>Column Mode Example</data:tabLabel>
                <data:exampleDescription>Illustrates the COLUMN display mode that is typically used to display a 'week' or 'day' view.</data:exampleDescription>
                <data:toolbarContent>
                    <s:HGroup>
                        <s:Form>
                            <s:FormItem label="Start Date:">
                                <mx:DateField id="columnStartDateSelect" 
                                              width="100"
                                              selectedDate="{new Date()}" />
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The start date to begin display in the calendar."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Column Count:">
                                <s:HSlider id="columnColumnCountSelect" 
                                           width="100"
                                           minimum="1" maximum="14" value="7"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The number of columns to display."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Enable SubColumns:">
                                <s:CheckBox id="columnSubColumnCalendarsSelect"
                                            selected="true"
                                            change="subColumnCalendarsChangeHandler(event)"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Display each calendar in a sub column within each day."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:Group>
                                <s:Button id="columnAddNewButtonGridExample"
                                          top="4"
                                          label="Add New Event"
                                          icon="@Embed(source='icons/plus.png')"
                                          fontWeight="bold"/>
                            </s:Group>
                        </s:Form>
                        <separators:VSeparator height="100%"
                                               paddingLeft="0" paddingRight="10"/>
                        <s:Form>
                            <s:FormItem label="Resize Threshold:">
                                <s:HSlider id="resizeThresholdSelect" 
                                           width="100"
                                           minimum="0" maximum="50" value="6"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The number of pixels from the edges of the renderer that a resize cursor will be displayed and a resize operation will start on mousedown."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="AutoScrolling Threshold:">
                                <s:HSlider id="autoScrollThresholdSelect" 
                                           width="100"
                                           minimum="0" maximum="200" value="50"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Defines the number of pixels from the boundaries of the viewport within which to trigger automatic scrolling during a dragging operation."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Scroll To Minutes:">
                                <s:HSlider id="scrollToTimeSelect" 
                                           width="100"
                                           minimum="0" maximum="1440"
                                           change="calendarColumn.scrollToTime(scrollToTimeSelect.value)"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Scroll to this number of minutes, if possible."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Drag Increment:">
                                <s:HSlider id="dragIncrementSelect" 
                                           width="100"
                                           minimum="1" maximum="60" value="15"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The number of minutes that renderers will grow/shrink during drag (resize) operations."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                        <separators:VSeparator height="100%"
                                               paddingLeft="0" paddingRight="10"/>
                        <s:Form>
                            <s:FormItem label="Primary Time Interval:">
                                <s:HSlider id="primaryTimeIntervalMinutesSelect"
                                           width="100" 
                                           value="60" minimum="15" maximum="1440" snapInterval="15" />
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The number of minutes for each primary time interval for the column display modes."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Secondary Intervals:">
                                <s:HSlider id="secondaryTimeIntervalCountSelect" 
                                           width="100"
                                           value="1" minimum="0" maximum="10" />
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The number of secondary time intervals to draw between primary time intervals."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Percent Zoom:">
                                <s:HSlider id="percentWidthZoomSelect"
                                           width="100" 
                                           value="0" minimum="0" maximum="100" />
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Increases the width of renderers by the zoom percentage. If the value is 0, the renderers will not overlap and will be separated by a single pixel.&#13;&#13;Increase the zoom percentage to overlap the item renderers."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Item Height Offset:">
                                <s:HSlider id="itemHeightOffsetSelect" 
                                           width="100"
                                           value="-1" minimum="-10" maximum="10" />
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Many calendar clients will inset renderers by a few pixels to ensure at least a few pixels of separation between adjacent renderers. In other words, in the 'column' display mode, an event ending at 9pm followed by an event starting at 9 P.M. can have a little separation between them.&#13;&#13;Applies to all renderers, even ones that are not adjacent to other renderers."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                        <separators:VSeparator height="100%"
                                               paddingLeft="0" paddingRight="10"/>
                        <s:Form>
                            <s:FormItem label="Day Begin Time:">
                                <s:HSlider id="startTimeSelect" 
                                           width="100"
                                           value="360" minimum="0" maximum="600" />
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The start of the day, defined as the number of minutes after midnight."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Day End Time:">
                                <s:HSlider id="endTimeSelect" 
                                           width="100"
                                           value="1080" minimum="700" maximum="1440" />
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The end of the day, defined as the number of minutes after midnight."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Minimum Visible Minutes:">
                                <s:HSlider id="minMinutesDisplayedInViewportSelect" 
                                           width="100"
                                           minimum="60" maximum="1440" value="540"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The minimum number of minutes displayed.&#13;&#13;The Day Begin/End setting will be respected."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                    </s:HGroup>
                </data:toolbarContent>
                <data:primaryContent>
                    <calendar:Calendar id="calendarColumn" 
                                       top="6" right="6" bottom="6" left="6"
                                       displayMode="columnAndAllDayGrid"
                                       startDate="{columnStartDateSelect.selectedDate}"
                                       columnCount="{columnColumnCountSelect.value}"
                                       showMonday="{showMondaySelect.selected}"
                                       showTuesday="{showTuesdaySelect.selected}"
                                       showWednesday="{showWednesdaySelect.selected}"
                                       showThursday="{showThursdaySelect.selected}"
                                       showFriday="{showFridaySelect.selected}"
                                       showSaturday="{showSaturdaySelect.selected}"
                                       showSunday="{showSundaySelect.selected}"
                                       resizeThreshold="{resizeThresholdSelect.value}"
                                       autoScrollThreshold="{autoScrollThresholdSelect.value}"
                                       minMinutesDisplayedInViewport="{minMinutesDisplayedInViewportSelect.value}"
                                       dragIncrement="{dragIncrementSelect.value}"
                                       startTime="{startTimeSelect.value}"
                                       endTime="{endTimeSelect.value}"
                                       primaryTimeIntervalMinutes="{primaryTimeIntervalMinutesSelect.value}"
                                       secondaryTimeIntervalCount="{secondaryTimeIntervalCountSelect.value}"
                                       percentWidthZoom="{percentWidthZoomSelect.value}"
                                       itemMarginLeft="{itemMarginLeftSelect.value}"
                                       itemMarginRight="{itemMarginRightSelect.value}"
                                       backgroundColor="{backgroundColorSelect.selectedColor}"
                                       backgroundAlpha="{backgroundAlphaSelect.value}"
                                       allowMultipleSelection="{allowMultipleSelectionSelect.selected}"
                                       dragEnabled="{dragEnabledSelect.selected}"
                                       primaryGridLineColor="{primaryGridLineColorSelect.selectedColor}"
                                       secondaryGridLineColor="{secondaryGridLineColorSelect.selectedColor}"
                                       todayFillColor="{todayFillColorSelect.selectedColor}"
                                       itemHeightOffset="{itemHeightOffsetSelect.value}"
                                       selectedPeriodFillColor="{selectedPeriodFillColorSelect.selectedColor}"/>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #3 -->
            <data:PrimaryContentData>
                <data:tabLabel>Grid Mode Example</data:tabLabel>
                <data:exampleDescription>Illustrates the GRID display mode that is typically used to display a 'month' view.</data:exampleDescription>
                <data:toolbarContent>
                    <s:HGroup>
                        <s:Form>
                            <s:FormItem label="Start Date:">
                                <mx:DateField id="gridStartDateSelect" 
                                              width="100"
                                              selectedDate="{new Date()}" />
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The start date to begin display in the calendar.&#13;&#13;Any time on the provided Date object will be scrubbed and only the date will be used."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:Group>
                                <s:Button id="gridAddNewButtonGridExample" 
                                          top="4"
                                          label="Add New Event"
                                          icon="@Embed(source='icons/plus.png')"
                                          fontWeight="bold"/>
                            </s:Group>
                        </s:Form>
                        <separators:VSeparator height="100%"/>
                        <s:Form>
                            <s:FormItem label="Column Count:">
                                <s:HSlider id="gridColumnCountSelect" 
                                           width="100"
                                           minimum="1" maximum="14" value="7"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The number of columns to display."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Rows:">
                                <s:HSlider id="gridRowCountSelect" 
                                           width="100"
                                           minimum="1" maximum="14" value="4"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The number of rows to display."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                    </s:HGroup>
                </data:toolbarContent>
                <data:primaryContent>
                    <calendar:Calendar id="calendarGrid" 
                                       top="6" right="6" bottom="6" left="6"
                                       displayMode="grid"
                                       startDate="{gridStartDateSelect.selectedDate}"
                                       columnCount="{gridColumnCountSelect.value}"
                                       rowCount="{gridRowCountSelect.value}"
                                       showMonday="{showMondaySelect.selected}"
                                       showTuesday="{showTuesdaySelect.selected}"
                                       showWednesday="{showWednesdaySelect.selected}"
                                       showThursday="{showThursdaySelect.selected}"
                                       showFriday="{showFridaySelect.selected}"
                                       showSaturday="{showSaturdaySelect.selected}"
                                       showSunday="{showSundaySelect.selected}"
                                       itemMarginLeft="{itemMarginLeftSelect.value}"
                                       itemMarginRight="{itemMarginRightSelect.value}"
                                       backgroundColor="{backgroundColorSelect.selectedColor}"
                                       backgroundAlpha="{backgroundAlphaSelect.value}"
                                       allowMultipleSelection="{allowMultipleSelectionSelect.selected}"
                                       dragEnabled="{dragEnabledSelect.selected}"
                                       primaryGridLineColor="{primaryGridLineColorSelect.selectedColor}"
                                       secondaryGridLineColor="{secondaryGridLineColorSelect.selectedColor}"
                                       todayFillColor="{todayFillColorSelect.selectedColor}"
                                       selectedPeriodFillColor="{selectedPeriodFillColorSelect.selectedColor}"/>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>