Your Cart is currently empty.

 


 

The best way to customize control bar is to implement your own one:

You can hide the control bar by setting the controlBarVisible property to false.
Then, the main mechanisms to know is that:

  • you have to use the setXXXView methods (setDayView/setWeekView...) or change displayMode property (same effect) to change the current view.
  • you have to set the currentDate property to change the current displayed date
  • you have to bind the currentDate property or listen to currentDateChange event if you want to update your control bar accordingly when user navigates inside the calendar

Back to top


 

This sample application shows the basics to handle drag & drop operations from KCCalendar to another component and vice-versa.

See the Drag & Drop events from and to KCCalendar component application sample
Download Drag & Drop events from and to KCCalendar component source code

In this sample, we choose the Spark List component.

{slide=Events creation and list item renderer|closed}

To initialize the sample, we create some events and populate them in the components data provider:

{mooblock=Code}
{code}private function createSample(label:String, startTime:Date, endTime:Date, color:Number):CalendarObjectSample
{
    var sample:CalendarObjectSample = new CalendarObjectSample();
    sample.label = label;
    sample.startTime = new Date(startTime);
    sample.endTime = new Date(endTime);
    sample.color = color; return sample;
}
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
    var calendarData:ArrayCollection = new ArrayCollection();
    var listData:ArrayCollection = new ArrayCollection();
    var tmpStartTime:Date;
    var tmpEndTime:Date;
    tmpStartTime = new Date();
    tmpEndTime = new Date();
    tmpStartTime.setHours(4, 30);
    tmpEndTime.setHours(9, 45);
    calendarData.addItem(createSample("KCCalendar event 1", tmpStartTime, tmpEndTime, 0x0000FF));
    tmpStartTime.date += 1; tmpStartTime.setHours(12, 15);
    tmpEndTime.date += 1;
    tmpEndTime.setHours(16, 30);
    calendarData.addItem(createSample("KCCalendar event 2", tmpStartTime, tmpEndTime, 0x00FF00));
    tmpStartTime.setHours(6, 45);
    tmpEndTime.setHours(9, 0);
    listData.addItem(createSample("List event 1", tmpStartTime, tmpEndTime, 0xFF0000));
    tmpStartTime.setHours(13, 10);
    tmpEndTime.setHours(20, 50);
    listData.addItem(createSample("List event 2", tmpStartTime, tmpEndTime, 0xFFFF00));
    calendar.dataProvider = calendarData;
    list.dataProvider = listData;
}{/code}{/mooblock}

{slide=Drag & Drop from KC-Calendar to another component}

Listen to DRAG_ENTER & DRAG_DROP events

First of all, the component on which you want to drag events (here a List component) must listen to the DRAG_ENTER & the DRAG_DROP event.
The DRAG_ENTER event listener method will determine if the component accepts the drag&drop operation.
The DRAG_DROP event listener method will determine the drag&drop operation behavior.

{mooblock=Code}
{code}list.addEventListener(DragEvent.DRAG_ENTER, dragEnterListHandler); list.addEventListener(DragEvent.DRAG_DROP, dragDropListHandler);{/code}{/mooblock}

 

DRAG_ENTER management: accept KCCalendar events

The calendar event dragSource contains the "calendarItem" format.
You only have to test that the dragSource contains this format to accept the drag&drop operation:

{mooblock=Code}
{code}private function dragEnterListHandler(event:DragEvent):void
{
    if (event.dragSource.hasFormat("calendarItem")) // Dragged item from the KCCalendar are "calendarItem" (CalendarItemRenderer object by default or custom renderer)
    {
        DragManager.acceptDragDrop(event.currentTarget as UIComponent);
    }
}{/code}{/mooblock}

 

DRAG_DROP management: move data from KCCalendar to the list

In this sample, we choose to move data from a component to the other one. The calendarItem is an instance of the event renderer class.
By default this class is the CalendarItemRenderer class but it could be a custom class if you specify a custom renderer.
We advice to cast the item in the CalendarItemRendererAbstract class to have an evolutive code that could manage all types of renderer (as all renderers must inherit from this base class): then the item has a calendarItem.calendarObject property that reference the data provider item (here a CalendarObjectSample):

