Flex 3 - Calendar Component

This is a project to write a Flex component that draws a visual calendar with the following views: Day, Week and Month.? The layout of the calendar views should be similar to Outlook 2007's calendar or iCal.? A component similar to what we want but written in asp.net can be found [here][1].? This project, however, involves writing a calendar component in ActionScript 3.0 and the Flex 3 framework.? The data source will be an ArrayCollection containing event objects (see detailed description).? The calendar component should draw these events on a visual calendar.? ? We're looking for an experienced flex developer to implement this project. Since most of work involves drawing a calendar, the developer should have a good eye for clean design and attention to detail. Please see the "Other requirements" section below for more details.? ## Deliverables The project may be broken down into phases: **Phase 1: ** Create classes to render the visual layouts for the three views: daily view, weekly view, and monthly view (without any events). These should render cleanly and resemble the views in professional calendars like Outlook or iCal. **Phase 2: **Create an event renderer implement functionality to draw events onto the 3 calendar views (daily/weekly/monthly). Event renderers can draw as different colors, as specified in the event data object. Each event renderer should dispatch the following mouse events: mouse over, out, click, double-click. **Phase 3: **Handle special cases in rendering events onto calendars. Some examples: Events that span multiple days should visually span multiple days in the monthly calendar view. This should handle cases in which events span beyond one row (e.g. Saturday -> Sunday). Events that span multiple days in the weekly view should also be rendered correctly. E.g. An event starting at 12pm on a tuesday and ending at 12pm on a thursday should have a visual box spanning the bottom half of Tuesday, all of Wednesday, and the top half of thursday. Events that overlap need to be rendered gracefully. E.g. events should be rendered side-by-side (as in outlook) or overlap slightly (as in iCal). We can discuss how this feature works. **Phase 4** Add drag and drop support as well as resize functinoality to event renderers. E.g. a user can click on an event and drag it to another time/day, depending on the view. A user should also be able to resize an event to make its duration longer or shorter. When an event is changed, it should dispatch a custom event. **Other details: ** Calendar styles should be defined in CSS (e.g. line styles, colors, fonts, any graphics, etc). An "event" in this system will be an instance of a custom event class with the following properties: public class CalendarEvent { ? ? ? public var ID:Number; ? ? ? ? public var Summary:String; ? ? ? ? public var Location:String; ? ? ? ? public var Description:String; ? ? ? ? public var AllDay:Boolean; ? ? ? ? public var Start:Date; ? ? ? ? public var End:Date; ? ? ? ? public var Color:uint; } This calendar component should bind to an ArrayCollection of CalendarEvents. Accordingly, the calendar component should listen to events dispatched by the ArrayCollection class to handle insert, update, and delete events. E.g. if a new CalendarEvent is added to the ArrayCollection by my main program, the calendar component should draw the new event to the display (assuming the event's start/end dates are within the current view scope). Similarly, if an event is deleted from the ArrayCollection, the calendar should remove the deleted event from the display (either by "hiding" that particular event renderer instance or by redrawing the entire calendar view). The calendar component should expose a function that allows the view to be changed, such as [login to view URL](); Here are links to some related work which may be helpful: * <[login to view URL]> ? (see [login to view URL]) * <[login to view URL]> ? (buggy and somewhat bloated - we don't need animations) * <[login to view URL]> ? (an update to the one above, but still has some bugs and is bloated) * <[login to view URL]> ? (example using the CalendarLayout class) ## Platform Adobe Flex 2, ActionScript 3.