Let’s solve the same problem using component embedding. We define a component with two calendars and two dates. The idea is that we want to always have the two mini-calendars visible on the same page and provide some feedback to the user as shown by Figure 94.
WAComponent subclass: #MiniInn
instanceVariableNames: 'calendar1 calendar2 startDate endDate'
Since we want to show the two calendars on the same page we return them as children.
^ Array with: calendar1 with: calendar2
We initialize the calendars and make sure that we store the results of their answers.
calendar1 := WAMiniCalendar new.
canSelectBlock: [ :date | Date today < date ];
onAnswer: [ :date | startDate := date ].
calendar2 := WAMiniCalendar new.
canSelectBlock: [ :date | startDate isNil or: [ startDate < date ] ];
onAnswer: [ :date | endDate := date ]
Finally, we render the application, and this time we can provide some simple feedback to the user. The feedback is simple but this is just to illustrate our point.
html heading: 'Starting date'.
html render: calendar1.
ifFalse: [ html text: 'Selected start: ' , startDate asString ].
html heading: 'Ending date'.
html render: calendar2.
(startDate isNil not and: [ endDate isNil not ]) ifTrue: [
html text: (endDate - startDate) days asString ,
' days from ' , startDate asString , ' to ' ,
endDate asString , ' ' ]