{mooblock=Code}
{code}private function dragDropListHandler(event:DragEvent):void
{  // Using CalendarItemRendererAbstract insure that the code won't trigger exception as renderer (default & custom ones) must inherit from it.
    var calendarObject:CalendarObjectSample = (event.dragSource.dataForFormat("calendarItem") as CalendarItemRendererAbstract).calendarItem.calendarObject as CalendarObjectSample; // Move data from KCCalendar to the list
    calendar.dataProvider.removeItemAt(calendar.dataProvider.getItemIndex(calendarObject));
    list.dataProvider.addItem(calendarObject);
}{/code}{/mooblock}

{slide=Drag & Drop from a component to KC-Calendar}

Note that in this sample application a Spark List is used, you have to adapt the code according to the component and the SDK you use (mx / spark components).

Listen to DRAG_ENTER & DRAG_DROP events

The same way you add events for the list, you have to listen to DRAG_ENTER & DRAG_DROP on the KCCalendar:

{mooblock=Code}
{code}calendar.addEventListener(DragEvent.DRAG_ENTER, dragEnterKCCalendarHandler);
calendar.addEventListener(DragEvent.DRAG_DROP, dragDropKCCalendarHandler);{/code}{/mooblock}

 

DRAG_ENTER management: accept KCCalendar events

The Spark List event dragSource contains the itemsByIndex format.
You only have to test that the dragSource contains this format to accept the drag&drop operation:

{mooblock=Code}
{code}private function dragEnterKCCalendarHandler(event:DragEvent):void
{
    if (event.dragSource.hasFormat("itemsByIndex")) // Format is specific to the drag source component (here a List)
    {
        DragManager.acceptDragDrop(event.currentTarget as UIComponent);
    }
}{/code}{/mooblock}

 

DRAG_DROP management: move data from the list to the KCCalendar

The Spark List event dragSource contains a Vector of Object. 
Each object is a data provider item (here a CalendarObjectSample).

{mooblock=Code}
{code}private function dragDropKCCalendarHandler(event:DragEvent):void
{
    var dragObjectVector:Vector.= event.dragSource.dataForFormat("itemsByIndex") as Vector.;  // Move data from the list to KCCalendar
    list.dataProvider.removeItemAt(list.dataProvider.getItemIndex(dragObjectVector[0]));
    calendar.dataProvider.addItem(dragObjectVector[0]);
}{/code}{/mooblock}

{slide=Source and sample application}

See the Drag & Drop events from and to KCCalendar component application sample
Download Drag & Drop events from and to KCCalendar component source code

{/slides}

Back to top


 

See the Large data set optimizations in KCCalendar component sample application
Download Large data set optimizations in KCCalendar component sample source code

Sometimes you want to manage large data sets of events but it could have an impact on the component performances.

This article focuses on some tips & tricks that can help you to maintain the performances:

{slide=Dynamic data provider|closed}

The dynamic data provider mechanism simply consists to only give data that will be displayed in the component according to the current view mode and the current period, nothing more.
For example, consider you have 1200 events in the current year (120 by month), instead of giving the component all the 1200 events, you only give the 120 corresponding to the current selected month.

The sample application illustrates this mechanism in conjonction with the use of a custom renderer for month view (See Summary data & summary custom renderer part).

{slide=Data pre-order}

The component internally sorts items according to their dates (sort them chronologically according to start date, then end date if start dates are the same).
You can help the component by giving a pre-ordered data set limiting its sort work.
It is especially easy when you retrieve data from a database as you can use the database engine to do this work.

{slide=Light custom renderer}

The embedded item renderer is a bit complex as it is composed on many Flex graphical components.
To speed-up display you can define your own renderer with less graphical components.

The sample application illustrates the use of a minimal renderer.

