<?xml version="1.0" encoding="utf-8"?>
<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)">
<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;
protected var calendars:Array;
protected var listenersAdded:Boolean;
public function creationComplete():void
{
demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, viewstackChangeHandler);
calendars = [];
var workCalendar:CalendarDefinitionData = new CalendarDefinitionData();
workCalendar.title = "Work";
workCalendar.color = 0x662C91;
calendars.push(workCalendar);
var personalCalendar:CalendarDefinitionData = new CalendarDefinitionData();
personalCalendar.title = "Personal";
personalCalendar.color = 0xF37D22;
calendars.push(personalCalendar);
var today:Date = new Date();
var items:Array = [];
for (var i:int = 0; i < 60; i++)
{
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);
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);
}
for (i = 0; i < 40; i++)
{
day = i * 7 + Math.random() * 7;
for (var j:int = 0; j < 0; j++)
{
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);
}
}
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);
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];
if (allDay)
{
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";
}
}
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.";
}
}
}
else
{
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.";
}
}
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;
}
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>
<fx:Declarations>
<calendarClasses:CalendarInteractionManager id="interactionManager"/>
</fx:Declarations>
<s:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</s:states>
<containers:DemoApplicationWrapper id="demoAppWrapper"
width="100%" height="100%"
westRegionTitle="Calendar Description"
description="A calendar. 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 & 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 & 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. 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. 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. 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. 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>