How to Build a Calendar Custom Control?

Question

​

Synopsis

I want to build a custom control which displays events in a calendar.

Here is the draft:

The Concept

• The bottom left box is vertically scrollable. The bottom right box scrollable in both directions.
• It's possible to move the event views around. If they come near the bounds during dragging the view auto-scrolls in that direction.
• The scroll area is finite according to the earliest and latest event in a database or a certain maximum. But if the user continues scrolling the scroll area grows accordingly and collapses if the user scrolls back and did not create a new event.
• This "July 2011" button at the bottom acts as scroller. If the user pulls it beyond the bounds of the scroll area, it grows accordingly.
• The month name in the header stays always at this position until the next month moves in, so it's a long cell which spans over the day cells of the month with a floating caption.
• The header rows and columns are always visible.

The Question

Since I'm only slightly familiar with the capabilities of Cappuccino or Cocoa's control classes: Where can I make direct use of Cappuccino or Cocoa classes, where is it reasonable to subclass Cappuccino/Cocoa controls and where do I have to write custom controls from scratch?

Edit: My Thoughts

I think its reasonable dividing the control with a SplitView with a vertical divider. I could use a TableView for the left header column in the left subview. And I could synchronize the vertical scrolling with what happens on the right side.

But I'm not so sure about the view on the right side. I thought about TableView but I would actually only need the cells as a background grid. Thus, I guess, it would be difficult to have two header rows and to implement the desired scrolling behavior. So the best way is probably to create a completely new custom view. But then again the question: Where is it reasonable to subclass Cappuccino resp. Cocoa controls and where do I have to write custom controls from scratch?

Answer 1

For the calendar view it looks sufficiently different from a table view that it might be easier to just write it from scratch. Perhaps start with a bare CPView and draw the background in its drawRect: method, then create a CPControl subclass for the events. In its drawRect render its borders and background, or use a CPBox with setBackgroundColor:. The text is best drawn with label subviews. React to mouseDown and so on to implement drag and drop, double click events and what else you might want.

Then put the whole calendar view in a CPScrollView. Synchronise its vertical scrolling with the scroll view on the left - use a CPTableView there. Scrolling is fairly easy with a CPScrollView: just call scrollToPoint: on the content view. You will need to expand the content view size dynamically to allow 'infinite' scrolling. Maybe simply always make the content view size the minimum of the size of its events and the current scroll position + X (the X giving the user some distance to scroll before you have to resize again).

In a nutshell, subclass CPView and CPControl - CPView when there is no interaction, and CPControl when there is.