{slide=Summary data & summary custom renderer}

To manage large data set on month & year views, you can avoid displaying all data by providing summary data avoid use a custom renderer to display summary information.

The sample application illustrates the use of a custom renderer in month view displaying the amount of event on each day (note: it uses the displayItemsInFullSizeInMontView property to display item in full size).

{slide=Event concurrency setting}

Algorithm responsible of managing event concurrency (to avoid items overlapping) could induce some unnecessary performance overhead.
If you don’t need concurrency display in your case, you can disable concurrency management by setting the concurrentEventDisplayMode property to KCCalendar.OVERLAP_MODE.

Note: the algorithm has been greatly enhanced in the future 1.4 version that will be available soon for beta testing.

{slide=Source and sample application}

See the Large data set optimizations in KCCalendar component sample application
Download Large data set optimizations in KCCalendar component sample source code

{/slides}

Back to top


 

The KCCalendar component embeds English & French translations but it is really easy to add your own language.
You can even, as it is in the sample application, propose to user a language choice and dynamically change the calendar language setting

See the managing calendar translation application sample
Download managing calendar translation tutorial source code

This tutorial will show you how to do that with 2 methods: static & dynamic and adding German & Portuguese languages.

{slide=Elements to translate|closed}

There are 2 main things to translate:

  • day & months names
  • control bar labels (only if you use the embedded one)

If you are using FLEX 4, day & month translation are already embedded for many languages.
If it is not the case, see the FLEX documentation about adding new locales: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f2d.html#WS2db454920e96a9e51e63e3d11c0bf69084-7f34

For FLEX 3, you have to create a new locale: http://livedocs.adobe.com/flex/3/html/help.html?content=l10n_3.html
We recommend you to check the BabelFlex project as it provides some framework translations for many languages: http://ttfx.org/Tontons_Flexeurs/BabelFlex.html

{slide=Compiler settings}

In order to use a language, you have to modify the compiler arguments, you have to add « -locale= » with the locales you want to use, i.e.:

-locale=fr_FR,en_US,de_DE,pt_BR – if you want to manage French, English, Deutch & Portuguese

As example if you want the component translated in Portuguese only, you have to set the compiler arguments to -locale=pt_BR

Note: the project won’t compile anymore if a language is not found in the framework.

{slide=Static translation (using properties file)}

Day & Month names

As it has been explained above, with FLEX 4 or by using BabelFlex day & month names could be already translated.
If it is not the case or if you want to modify the default translation, you can override it by creating a SharedResources.properties file containing the translations.

First of all, create a “locales” folder in your project and a folder for each language you want to manage.
Then modify the compiler arguments to indicate the locales folder:

-source-path=locales/{locale}

In our example, we have 4 sub-folders:

folders

In this tutorial, we will change the default German translation.

Start by copying a SharedResources.properties file. You will find it in the SDK in folder “sdks\x.x\frameworks\projects\framework\bundles\xx_XX.”

You have to copy in it in the dedicated locale folder.

Then, you can modify the labels:

  • dayNames=Son,Mon,Die,Mit,Don,Fre,Sam
  • monthNames=Januar - 1,Februar - 2,März - 3,April - 4,Mai - 5,Juni - 6,Juli - 7,August - 8,September - 9,Oktober - 10,November - 11,Dezember – 12

 

Control bar labels

The control bar labels can be overridden by defining a Calendar.properties file.
You have to create it in the dedicated locale folder (see above for the folder architecture and compiler settings).

 

Important notes:

  • you have to explicitly tells the compiler that you use a resource bundle by adding “[ResourceBundle("Calendar")]” in your source code
  • in this case, you have to create a file for each locale as else the one you defined will be used for all languages
  • change the files properties to UTF-8

Then, you can define your own labels:

{mooblock=Code}
{code}Previous=Vorherig
Next=Als nächstes
Day=Tag
Week=Woche
Month=Monat
Year=Jahr
Now=Jetzt
Today=Heute
{/code}{/mooblock}

