Over the past few months, our consulting services team has been quite busy working on client projects. For those of you who don’t know, we do a lot of consulting work for our customers. We have a number of customer projects where our components are heavily used. Since we wrote the components, our customers often come to us to build their projects around our components. Once such project we are currently working on requires a fair bit of customization on our Calendar component. This is a part of our Dashboard framework. Basically what the customer wanted here was to implement categorization of the calendar events, and implement custom rendering mechanism for the events on the calendar, and on the popup for the calendar items, they wanted to be able to pick and choose which category to associate each calendar item with.

The first thing we did, and we recommend you do this as well, is to extend the base Calendar component as below:

This makes it a lot easier to access protected functions and variables. We almost never make anything private, as a library developer try to put as few restrictions as possible for extension and custmozation.

 

Note that we provided a custom popup renderer, as well as a custom calendar item renderer. The calendar item renderer is the actual rectangle that shows on top of the week, month and day views in the calendar, while the calendar popup renderer is the popup that shows up when you double click on a calendar item (edit mode), or when you double click on a time slot on the calendar anywhere (add mode) Note that for providing custom item renderer we extended the built in CalendarItemRenderer

 

The requirement here was to implement a custom color, and for the sake of simplicity we have shown some sample logic here to draw different colors. For rendering the calendar item in different color, we override the updateDisplayList method of CalendarItemRenderer, like shown above.

And then we associate the popup renderer with the Calendar as below:

this.calendarItemPopupRenderer = new ClassFactory(MRXCalendarItemPopup);

 

Once you have the custom calendar built, you can use it like below:

 

 

Finally, the results:

 

 

 

 

Below is the sample project that we created using some of the concepts covered in this blog post.

 

SampleCalendar.zip (48.15 kb)

 

If you have any questions, please feel free to reach out to our support team. If you are interested in leveraging our expertise to build Flex/HTML/Android/iOS projects, please do not hesitate to contact us using this form: http://www.flexicious.com/Home/ContactUs