Notes:

  • Previous & Next are for arrows tooltips
  • Now is for the last control bar button
  • Today is for the mini-calendar component that helps to select a date or a week
 

{slide=Dynamic translation (using ActionScript code)}

In this tutorial we will handle the Portuguese translation with code.

The process is the same as the static translation but everything is done with ActionScript code.

Note: the component automatically detects language changes but translation content changes. In the code samples you will see that you have to explicitly inform the component that some resources changed when you modify the contents.


Day & Month names

The “SharedResources” bundle has to be modified:

{mooblock=Code}
{code}resourceManager.localeChain = ["pt_BR"];
// Load SharedResources bundle
var bundle:ResourceBundle = resourceManager.getResourceBundle("pt_BR", "SharedResources") as ResourceBundle;
// Change day names
bundle.content["dayNames"] = "Dom,Seg,Ter,Qua,Qui,Sex,Sáb";
// Change month names
bundle.content["monthNames"] = "Janeiro - 1,Fevereiro - 2,Março - 3,Abril - 4,Maio - 5,Junho - 6,Julho - 7,Agosto - 8,Setembro - 9,Outubro - 10,Novembro - 11,Dezembro - 12";
// Inform the component that some resources changed
calendar.forceResourceChanged();
{/code}{/mooblock}


Control bar labels

The “Calendar” bundle has to be modified:

{mooblock=Code}
{code}// Load Calendar bundle
var calendarBundle:ResourceBundle = resourceManager.getResourceBundle("pt_BR", "Calendar") as ResourceBundle;
// Change control bar labels
calendarBundle.content["Previous"] = "Precedente";
calendarBundle.content["Next"] = "Seguindo";
calendarBundle.content["Day"] = "Dia";
calendarBundle.content["Week"] = "Semana";
calendarBundle.content["Month"] = "Mês";
calendarBundle.content["Year"] = "Ano";
calendarBundle.content["Now"] = "Hoje";
calendarBundle.content["Today"] = "Hoje";
// Inform the component that some resources changed
calendar.forceResourceChanged();
{/code}{/mooblock}

{slide=Source and sample aplication}

See the managing calendar translation application sample
Download managing calendar translation tutorial source code

{/slides}

Back to top


 

This tutorial intends to help you to handle the KCCalendar component and integrate it in your application.

See the KCCalendar component tutorial – basic event & data handling application sample
Download KCCalendar component tutorial – basic event & data handling source code

{mooblock=Code}
{code}protected function application1_creationCompleteHandler(event:FlexEvent):void
{
    var myData:ArrayCollection = new ArrayCollection();
    var sample:CalendarObjectSample;
 
    sample = new CalendarObjectSample(  );
    sample.startTime = new Date();
    sample.endTime = new Date();
    sample.endTime.hours += 2; // Add 2 hour
    sample.label = "My first event";
    sample.color = 0x0000FF;
    myData.addItem(sample);
 
    sample = new CalendarObjectSample();
    sample.startTime = new Date();
    sample.startTime.date += 1; // Add 1 day
    sample.startTime.setHours(12, 15); // Set hour to 12h15
    sample.endTime = new Date();
    sample.endTime.date += 1;  // Add 1 day
    sample.endTime.setHours(16, 30); // Set hour to 16h30
    sample.label = "My second event";
    sample.color = 0x00FF00;
    myData.addItem(sample);
 
    // or load data from your server and create samples
 
    calendar.dataProvider = myData;
}
{/code}{/mooblock}

Then, all you have to do is to retrieve data from you server database, files or any other data source, create object samples accordingly and set the data provider.

{slide=Project and component creation|closed}

Download KCCalendar component evaluation library & sample application source code

KCCalendar component evaluation library can be downloaded here, for FLEX SDK 3.2, 3.5, 4.0 & 4.1

Sample application source code may be useful to test the many KCCalendar features & properties and understand how it is done. It can be downloaded here: KCCalendar live demo source

 

Create a new project and import KCCalendar library

To import the library, if you use Flex/Flash Builder, simply copy the KCCalendar library file in the project libs folder.

 

Create an instance of the KCCalendar component

{mooblock=Code}
{code}{/code}{/mooblock}

 

Add data to the component

To display events, you have to populate the dataProvider property (ArrayCollection object).

The dataProvider can contain any type of objects (it will be the subject of a future article) but you can start with the CalendarObjectSample class.

Note: subclassing CalendarObjectSample is an easy way to add your custom properties to the calendar items - see chapter below.

 

{slide=Manages events from the component}

There are several events that the component will fire. The most important one is the itemChange event that will notify a user interaction changed an event.

It must be handled to modify your data accordingly:

{mooblock=Code}
{code}protected function calendar_itemChangeHandler(event:CalendarEvent):void
{
    var calendarObject:CalendarObjectSample = (event.item as CalendarObjectSample);
 
    if (failureCheckBox.selected)
    {
        calendar.dataProvider.refresh();    
    }
    else
    {
        // Update data provider object
        calendarObject.startTime = new Date(event.startTime);
        calendarObject.endTime = new Date(event.endTime);  
 
        // Update data on your server
    }
}
{/code}{/mooblock}

Updating data provider is mandatory if you want to keep the uses changes.

Why? The component has been developed for developers and to help them to manage any kind os situation so the component never changes you data provider data. You have to change it explicitly.

This mechanism allows you to validate the changes, even with a server transaction, and discard them if changes are not allowed.

To refresh the data, you can call calendar.dataProvider.refresh()

In this tutorial sample application, the Failure checkbox illustrates that.

{slide=Subclassing CalendarObjectSample}

In order to add your own properties to the calendar object, the easiest way is to subclass CalendarObjectSample:

{mooblock=Code}
{code}package
{
    import com.keepcore.calendar.CalendarObjectSample;
 
    public class MyCalendarObjectSample extends CalendarObjectSample
    {
        public var myPropertyID: int;
        public var myPropertyString: String;
 
        public function MyCalendarObjectSample(ID:int, string:String)
        {
            super();
            myPropertyID = ID;
            myPropertyString = string;
        }
    }
}
{/code}{/mooblock}

Then you can populate the data in the data provider and manage events the same way:

{mooblock=Code}
{code}sample = new MyCalendarObjectSample(0, "ITEM 0");
...
sample = new MyCalendarObjectSample(1, "ITEM 1");
...
 
protected function calendar_itemChangeHandler(event:CalendarEvent):void
{
    var calendarObject:MyCalendarObjectSample = (event.item as MyCalendarObjectSample);
 
    if (failureCheckBox.selected)
    {
        calendar.dataProvider.refresh();    
    }
    else
    {
        // Update data provider object
        calendarObject.startTime = new Date(event.startTime);
        calendarObject.endTime = new Date(event.endTime);
        Alert.show("Item changed, ID = " + calendarObject.myPropertyID + " - " + calendarObject.myPropertyString);
 
        // Update data on your server
    }
}
{/code}{/mooblock}

{slide=Source and sample application}

See the KCCalendar component tutorial – basic event & data handling application sample
Download KCCalendar component tutorial – basic event & data handling source code

{/slides}

Back to top


 

 

{slide=Is the calendar Air compliant ?|closed}

Yes, our flex calendar component can be used our in an AIR project.
But there is a known limitation due to AIR about drag and drop: it is only available on SDK >= 4.0 and with some limitations.

This is due to different drag & drop management between Flex and AIR (see WindowedApplication - useNativeDragManager), AIR drag & drop support is only enabled if the property useNativeDragManager is set to false in the main WindowedApplication (FLEX 4 only). The side effect is that it does not allow dragging between AIR windows and between the operating system or AIR window.

{slide=Does the calendar component support others languages ?}

Yes, you can fully customize all the labels but also configure date and time format for a full regionalization.

For day & month names and control bar labels, please see the Managing calendar translations tutorial.

{/slides}

Back to top